/* NICE_API_MANAGER_MOCKUP_V300 */

#apiManagerSection {
  --am-bg: #f4f8f5;
  --am-card: #ffffff;
  --am-line: #dce7df;
  --am-text: #183128;
  --am-muted: #718078;
  --am-dark: #103f30;
  --am-green: #168c55;
  --am-green-soft: #e9f7ee;
  --am-warning: #cb8a09;
  --am-warning-soft: #fff4d8;
  --am-danger: #cf4545;
  --am-danger-soft: #ffeaea;
  --am-disabled: #737c77;
  --am-disabled-soft: #edf0ee;
  --am-blue: #3576ff;
  --am-shadow: 0 12px 35px rgba(24, 63, 48, .055);

  width: 100%;
  color: var(--am-text);
}

.api-manager-v3,
.api-manager-v3 * {
  box-sizing: border-box;
}

.api-manager-v3 {
  width: 100%;
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

.api-mockup-intro {
  margin: -4px 0 22px;
  color: var(--am-muted);
  font-size: 16px;
}

.api-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 22px;
}

.api-summary-card {
  min-height: 118px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  border: 1px solid var(--am-line);
  border-radius: 18px;
  background: rgba(255,255,255,.92);
  box-shadow: var(--am-shadow);
}

.api-summary-icon {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 20px;
  font-weight: 900;
  background: #e5f5eb;
  color: var(--am-green);
}

.api-summary-card:nth-child(3) .api-summary-icon {
  background: #eaf0ff;
  color: var(--am-blue);
}

.api-summary-label {
  color: #4f655a;
  font-size: 13px;
  font-weight: 700;
}

.api-summary-value {
  margin-top: 3px;
  font-size: 25px;
  line-height: 1.1;
  color: #102e24;
  font-weight: 900;
}

.api-summary-detail {
  margin-top: 5px;
  color: #819087;
  font-size: 12px;
}

.api-test-banner {
  display: none;
  min-height: 58px;
  padding: 12px 16px;
  margin-bottom: 18px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid #a9dfbd;
  border-radius: 14px;
  background: #ecf9f1;
  color: #147644;
}

.api-test-banner.visible {
  display: flex;
}

.api-test-banner.error {
  border-color: #efbbbb;
  background: #fff0f0;
  color: #b63737;
}

.api-test-banner.warning {
  border-color: #eed18b;
  background: #fff8e8;
  color: #936400;
}

.api-test-banner-main {
  display: flex;
  align-items: center;
  gap: 11px;
  flex-wrap: wrap;
  font-size: 13px;
}

.api-test-banner-icon {
  width: 31px;
  height: 31px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #18a65e;
  color: white;
  font-weight: 900;
}

.api-test-banner.error .api-test-banner-icon {
  background: #d74b4b;
}

.api-test-banner.warning .api-test-banner-icon {
  background: #d79b1c;
}

.api-test-banner-close {
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 20px;
  cursor: pointer;
}

.api-toolbar-card {
  padding: 14px;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  border: 1px solid var(--am-line);
  border-radius: 17px 17px 0 0;
  background: white;
}

.api-toolbar-search {
  min-width: 260px;
  flex: 1;
  max-width: 360px;
  height: 43px;
  padding: 0 13px;
  border: 1px solid var(--am-line);
  border-radius: 11px;
  background: white;
  color: var(--am-text);
  outline: none;
  font: inherit;
  font-size: 13px;
}

.api-toolbar-search:focus {
  border-color: #a2c7b1;
  box-shadow: 0 0 0 3px rgba(26, 128, 81, .07);
}

.api-filter-list {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.api-filter-button {
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--am-line);
  border-radius: 10px;
  background: white;
  color: #485e53;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.api-filter-button.active {
  background: var(--am-dark);
  border-color: var(--am-dark);
  color: white;
}

.api-filter-button.healthy {
  color: var(--am-green);
}

.api-filter-button.warning {
  color: var(--am-warning);
}

.api-filter-button.error {
  color: var(--am-danger);
}

.api-filter-button.disabled {
  color: var(--am-disabled);
}

.api-main-table {
  overflow: hidden;
  border: 1px solid var(--am-line);
  border-top: 0;
  border-radius: 0 0 17px 17px;
  background: white;
  box-shadow: var(--am-shadow);
}

.api-table-header,
.api-table-row {
  display: grid;
  grid-template-columns:
    1.45fr
    1.35fr
    1.05fr
    1.05fr
    .8fr
    .8fr
    .9fr
    1fr
    1.15fr;
  column-gap: 10px;
  align-items: center;
}

.api-table-header {
  min-height: 54px;
  padding: 0 15px;
  border-bottom: 1px solid #e7ede9;
  color: #65786e;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.api-table-row {
  min-height: 92px;
  padding: 12px 15px;
  border-bottom: 1px solid #edf1ee;
}

.api-table-row:last-child {
  border-bottom: 0;
}

.api-provider-cell {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
}

.api-provider-logo {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid #e2e9e4;
  border-radius: 12px;
  font-weight: 900;
  font-size: 17px;
}

.api-logo-openai {
  color: #111;
  background: #eef3ef;
}

.api-logo-anthropic {
  color: #28221e;
  background: #ead6c4;
}

.api-logo-google {
  color: #3474ed;
  background: #fff;
}

.api-logo-azure {
  color: #2873f0;
  background: #edf3ff;
}

.api-provider-name {
  overflow: hidden;
  color: #1a3229;
  font-size: 13px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.api-provider-sub {
  margin-top: 3px;
  overflow: hidden;
  color: #78877f;
  font-size: 10px;
  line-height: 1.35;
  text-overflow: ellipsis;
}

.api-main-value {
  color: #243c31;
  font-size: 11px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.api-sub-value {
  margin-top: 3px;
  color: #839087;
  font-size: 9px;
}

.api-key-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
}

.api-status-pill {
  display: inline-flex;
  min-height: 25px;
  align-items: center;
  gap: 5px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 900;
  white-space: nowrap;
}

.api-status-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.api-status-active,
.api-health-healthy {
  background: var(--am-green-soft);
  color: var(--am-green);
}

.api-status-warning,
.api-health-warning {
  background: var(--am-warning-soft);
  color: var(--am-warning);
}

.api-status-error,
.api-health-error {
  background: var(--am-danger-soft);
  color: var(--am-danger);
}

.api-status-disabled,
.api-health-disabled {
  background: var(--am-disabled-soft);
  color: var(--am-disabled);
}

.api-health-untested {
  background: #fff4d9;
  color: #a16d08;
}

.api-action-buttons {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
}

.api-action-button {
  width: 31px;
  height: 31px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--am-line);
  border-radius: 8px;
  background: white;
  color: #52655c;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.api-action-button:hover {
  border-color: #b9cec0;
  background: #f8fbf9;
}

.api-action-button.test:hover {
  border-color: #a9dbbb;
  background: #edf9f1;
  color: #137644;
}

.api-provider-placeholder {
  opacity: .78;
}

.api-status-legend {
  padding: 14px 10px 4px;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  color: #607168;
  font-size: 11px;
}

.api-status-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.api-status-legend i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.api-legend-healthy { background: var(--am-green); }
.api-legend-warning { background: var(--am-warning); }
.api-legend-error { background: var(--am-danger); }
.api-legend-disabled { background: var(--am-disabled); }

.api-bottom-card {
  margin-top: 18px;
  padding: 18px;
  border: 1px solid var(--am-line);
  border-radius: 18px;
  background: white;
  box-shadow: var(--am-shadow);
}

.api-bottom-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.api-bottom-title {
  margin: 0;
  color: #173027;
  font-size: 15px;
  font-weight: 900;
}

.api-view-all {
  border: 0;
  background: transparent;
  color: #1870e8;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.api-history-table {
  width: 100%;
  border-collapse: collapse;
}

.api-history-table th,
.api-history-table td {
  padding: 11px 7px;
  border-bottom: 1px solid #edf1ee;
  text-align: left;
  color: #394e44;
  font-size: 10px;
}

.api-history-table th {
  color: #718078;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

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

.api-history-provider {
  display: flex;
  align-items: center;
  gap: 8px;
}

.api-history-logo {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  border: 1px solid #e4eae6;
  font-weight: 900;
}

.api-empty-history {
  padding: 28px 10px;
  color: #829087;
  font-size: 12px;
  text-align: center;
}

.api-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: none;
  place-items: center;
  padding: 18px;
  background: rgba(4, 27, 18, .46);
  backdrop-filter: blur(6px);
}

.api-modal-overlay.visible {
  display: grid;
}

.api-modal {
  width: min(480px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  padding: 22px;
  border-radius: 18px;
  background: white;
  box-shadow: 0 30px 80px rgba(0,0,0,.22);
}

.api-modal-title {
  margin: 0 0 5px;
  color: #163128;
  font-size: 19px;
}

.api-modal-subtitle {
  margin: 0 0 18px;
  color: #74847b;
  font-size: 12px;
  line-height: 1.5;
}

.api-field {
  display: grid;
  gap: 6px;
  margin-bottom: 13px;
}

.api-field span {
  color: #51665b;
  font-size: 11px;
  font-weight: 800;
}

.api-field input,
.api-field select {
  width: 100%;
  min-height: 42px;
  padding: 0 11px;
  border: 1px solid var(--am-line);
  border-radius: 10px;
  background: white;
  color: #21382e;
  outline: none;
  font: inherit;
}

.api-modal-note {
  margin-bottom: 14px;
  padding: 10px;
  border-radius: 10px;
  background: #f4f8f5;
  color: #718078;
  font-size: 10px;
  line-height: 1.5;
}

.api-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.api-modal-button {
  min-height: 39px;
  padding: 0 14px;
  border: 1px solid var(--am-line);
  border-radius: 10px;
  background: white;
  color: #2b4338;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.api-modal-button.primary {
  border-color: var(--am-dark);
  background: var(--am-dark);
  color: white;
}

.api-footer {
  padding: 20px 0 5px;
  color: #919d96;
  text-align: center;
  font-size: 9px;
}

@media (max-width: 1180px) {
  .api-table-header,
  .api-table-row {
    grid-template-columns:
      1.4fr
      1.25fr
      1fr
      1fr
      .75fr
      .75fr
      .85fr
      .9fr
      1.05fr;
  }
}

@media (max-width: 940px) {
  .api-summary-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .api-table-header {
    display: none;
  }

  .api-main-table {
    border-top: 1px solid var(--am-line);
    border-radius: 17px;
  }

  .api-table-row {
    margin: 12px;
    min-height: auto;
    padding: 14px;
    grid-template-columns: 1fr 1fr;
    gap: 13px;
    border: 1px solid var(--am-line);
    border-radius: 14px;
  }

  .api-table-row:last-child {
    border-bottom: 1px solid var(--am-line);
  }

  .api-provider-cell,
  .api-action-cell {
    grid-column: 1 / -1;
  }

  .api-table-cell::before {
    display: block;
    margin-bottom: 4px;
    color: #829087;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .api-key-cell::before { content: "API key"; }
  .api-app-cell::before { content: "Assigned app"; }
  .api-purpose-cell::before { content: "Purpose"; }
  .api-status-cell::before { content: "Status"; }
  .api-tested-cell::before { content: "Last tested"; }
  .api-health-cell::before { content: "Health"; }

  .api-action-buttons {
    justify-content: flex-start;
  }
}

@media (max-width: 650px) {
  .api-summary-grid {
    grid-template-columns: 1fr 1fr;
    gap: 9px;
  }

  .api-summary-card {
    min-height: 100px;
    padding: 13px;
    gap: 10px;
  }

  .api-summary-icon {
    width: 38px;
    height: 38px;
    font-size: 15px;
  }

  .api-summary-value {
    font-size: 20px;
  }

  .api-summary-label {
    font-size: 10px;
  }

  .api-summary-detail {
    font-size: 9px;
  }

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

  .api-toolbar-search {
    width: 100%;
    max-width: none;
  }

  .api-filter-list {
    width: 100%;
  }

  .api-filter-button {
    flex: 1 1 calc(33.33% - 6px);
  }

  .api-table-row {
    grid-template-columns: 1fr;
  }

  .api-provider-cell,
  .api-action-cell {
    grid-column: 1;
  }

  .api-action-buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }

  .api-action-button {
    width: 100%;
  }

  .api-test-banner {
    align-items: flex-start;
  }

  .api-history-table {
    min-width: 560px;
  }

  .api-bottom-card {
    overflow-x: auto;
  }
}

@media (max-width: 390px) {
  .api-summary-grid {
    grid-template-columns: 1fr;
  }

  .api-filter-button {
    flex-basis: calc(50% - 5px);
  }
}

/* ==========================================================
   NICE_API_MANAGER_MOCKUP_DELTA_V310
   Only differences from the approved mockup are overridden.
   ========================================================== */

.api-summary-grid {
  gap: 16px;
  margin-bottom: 24px;
}

.api-summary-card {
  min-height: 116px;
  border-radius: 16px;
  padding: 18px;
  box-shadow:
    0 10px 30px rgba(24, 63, 48, .045);
}

.api-summary-icon {
  width: 45px;
  height: 45px;
}

.api-toolbar-card {
  padding: 14px 13px;
  border-radius: 16px 16px 0 0;
}

.api-toolbar-search {
  max-width: 330px;
}

.api-filter-button {
  min-width: 67px;
}

.api-more-filter-button {
  min-width: 82px;
  color: #53685d;
}

.api-main-table {
  border-radius: 0 0 16px 16px;
}

.api-table-header {
  min-height: 55px;
  padding-left: 14px;
  padding-right: 14px;
}

.api-table-row {
  min-height: 88px;
  padding: 11px 14px;
}

.api-provider-logo {
  width: 40px;
  height: 40px;
}

.api-provider-name {
  font-size: 12px;
}

.api-provider-sub {
  font-size: 9px;
}

.api-main-value {
  font-size: 10px;
}

.api-status-pill {
  padding-left: 8px;
  padding-right: 8px;
}

.api-action-button {
  width: 29px;
  height: 29px;
  border-radius: 7px;
}

.api-status-legend {
  padding-top: 13px;
  padding-left: 10px;
  font-size: 10px;
}

.api-bottom-card {
  margin-top: 20px;
  padding: 17px 18px;
  border-radius: 17px;
}

.api-bottom-title {
  font-size: 14px;
}

.api-history-table th,
.api-history-table td {
  padding: 11px 6px;
}

.api-history-placeholder-table {
  opacity: .82;
}

.api-placeholder-history-row td {
  color: #91a099;
}

.api-history-empty-value {
  color: #9ba8a1;
}

.api-history-logo.api-logo-openai,
.api-history-logo.api-logo-anthropic,
.api-history-logo.api-logo-google,
.api-history-logo.api-logo-azure {
  display: grid;
  place-items: center;
}

.api-footer {
  padding-top: 22px;
}

/* Make the title/subtitle spacing closer to approved mockup */
#apiManagerSection .api-mockup-intro {
  margin-top: 5px;
  margin-bottom: 24px;
  font-size: 15px;
}

/* Mobile: preserve mockup feel while becoming readable */
@media (max-width: 650px) {
  .api-summary-grid {
    grid-template-columns: 1fr 1fr;
    gap: 9px;
  }

  .api-summary-card {
    min-height: 96px;
    border-radius: 14px;
  }

  .api-toolbar-card {
    border-radius: 14px;
  }

  .api-main-table {
    border-radius: 14px;
  }

  .api-table-row {
    margin: 10px;
    border-radius: 13px;
  }

  .api-provider-logo {
    width: 40px;
    height: 40px;
  }

  .api-action-buttons {
    gap: 7px;
  }

  .api-action-button {
    height: 36px;
    border-radius: 9px;
  }

  .api-bottom-card {
    border-radius: 14px;
  }
}

@media (max-width: 390px) {
  .api-summary-grid {
    grid-template-columns: 1fr;
  }
}


/* ================================================================
   NICE_API_MANAGER_FINAL_POLISH_V320
   Cosmetic/mobile improvements only.
   Existing API Manager structure and functionality remain unchanged.
   ================================================================ */


/* ---------- Desktop refinement ---------- */

#apiManagerSection {
  max-width: 100%;
}

.api-manager-v3 {
  width: 100%;
}

.api-mockup-intro {
  color: #687c71;
  line-height: 1.55;
}

.api-summary-card,
.api-toolbar-card,
.api-main-table,
.api-bottom-card {
  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}

.api-summary-card:hover {
  border-color: #cddfd2;
  box-shadow:
    0 14px 34px rgba(22, 63, 45, .065);
}

.api-provider-logo {
  position: relative;
  overflow: hidden;
}

.api-logo-openai {
  background:
    radial-gradient(
      circle at center,
      #ffffff 0%,
      #f0f5f1 68%,
      #e8efea 100%
    );
  color: #153c2e;
}

.api-logo-anthropic {
  background:
    linear-gradient(
      145deg,
      #f2e2d3,
      #e6cdb6
    );
}

.api-logo-google {
  background:
    linear-gradient(
      145deg,
      #ffffff,
      #f5f8ff
    );
  color: #3577ee;
}

.api-logo-azure {
  background:
    linear-gradient(
      145deg,
      #edf4ff,
      #dfeaff
    );
  color: #3678ef;
}

.api-table-row:hover {
  background: #fbfdfb;
}

.api-provider-name {
  letter-spacing: -.01em;
}

.api-key-value {
  color: #334b40;
}

.api-action-button {
  transition:
    transform .15s ease,
    background-color .15s ease,
    border-color .15s ease,
    color .15s ease;
}

.api-action-button:not(:disabled):hover {
  transform: translateY(-1px);
}

.api-action-button:disabled {
  cursor: not-allowed;
  opacity: .42;
}

.api-action-button.test:not(:disabled):hover {
  color: #126c42;
  background: #ebf8f0;
  border-color: #add8bc;
}

.api-status-pill {
  letter-spacing: .01em;
}


/* ---------- Test banner ---------- */

.api-test-banner {
  box-shadow:
    0 10px 26px rgba(22, 88, 56, .06);
}

.api-test-banner.visible {
  animation: niceApiBannerIn .18s ease-out;
}

@keyframes niceApiBannerIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ---------- Recent test history ---------- */

.api-history-placeholder-table {
  opacity: 1;
}

.api-placeholder-history-row {
  opacity: .58;
}

.api-placeholder-history-row:hover {
  opacity: .76;
}

.api-view-all {
  padding: 5px 7px;
  border-radius: 7px;
}

.api-view-all:hover {
  background: #f0f6ff;
}


/* ---------- Better focus accessibility ---------- */

.api-toolbar-search:focus-visible,
.api-filter-button:focus-visible,
.api-action-button:focus-visible,
.api-modal-button:focus-visible {
  outline: 3px solid rgba(30, 128, 82, .15);
  outline-offset: 2px;
}


/* ================================================================
   TABLET
   ================================================================ */

@media (max-width: 1024px) {

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

  .api-summary-card {
    min-height: 105px;
  }

  .api-filter-list {
    flex: 1 1 100%;
  }

  .api-filter-button {
    flex: 1 1 auto;
  }
}


/* ================================================================
   MOBILE LAYOUT
   Convert desktop table rows into readable cards.
   ================================================================ */

@media (max-width: 760px) {

  #apiManagerSection {
    width: 100%;
    overflow: visible;
  }

  .api-manager-v3 {
    width: 100%;
    max-width: 100%;
  }

  .api-mockup-intro {
    margin-bottom: 17px;
    font-size: 13px;
  }


  /* Stats */

  .api-summary-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 15px;
  }

  .api-summary-card {
    min-height: 91px;
    padding: 12px;
    gap: 9px;
    border-radius: 13px;
  }

  .api-summary-icon {
    width: 36px;
    height: 36px;
    font-size: 14px;
  }

  .api-summary-label {
    font-size: 9px;
  }

  .api-summary-value {
    font-size: 19px;
  }

  .api-summary-detail {
    font-size: 8px;
  }


  /* Result banner */

  .api-test-banner {
    align-items: flex-start;
    padding: 12px;
    border-radius: 12px;
  }

  .api-test-banner-main {
    align-items: flex-start;
    font-size: 11px;
    line-height: 1.55;
  }

  .api-test-banner-icon {
    width: 27px;
    height: 27px;
    flex: 0 0 auto;
  }


  /* Toolbar */

  .api-toolbar-card {
    padding: 10px;
    flex-direction: column;
    align-items: stretch;
    border-radius: 13px;
    border-bottom-left-radius: 13px;
    border-bottom-right-radius: 13px;
    margin-bottom: 10px;
  }

  .api-toolbar-search {
    width: 100%;
    max-width: none;
    min-width: 0;
  }

  .api-filter-list {
    display: grid;
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 7px;
  }

  .api-filter-button {
    width: 100%;
    min-width: 0;
    padding: 0 8px;
  }


  /* Main list */

  .api-main-table {
    border: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
  }

  .api-table-header {
    display: none;
  }

  .api-table-row {
    display: grid;
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 13px 10px;

    min-height: 0;
    margin: 0 0 10px;
    padding: 14px;

    border: 1px solid #dce7df !important;
    border-radius: 14px;

    background: #fff;

    box-shadow:
      0 8px 22px rgba(21, 62, 44, .045);
  }

  .api-provider-cell {
    grid-column: 1 / -1;
    padding-bottom: 3px;
  }

  .api-provider-logo {
    width: 43px;
    height: 43px;
  }

  .api-provider-name {
    font-size: 13px;
  }

  .api-provider-sub {
    font-size: 10px;
  }


  /* Mobile labels */

  .api-table-cell::before {
    display: block;
    margin-bottom: 4px;

    color: #819087;

    font-size: 8px;
    font-weight: 900;

    letter-spacing: .09em;
    text-transform: uppercase;
  }

  .api-key-cell::before {
    content: "API key";
  }

  .api-app-cell::before {
    content: "Assigned app";
  }

  .api-purpose-cell::before {
    content: "Purpose";
  }

  .api-status-cell::before {
    content: "Status";
  }

  .api-tested-cell::before {
    content: "Last tested";
  }

  .api-health-cell::before {
    content: "Health";
  }

  .api-main-value {
    font-size: 11px;
  }


  /* Action buttons */

  .api-action-cell {
    grid-column: 1 / -1;
  }

  .api-action-cell::before {
    content: "Actions";

    display: block;

    margin-bottom: 7px;

    color: #819087;

    font-size: 8px;
    font-weight: 900;

    letter-spacing: .09em;
    text-transform: uppercase;
  }

  .api-action-buttons {
    display: grid;
    grid-template-columns:
      repeat(4, minmax(0, 1fr));

    gap: 7px;
  }

  .api-action-button {
    width: 100%;
    height: 37px;
    border-radius: 9px;
  }


  /* Status legend */

  .api-status-legend {
    padding:
      5px 2px 4px;

    gap: 11px;

    font-size: 9px;
  }


  /* History card */

  .api-bottom-card {
    margin-top: 14px;
    padding: 13px;
    border-radius: 14px;
  }

  .api-bottom-title {
    font-size: 13px;
  }

  .api-view-all {
    font-size: 10px;
  }

  .api-history-table {
    min-width: 520px;
  }

  .api-bottom-card {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .api-footer {
    padding-top: 17px;
  }
}


/* ================================================================
   SMALL PHONE
   ================================================================ */

@media (max-width: 420px) {

  .api-summary-grid {
    grid-template-columns:
      1fr 1fr;
  }

  .api-summary-card {
    padding: 10px;
  }

  .api-summary-icon {
    width: 31px;
    height: 31px;
  }

  .api-summary-value {
    font-size: 17px;
  }

  .api-table-row {
    grid-template-columns: 1fr;
  }

  .api-provider-cell,
  .api-action-cell {
    grid-column: 1;
  }

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


/* Very narrow phones */

@media (max-width: 340px) {

  .api-summary-grid {
    grid-template-columns: 1fr;
  }

  .api-filter-list {
    grid-template-columns: 1fr;
  }
}


/* ================================================================
   NICE_API_MANAGER_MICRO_POLISH_V330
   Final visual matching layer only.
   ================================================================ */


/* ------------------------------------------------
   Overall proportions
   ------------------------------------------------ */

#apiManagerSection {
  --api-final-radius: 16px;
}

.api-manager-v3 {
  max-width: 100%;
}

.api-mockup-intro {
  font-size: 14px !important;
  margin-bottom: 21px !important;
}

.api-summary-grid {
  gap: 14px !important;
  margin-bottom: 20px !important;
}

.api-summary-card {
  min-height: 108px !important;
  padding: 17px !important;
}

.api-summary-value {
  font-size: 24px !important;
}

.api-summary-detail {
  line-height: 1.3;
}


/* ------------------------------------------------
   Toolbar — closer to approved mockup
   ------------------------------------------------ */

.api-toolbar-card {
  min-height: 66px;
  padding: 11px 12px !important;
}

.api-toolbar-search {
  height: 42px !important;
  min-height: 42px !important;
}

.api-filter-list {
  gap: 7px !important;
}

.api-filter-button {
  height: 39px !important;
  min-width: 66px !important;
  padding-left: 13px !important;
  padding-right: 13px !important;
  font-size: 11px !important;
}


/* ------------------------------------------------
   Main table column balance
   Prevent unwanted wrapping
   ------------------------------------------------ */

@media (min-width: 941px) {

  .api-table-header,
  .api-table-row {
    grid-template-columns:
      1.34fr
      1.34fr
      1.12fr
      1.02fr
      .78fr
      .88fr
      .88fr
      .94fr
      1.16fr !important;

    column-gap: 12px !important;
  }

  .api-table-header {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .api-table-row {
    min-height: 82px !important;
    padding:
      11px 16px !important;
  }

  .api-provider-name,
  .api-provider-sub,
  .api-main-value,
  .api-key-value {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .api-provider-name,
  .api-main-value {
    white-space: nowrap;
  }

  .api-key-value {
    white-space: nowrap;
  }
}


/* ------------------------------------------------
   Typography refinement
   ------------------------------------------------ */

.api-table-header {
  font-size: 8.5px !important;
  letter-spacing: .085em !important;
}

.api-provider-name {
  font-size: 11.5px !important;
  font-weight: 850 !important;
}

.api-provider-sub {
  font-size: 9px !important;
}

.api-main-value {
  font-size: 9.5px !important;
  font-weight: 750 !important;
}

.api-key-value {
  font-size: 9px !important;
}

.api-status-pill {
  min-height: 23px !important;
  padding:
    0 8px !important;
  font-size: 8.5px !important;
}


/* ------------------------------------------------
   Provider icons
   ------------------------------------------------ */

.api-provider-logo {
  width: 38px !important;
  height: 38px !important;
  border-radius: 11px !important;

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.45);
}

.api-logo-openai {
  font-size: 15px !important;
}

.api-logo-anthropic {
  font-size: 15px !important;
}

.api-logo-google,
.api-logo-azure {
  font-size: 14px !important;
}


/* ------------------------------------------------
   Unconfigured providers
   Keep them visible, not washed out
   ------------------------------------------------ */

.api-provider-placeholder {
  opacity: 1 !important;
}

.api-provider-placeholder .api-provider-name {
  color: #4d6258 !important;
}

.api-provider-placeholder .api-provider-sub,
.api-provider-placeholder .api-main-value {
  color: #8b9992 !important;
}

.api-provider-placeholder .api-provider-logo {
  opacity: .84;
}


/* ------------------------------------------------
   Action controls
   ------------------------------------------------ */

.api-action-buttons {
  gap: 6px !important;
}

.api-action-button {
  width: 30px !important;
  height: 30px !important;

  border-radius: 8px !important;

  background:
    linear-gradient(
      180deg,
      #ffffff,
      #fbfdfb
    ) !important;

  color: #51665c !important;
}

.api-action-button:not(:disabled):hover {
  border-color: #b7ccbf !important;

  box-shadow:
    0 4px 12px rgba(19, 70, 48, .07);
}

.api-action-button.test:not(:disabled):hover {
  color: #16814d !important;
}


/* ------------------------------------------------
   Legend
   ------------------------------------------------ */

.api-status-legend {
  padding:
    12px 7px 3px !important;

  gap: 18px !important;

  font-size: 9.5px !important;
}


/* ------------------------------------------------
   Recent API test history
   ------------------------------------------------ */

.api-bottom-card {
  padding:
    17px !important;

  margin-top:
    18px !important;
}

.api-bottom-title-row {
  margin-bottom:
    11px !important;
}

.api-bottom-title {
  font-size:
    14px !important;
}

.api-history-table th {
  height: 35px;
}

.api-history-table td {
  height: 42px;
}

.api-placeholder-history-row {
  opacity: .67 !important;
}

.api-placeholder-history-row:hover {
  opacity: .82 !important;
}


/* ------------------------------------------------
   Result banner
   ------------------------------------------------ */

.api-test-banner {
  min-height:
    54px !important;

  padding:
    10px 14px !important;
}

.api-test-banner-main {
  font-size:
    12px !important;
}

.api-test-banner-icon {
  width:
    29px !important;

  height:
    29px !important;
}


/* ================================================================
   TABLET
   ================================================================ */

@media (max-width: 940px) {

  .api-summary-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }

  .api-table-row {
    margin:
      10px !important;

    padding:
      13px !important;
  }

  .api-provider-name {
    font-size:
      12px !important;
  }

  .api-main-value {
    font-size:
      10px !important;
  }
}


/* ================================================================
   MOBILE
   ================================================================ */

@media (max-width: 650px) {

  .api-mockup-intro {
    margin-bottom:
      14px !important;

    font-size:
      12px !important;
  }


  /* Summary remains two columns for normal phones */

  .api-summary-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    gap:
      8px !important;
  }

  .api-summary-card {
    min-height:
      88px !important;

    padding:
      10px !important;
  }

  .api-summary-icon {
    width:
      34px !important;

    height:
      34px !important;
  }

  .api-summary-label {
    font-size:
      8.5px !important;
  }

  .api-summary-value {
    font-size:
      18px !important;
  }

  .api-summary-detail {
    font-size:
      8px !important;
  }


  /* Toolbar */

  .api-toolbar-card {
    min-height: 0;
    padding:
      9px !important;
  }

  .api-filter-list {
    grid-template-columns:
      repeat(2, 1fr) !important;
  }

  .api-filter-button {
    height:
      38px !important;
  }


  /* Provider cards */

  .api-table-row {
    margin:
      0 0 9px !important;

    padding:
      13px !important;

    border-radius:
      13px !important;
  }

  .api-provider-logo {
    width:
      40px !important;

    height:
      40px !important;
  }

  .api-provider-name {
    font-size:
      12px !important;
  }

  .api-provider-sub {
    font-size:
      9px !important;
  }

  .api-main-value {
    font-size:
      10.5px !important;
  }


  /* Make buttons easy to tap */

  .api-action-button {
    min-height:
      38px !important;

    height:
      38px !important;
  }


  /* History remains scrollable only where necessary */

  .api-bottom-card {
    padding:
      12px !important;
  }

  .api-history-table {
    min-width:
      500px !important;
  }
}


/* ================================================================
   VERY SMALL PHONE
   ================================================================ */

@media (max-width: 360px) {

  .api-summary-grid {
    grid-template-columns:
      1fr !important;
  }

  .api-filter-list {
    grid-template-columns:
      1fr !important;
  }

  .api-action-buttons {
    grid-template-columns:
      repeat(2, 1fr) !important;
  }
}


/* ================================================================
   NICE_API_MANAGER_LOGO_FINAL_V340
   Final provider logos, placeholder treatment and responsive polish.
   ================================================================ */


/* ---------- Brand/logo containers ---------- */

.api-provider-logo,
.api-history-logo {
  overflow: hidden;
  padding: 0 !important;
  background: #fff;
}

.api-brand-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.api-openai-svg {
  padding: 7px;
  color: #111c17;
  background: #eef3ef;
}

.api-anthropic-svg {
  background: #ead7c4;
}

.api-google-svg {
  padding: 6px;
  background: #fff;
}

.api-azure-svg {
  padding: 8px;
  background: #f4f7ff;
}


/* Remove old text-logo sizing rules */

.api-logo-openai,
.api-logo-anthropic,
.api-logo-google,
.api-logo-azure {
  font-size: 0 !important;
}


/* ---------- Empty/unconfigured values ---------- */

.api-provider-placeholder {
  opacity: 1 !important;
}

.api-provider-placeholder .api-main-value {
  color: #84938b !important;
}

.api-provider-placeholder .api-main-value:empty::after {
  content: "—";
  color: #9aa7a0;
}

.api-provider-placeholder .api-key-cell .api-main-value,
.api-provider-placeholder .api-app-cell .api-main-value,
.api-provider-placeholder .api-purpose-cell .api-main-value,
.api-provider-placeholder .api-tested-cell .api-main-value {
  min-height: 20px;
}

.api-provider-placeholder .api-key-cell .api-main-value,
.api-provider-placeholder .api-app-cell .api-main-value,
.api-provider-placeholder .api-purpose-cell .api-main-value {
  display: inline-flex;
  align-items: center;
  min-width: 30px;
  padding: 3px 7px;
  border-radius: 7px;
  background: #f1f6ff;
  color: #6d83a8 !important;
}

.api-provider-placeholder .api-tested-cell .api-main-value {
  color: #92a099 !important;
}


/* ---------- Better real credential presentation ---------- */

.api-key-cell .api-main-value {
  letter-spacing: -.02em;
}

.api-key-cell.api-table-cell {
  overflow: hidden;
}

.api-key-value {
  max-width: 100%;
}


/* ---------- Desktop compact actions ---------- */

.api-action-buttons {
  flex-wrap: nowrap;
}

.api-action-button {
  flex: 0 0 auto;
}


/* ---------- History logos ---------- */

.api-history-logo {
  width: 30px !important;
  height: 30px !important;
  border-radius: 8px !important;
}

.api-history-logo .api-brand-svg {
  width: 100%;
  height: 100%;
}


/* ---------- Subtle row separation ---------- */

.api-table-row {
  background: #fff;
}

.api-table-row:hover {
  background: #fbfdfc !important;
}


/* ================================================================
   RESPONSIVE TABLET
   ================================================================ */

@media (max-width: 940px) {

  .api-provider-logo {
    width: 44px !important;
    height: 44px !important;
  }

  .api-action-buttons {
    flex-wrap: wrap;
  }
}


/* ================================================================
   MOBILE
   ================================================================ */

@media (max-width: 650px) {

  #apiManagerSection {
    overflow-x: hidden;
  }

  .api-manager-v3 {
    width: 100%;
    overflow-x: hidden;
  }

  .api-summary-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }

  .api-main-table {
    background: transparent !important;
  }

  .api-table-row {
    width: 100%;
    max-width: 100%;
  }

  .api-provider-logo {
    width: 44px !important;
    height: 44px !important;
  }

  .api-provider-cell {
    align-items: flex-start;
  }

  .api-provider-name {
    font-size: 13px !important;
  }

  .api-provider-sub {
    line-height: 1.35;
  }

  .api-main-value {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: initial !important;
  }

  .api-key-value {
    overflow-wrap: anywhere !important;
  }

  .api-action-buttons {
    display: grid !important;
    grid-template-columns:
      repeat(4, minmax(0, 1fr)) !important;

    width: 100%;
  }

  .api-action-button {
    width: 100% !important;
    min-height: 40px !important;
  }

  .api-history-logo {
    width: 31px !important;
    height: 31px !important;
  }
}


/* ================================================================
   SMALL MOBILE
   ================================================================ */

@media (max-width: 420px) {

  .api-summary-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }

  .api-table-row {
    grid-template-columns: 1fr !important;
  }

  .api-provider-cell,
  .api-action-cell {
    grid-column: 1 !important;
  }

  .api-action-buttons {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }
}


/* ================================================================
   VERY SMALL MOBILE
   ================================================================ */

@media (max-width: 330px) {

  .api-summary-grid {
    grid-template-columns: 1fr !important;
  }

  .api-filter-list {
    grid-template-columns: 1fr !important;
  }
}


/* =================================================================
   NICE_API_MANAGER_FINAL_FINISH_V350
   Final visual fidelity pass.
   ================================================================= */


/* ---------------- Brand imagery ---------------- */

.api-provider-logo,
.api-history-logo {
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
  border-color: #e4ebe6 !important;
}

.api-provider-brand-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
}

.api-provider-logo {
  width: 41px !important;
  height: 41px !important;
  border-radius: 12px !important;
}

.api-history-logo {
  width: 29px !important;
  height: 29px !important;
  border-radius: 8px !important;
}


/* ---------------- Main provider row ---------------- */

.api-table-row {
  transition:
    background-color .15s ease,
    box-shadow .15s ease;
}

.api-provider-cell {
  gap: 10px !important;
}

.api-provider-name {
  color: #1a3228 !important;
}

.api-provider-sub {
  color: #7c8c83 !important;
}


/* Keep incomplete records intentionally visible */

.api-provider-placeholder {
  opacity: 1 !important;
}

.api-provider-placeholder .api-provider-name {
  color: #53675d !important;
}

.api-provider-placeholder .api-provider-sub {
  color: #92a098 !important;
}


/* ---------------- Empty value chips ---------------- */

.api-provider-placeholder
.api-key-cell
.api-main-value,

.api-provider-placeholder
.api-app-cell
.api-main-value,

.api-provider-placeholder
.api-purpose-cell
.api-main-value {
  min-width: 28px !important;
  min-height: 19px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 2px 8px !important;

  border: 0 !important;
  border-radius: 7px !important;

  background: #edf3ff !important;

  color: #7188b0 !important;

  font-size: 9px !important;
  font-weight: 800 !important;
}


/* ---------------- Mockup-matching table sizing ---------------- */

@media (min-width: 941px) {

  .api-table-header,
  .api-table-row {
    grid-template-columns:
      1.35fr
      1.35fr
      1.1fr
      1.04fr
      .79fr
      .86fr
      .9fr
      .92fr
      1.14fr !important;

    column-gap: 11px !important;
  }

  .api-table-row {
    min-height: 82px !important;
  }
}


/* ---------------- Actions ---------------- */

.api-action-buttons {
  justify-content: flex-start !important;
}

.api-action-button {
  width: 30px !important;
  height: 30px !important;

  border-radius: 8px !important;

  color: #556a60 !important;
}

.api-action-button:disabled {
  opacity: .32 !important;
}


/* ---------------- History section ---------------- */

.api-bottom-card {
  min-height: 285px;
}

.api-bottom-title-row {
  align-items: center !important;
}

.api-history-table {
  table-layout: fixed;
}

.api-history-table th:nth-child(1),
.api-history-table td:nth-child(1) {
  width: 36%;
}

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

.api-history-table th:nth-child(3),
.api-history-table td:nth-child(3) {
  width: 14%;
}

.api-history-table th:nth-child(4),
.api-history-table td:nth-child(4) {
  width: 17%;
}

.api-history-table th:nth-child(5),
.api-history-table td:nth-child(5) {
  width: 15%;
}

.api-history-provider {
  gap: 9px !important;
}

.api-placeholder-history-row {
  opacity: .67 !important;
}

.api-placeholder-history-row td {
  color: #98a49d !important;
}


/* When actual history exists */

.api-history-table
.api-status-pill {
  min-width: 66px;
  justify-content: center;
}


/* ---------------- Footer ---------------- */

.api-footer {
  margin-top: 4px;
  color: #8b9891 !important;
}


/* =================================================================
   RESPONSIVE TABLET
   ================================================================= */

@media (max-width: 940px) {

  .api-provider-logo {
    width: 44px !important;
    height: 44px !important;
  }

  .api-bottom-card {
    min-height: 0;
  }
}


/* =================================================================
   RESPONSIVE MOBILE
   ================================================================= */

@media (max-width: 650px) {

  #apiManagerSection,
  .api-manager-v3 {
    max-width: 100%;
    overflow-x: hidden;
  }

  .api-summary-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }

  .api-table-row {
    display: grid !important;

    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    gap:
      12px 10px !important;

    width: 100% !important;

    margin:
      0 0 10px !important;

    padding:
      13px !important;
  }

  .api-provider-cell {
    grid-column:
      1 / -1 !important;
  }

  .api-provider-logo {
    width: 45px !important;
    height: 45px !important;
  }

  .api-table-cell {
    min-width: 0;
  }

  .api-main-value,
  .api-key-value {
    max-width: 100%;

    white-space: normal !important;

    overflow-wrap: anywhere !important;
  }

  .api-action-cell {
    grid-column:
      1 / -1 !important;
  }

  .api-action-buttons {
    display: grid !important;

    grid-template-columns:
      repeat(4, minmax(0, 1fr)) !important;

    width: 100% !important;

    gap: 7px !important;
  }

  .api-action-button {
    width: 100% !important;
    min-height: 40px !important;
  }

  .api-bottom-card {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .api-history-table {
    min-width: 520px;
  }
}


/* =================================================================
   SMALL MOBILE
   ================================================================= */

@media (max-width: 420px) {

  .api-table-row {
    grid-template-columns:
      1fr !important;
  }

  .api-provider-cell,
  .api-action-cell {
    grid-column:
      1 !important;
  }

  .api-action-buttons {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }
}


/* =================================================================
   NARROW MOBILE
   ================================================================= */

@media (max-width: 340px) {

  .api-summary-grid {
    grid-template-columns:
      1fr !important;
  }

  .api-filter-list {
    grid-template-columns:
      1fr !important;
  }
}


/* =================================================================
   NICE_API_HISTORY_FINAL_V360
   Match approved API history section.
   ================================================================= */

.api-history-card-final {
  min-height: 0 !important;
  padding: 18px 20px 16px !important;
  border-radius: 17px !important;
}

.api-history-card-final .api-bottom-title-row {
  margin-bottom: 8px !important;
}

.api-history-card-final .api-bottom-title {
  font-size: 15px !important;
  line-height: 1.2;
}

.api-history-card-final .api-view-all {
  color: #0874f9 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  padding: 5px 7px !important;
}

.api-history-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.api-history-table {
  width: 100% !important;
  min-width: 620px;
  table-layout: fixed !important;
  border-collapse: collapse !important;
}

.api-history-table th {
  height: 42px !important;
  padding: 0 6px !important;

  color: #63766c !important;

  font-size: 8px !important;
  font-weight: 900 !important;

  letter-spacing: .12em !important;
  text-transform: uppercase !important;

  border-bottom:
    1px solid #e4ebe6 !important;
}

.api-history-table td {
  height: 48px !important;
  padding: 7px 6px !important;

  color: #41564b !important;

  font-size: 10px !important;

  border-bottom:
    1px solid #e8eeea !important;

  vertical-align: middle !important;
}

.api-history-table tbody tr:last-child td {
  border-bottom: 0 !important;
}


/* Provider column */

.api-history-provider {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.api-history-logo {
  width: 29px !important;
  height: 29px !important;

  flex: 0 0 auto !important;

  display: grid !important;
  place-items: center !important;

  overflow: hidden !important;

  padding: 0 !important;

  border:
    1px solid #e0e8e3 !important;

  border-radius:
    8px !important;

  background:
    #fff !important;
}

.api-history-logo .api-provider-brand-image {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: contain !important;
}

.api-history-provider-name {
  color: #425a4f;
  font-weight: 500;
  white-space: nowrap;
}


/* Real test result */

.api-history-result {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  font-size: 10px;
  font-weight: 600;
}

.api-history-result.success {
  color: #18a55e;
}

.api-history-result.error {
  color: #d54b4b;
}

.api-history-result-icon {
  width: 14px;
  height: 14px;

  display: inline-grid;
  place-items: center;

  border:
    1.5px solid currentColor;

  border-radius: 50%;

  font-size: 8px;
  font-weight: 900;
  line-height: 1;
}


/* Placeholder rows */

.api-history-placeholder-row {
  opacity: 1 !important;
}

.api-history-placeholder-row td {
  color: #9ba8a1 !important;
}

.api-history-placeholder-row
.api-history-provider-name {
  color: #91a098 !important;
}

.api-history-placeholder-row
.api-history-logo {
  opacity: .82;
}

.api-history-dash {
  color: #96a49c;
}


/* Exact proportions closer to approved mockup */

.api-history-table th:nth-child(1),
.api-history-table td:nth-child(1) {
  width: 34% !important;
}

.api-history-table th:nth-child(2),
.api-history-table td:nth-child(2) {
  width: 18% !important;
}

.api-history-table th:nth-child(3),
.api-history-table td:nth-child(3) {
  width: 14% !important;
}

.api-history-table th:nth-child(4),
.api-history-table td:nth-child(4) {
  width: 18% !important;
}

.api-history-table th:nth-child(5),
.api-history-table td:nth-child(5) {
  width: 16% !important;
}


/* Slightly stronger actual data */

.api-history-table tbody tr:not(.api-history-placeholder-row) td {
  color: #314a3e !important;
}


/* Mobile */

@media (max-width: 650px) {

  .api-history-card-final {
    padding:
      13px 12px !important;
  }

  .api-history-card-final
  .api-bottom-title {
    font-size:
      13px !important;
  }

  .api-history-table {
    min-width:
      540px !important;
  }

  .api-history-table td {
    height:
      45px !important;
  }

  .api-history-logo {
    width:
      28px !important;

    height:
      28px !important;
  }
}


/* =================================================================
   NICE_API_MANAGER_HEADER_FINAL_V370
   Final upper-section visual alignment only.
   API table/history/backend remain untouched.
   ================================================================= */


/* -------------------------------------------------
   Page title / subtitle spacing
   ------------------------------------------------- */

#apiManagerSection {
  margin-top: 0 !important;
}

#apiManagerSection .api-mockup-intro {
  margin-top: 3px !important;
  margin-bottom: 22px !important;

  color: #64796e !important;

  font-size: 14px !important;
  line-height: 1.45 !important;
}


/* -------------------------------------------------
   Summary cards
   Match approved mockup proportions
   ------------------------------------------------- */

.api-summary-grid {
  grid-template-columns:
    repeat(4, minmax(0, 1fr)) !important;

  gap: 12px !important;

  margin-top: 0 !important;
  margin-bottom: 20px !important;
}

.api-summary-card {
  min-height: 112px !important;

  padding:
    17px 16px !important;

  gap:
    13px !important;

  border:
    1px solid #dfe8e2 !important;

  border-radius:
    15px !important;

  background:
    rgba(255,255,255,.94) !important;

  box-shadow:
    0 10px 28px rgba(22, 61, 44, .04) !important;
}

.api-summary-icon {
  width:
    46px !important;

  height:
    46px !important;

  flex:
    0 0 46px !important;

  border-radius:
    50% !important;

  font-size:
    0 !important;

  position:
    relative;
}


/* -------------------------------------------------
   Approved summary icons
   ------------------------------------------------- */

/* Active APIs — health/pulse icon */

.api-summary-card:nth-child(1)
.api-summary-icon::before {
  content: "";

  width:
    22px;

  height:
    22px;

  border:
    2px solid #15945a;

  border-radius:
    50%;

  position:
    absolute;

  inset:
    0;

  margin:
    auto;
}

.api-summary-card:nth-child(1)
.api-summary-icon::after {
  content: "⌁";

  position:
    absolute;

  inset:
    0;

  display:
    grid;

  place-items:
    center;

  color:
    #15945a;

  font-size:
    19px;

  font-weight:
    900;

  transform:
    rotate(-8deg);
}


/* Healthy — heart */

.api-summary-card:nth-child(2)
.api-summary-icon::before {
  content: "♥";

  position:
    absolute;

  inset:
    0;

  display:
    grid;

  place-items:
    center;

  color:
    #18a45f;

  font-size:
    20px;

  line-height:
    1;
}


/* Assigned apps — cube */

.api-summary-card:nth-child(3)
.api-summary-icon::before {
  content: "◇";

  position:
    absolute;

  inset:
    0;

  display:
    grid;

  place-items:
    center;

  color:
    #3477ff;

  font-size:
    22px;

  font-weight:
    900;
}

.api-summary-card:nth-child(3)
.api-summary-icon::after {
  content: "";

  position:
    absolute;

  width:
    9px;

  height:
    9px;

  border:
    1.6px solid #3477ff;

  left:
    50%;

  top:
    50%;

  transform:
    translate(-50%, -50%) rotate(30deg);
}


/* Last sync — clock */

.api-summary-card:nth-child(4)
.api-summary-icon::before {
  content: "";

  width:
    20px;

  height:
    20px;

  position:
    absolute;

  inset:
    0;

  margin:
    auto;

  border:
    2px solid #15945a;

  border-radius:
    50%;
}

.api-summary-card:nth-child(4)
.api-summary-icon::after {
  content: "";

  position:
    absolute;

  left:
    50%;

  top:
    50%;

  width:
    6px;

  height:
    7px;

  border-left:
    2px solid #15945a;

  border-bottom:
    2px solid #15945a;

  transform:
    translate(0,-6px);
}


/* -------------------------------------------------
   Summary typography
   ------------------------------------------------- */

.api-summary-label {
  margin-bottom:
    3px !important;

  color:
    #4c6257 !important;

  font-size:
    12px !important;

  font-weight:
    750 !important;

  line-height:
    1.2 !important;
}

.api-summary-value {
  margin-top:
    0 !important;

  margin-bottom:
    4px !important;

  color:
    #102f24 !important;

  font-size:
    25px !important;

  font-weight:
    900 !important;

  letter-spacing:
    -.025em !important;
}

.api-summary-card:nth-child(4)
.api-summary-value {
  font-size:
    21px !important;
}

.api-summary-detail {
  margin-top:
    0 !important;

  color:
    #7a8b82 !important;

  font-size:
    11px !important;

  line-height:
    1.3 !important;
}


/* -------------------------------------------------
   Align contents vertically like approved design
   ------------------------------------------------- */

.api-summary-card > div:last-child {
  align-self:
    center;
}


/* -------------------------------------------------
   Slightly tighter distance before filters/table
   ------------------------------------------------- */

.api-summary-grid + .api-test-banner,
.api-summary-grid + .api-toolbar-card {
  margin-top:
    0 !important;
}


/* -------------------------------------------------
   Test banner proportion
   ------------------------------------------------- */

.api-test-banner {
  min-height:
    55px !important;

  margin-top:
    0 !important;

  margin-bottom:
    17px !important;

  padding:
    10px 15px !important;

  border-radius:
    13px !important;
}


/* -------------------------------------------------
   Desktop top proportions
   ------------------------------------------------- */

@media (min-width: 941px) {

  #apiManagerSection {
    padding-top:
      0 !important;
  }

  .api-summary-grid {
    align-items:
      stretch;
  }
}


/* =================================================================
   TABLET
   ================================================================= */

@media (max-width: 940px) {

  .api-summary-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    gap:
      10px !important;
  }

  .api-summary-card {
    min-height:
      103px !important;
  }
}


/* =================================================================
   MOBILE
   ================================================================= */

@media (max-width: 650px) {

  #apiManagerSection
  .api-mockup-intro {
    margin-bottom:
      14px !important;

    font-size:
      12px !important;
  }

  .api-summary-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    gap:
      8px !important;

    margin-bottom:
      14px !important;
  }

  .api-summary-card {
    min-height:
      88px !important;

    padding:
      11px !important;

    gap:
      9px !important;

    border-radius:
      13px !important;
  }

  .api-summary-icon {
    width:
      36px !important;

    height:
      36px !important;

    flex-basis:
      36px !important;
  }

  .api-summary-card:nth-child(1)
  .api-summary-icon::before,

  .api-summary-card:nth-child(4)
  .api-summary-icon::before {
    transform:
      scale(.82);
  }

  .api-summary-card:nth-child(2)
  .api-summary-icon::before {
    font-size:
      16px;
  }

  .api-summary-card:nth-child(3)
  .api-summary-icon::before {
    font-size:
      17px;
  }

  .api-summary-label {
    font-size:
      9px !important;
  }

  .api-summary-value {
    font-size:
      18px !important;
  }

  .api-summary-card:nth-child(4)
  .api-summary-value {
    font-size:
      15px !important;
  }

  .api-summary-detail {
    font-size:
      8px !important;
  }
}


/* =================================================================
   VERY SMALL MOBILE
   ================================================================= */

@media (max-width: 340px) {

  .api-summary-grid {
    grid-template-columns:
      1fr !important;
  }
}


/* =================================================================
   NICE_API_MANAGER_HEADER_CLEAN_V380
   Match approved upper reference.
   Remove external green glow/bleed.
   ================================================================= */


/* -------------------------------------------------
   API Manager upper page background
   ------------------------------------------------- */

#apiManagerSection {
  background: transparent !important;
}

#apiManagerSection::before,
#apiManagerSection::after,
.api-manager-v3::before,
.api-manager-v3::after {
  display: none !important;
  content: none !important;
}

.api-manager-v3 {
  background: transparent !important;
  box-shadow: none !important;
}


/* Remove green glow behind upper content */

#apiManagerSection .api-summary-grid,
#apiManagerSection .api-summary-card,
#apiManagerSection .api-test-banner {
  filter: none !important;
}

#apiManagerSection .api-summary-grid::before,
#apiManagerSection .api-summary-grid::after {
  display: none !important;
  content: none !important;
}


/* -------------------------------------------------
   Clean top spacing
   ------------------------------------------------- */

#apiManagerSection .api-mockup-intro {
  margin-top: 4px !important;
  margin-bottom: 21px !important;

  color: #66786f !important;

  font-size: 14px !important;
  line-height: 1.45 !important;
}


/* -------------------------------------------------
   Four cards in one clean row
   ------------------------------------------------- */

.api-summary-grid {
  display: grid !important;

  grid-template-columns:
    repeat(4, minmax(0, 1fr)) !important;

  gap: 10px !important;

  margin-top: 0 !important;
  margin-bottom: 20px !important;

  background: transparent !important;

  box-shadow: none !important;
}

.api-summary-card {
  min-height: 100px !important;

  padding: 15px 16px !important;

  gap: 12px !important;

  border:
    1px solid #dde5e0 !important;

  border-radius:
    14px !important;

  background:
    #ffffff !important;

  box-shadow:
    0 5px 18px rgba(20, 44, 34, .035) !important;

  backdrop-filter: none !important;
}

.api-summary-card:hover {
  transform: none !important;

  border-color:
    #d6e0da !important;

  box-shadow:
    0 5px 18px rgba(20, 44, 34, .04) !important;
}


/* -------------------------------------------------
   Icon circles
   ------------------------------------------------- */

.api-summary-icon {
  width: 43px !important;
  height: 43px !important;

  flex:
    0 0 43px !important;

  border-radius:
    50% !important;

  box-shadow: none !important;
}

.api-summary-card:nth-child(1)
.api-summary-icon,

.api-summary-card:nth-child(2)
.api-summary-icon,

.api-summary-card:nth-child(4)
.api-summary-icon {
  background:
    #e8f6ed !important;
}

.api-summary-card:nth-child(3)
.api-summary-icon {
  background:
    #eaf0ff !important;
}


/* -------------------------------------------------
   Card typography
   ------------------------------------------------- */

.api-summary-label {
  color:
    #4e6157 !important;

  font-size:
    11px !important;

  font-weight:
    700 !important;
}

.api-summary-value {
  margin:
    1px 0 3px !important;

  color:
    #102d23 !important;

  font-size:
    23px !important;

  font-weight:
    900 !important;
}

.api-summary-card:nth-child(4)
.api-summary-value {
  font-size:
    18px !important;
}

.api-summary-detail {
  color:
    #78877f !important;

  font-size:
    10px !important;
}


/* -------------------------------------------------
   Success banner — exactly one horizontal line
   ------------------------------------------------- */

.api-test-banner {
  width: 100% !important;

  min-height:
    52px !important;

  margin:
    0 0 18px !important;

  padding:
    9px 14px !important;

  display:
    none;

  align-items:
    center !important;

  justify-content:
    space-between !important;

  border:
    1px solid #a7d7b7 !important;

  border-radius:
    12px !important;

  background:
    #eff9f2 !important;

  box-shadow:
    none !important;

  overflow:
    hidden !important;
}

.api-test-banner.visible {
  display:
    flex !important;
}

.api-test-banner-main {
  display:
    flex !important;

  align-items:
    center !important;

  gap:
    10px !important;

  flex-wrap:
    nowrap !important;

  min-width:
    0 !important;

  font-size:
    11px !important;

  white-space:
    nowrap !important;

  overflow:
    hidden !important;

  text-overflow:
    ellipsis !important;
}

.api-test-banner-icon {
  width:
    27px !important;

  height:
    27px !important;

  flex:
    0 0 27px !important;
}

.api-test-banner-close {
  flex:
    0 0 auto !important;

  margin-left:
    8px !important;
}


/* -------------------------------------------------
   Remove any accidental outer green shadows
   ------------------------------------------------- */

.api-summary-card,
.api-test-banner,
.api-toolbar-card,
.api-main-table,
.api-bottom-card {
  outline: none !important;
}

.api-summary-card {
  -webkit-box-shadow:
    0 5px 18px rgba(20, 44, 34, .035) !important;

  box-shadow:
    0 5px 18px rgba(20, 44, 34, .035) !important;
}


/* ================================================================
   TABLET
   ================================================================ */

@media (max-width: 940px) {

  .api-summary-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    gap:
      9px !important;
  }
}


/* ================================================================
   MOBILE
   ================================================================ */

@media (max-width: 650px) {

  .api-summary-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    gap:
      8px !important;

    margin-bottom:
      14px !important;
  }

  .api-summary-card {
    min-height:
      85px !important;

    padding:
      10px !important;

    gap:
      8px !important;
  }

  .api-summary-icon {
    width:
      34px !important;

    height:
      34px !important;

    flex-basis:
      34px !important;
  }

  .api-summary-label {
    font-size:
      9px !important;
  }

  .api-summary-value {
    font-size:
      17px !important;
  }

  .api-summary-card:nth-child(4)
  .api-summary-value {
    font-size:
      14px !important;
  }

  .api-summary-detail {
    font-size:
      8px !important;
  }

  .api-test-banner {
    min-height:
      48px !important;

    padding:
      8px 10px !important;
  }

  .api-test-banner-main {
    font-size:
      10px !important;

    overflow-x:
      auto !important;

    scrollbar-width:
      none;
  }

  .api-test-banner-main::-webkit-scrollbar {
    display:
      none;
  }
}


/* Very narrow phones */

@media (max-width: 340px) {

  .api-summary-grid {
    grid-template-columns:
      1fr !important;
  }
}



/* =================================================================
   NICE_API_MANAGER_FORCE_STATUS_LINE_V390
   Restore the missing green API success line.
   ================================================================= */

.api-top-status-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  width: 100%;
  min-height: 52px;
  margin: 16px 0 18px 0;
  padding: 10px 16px;

  border: 1px solid #a9d8b6;
  border-radius: 12px;
  background: #eff9f2;
  box-shadow: none;
}

.api-top-status-line-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  white-space: nowrap;
}

.api-top-status-line-icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 999px;
  background: #16a34a;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
}

.api-top-status-line-text {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  color: #1c4332;
  font-size: 13px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.api-top-status-line-text strong {
  color: #118246;
  font-weight: 800;
}

.api-top-status-line-dot {
  color: #7a9084;
  font-size: 12px;
  flex: 0 0 auto;
}

.api-top-status-line-close {
  border: 0;
  background: transparent;
  color: #355646;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}

.api-top-status-line-close:hover {
  opacity: 0.75;
}

@media (max-width: 768px) {
  .api-top-status-line {
    min-height: 48px;
    padding: 8px 12px;
    margin: 12px 0 14px 0;
  }

  .api-top-status-line-main {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .api-top-status-line-main::-webkit-scrollbar {
    display: none;
  }

  .api-top-status-line-text {
    font-size: 12px;
  }
}


/* =================================================================
   NICE_API_STATUS_STRIP_FINAL_V310
   Permanent mockup-matching green status strip.
   ================================================================= */

#apiManagerSection .api-test-banner {
  display: flex !important;

  width: 100% !important;

  min-height: 52px !important;

  margin:
    0 0 18px 0 !important;

  padding:
    9px 14px !important;

  align-items:
    center !important;

  justify-content:
    space-between !important;

  gap:
    12px !important;

  border:
    1px solid #9fd3b0 !important;

  border-radius:
    12px !important;

  background:
    linear-gradient(
      90deg,
      #effaf3 0%,
      #f3fbf6 100%
    ) !important;

  color:
    #174b32 !important;

  box-shadow:
    none !important;

  opacity:
    1 !important;

  visibility:
    visible !important;
}

#apiManagerSection
.api-test-banner.ready {
  border-color:
    #a7d8b7 !important;

  background:
    linear-gradient(
      90deg,
      #effaf3,
      #f4fbf6
    ) !important;
}

#apiManagerSection
.api-test-banner-main {
  display:
    flex !important;

  flex:
    1 1 auto !important;

  min-width:
    0 !important;

  align-items:
    center !important;

  gap:
    10px !important;

  flex-wrap:
    nowrap !important;

  white-space:
    nowrap !important;

  overflow:
    hidden !important;

  color:
    #26523d !important;

  font-size:
    11px !important;

  line-height:
    1.3 !important;
}

#apiManagerSection
.api-test-banner-main strong {
  color:
    #14824b !important;

  font-weight:
    850 !important;
}

#apiManagerSection
.api-test-banner-icon {
  width:
    27px !important;

  height:
    27px !important;

  flex:
    0 0 27px !important;

  display:
    grid !important;

  place-items:
    center !important;

  border-radius:
    50% !important;

  background:
    #159653 !important;

  color:
    #ffffff !important;

  font-size:
    13px !important;

  font-weight:
    900 !important;
}

#apiManagerSection
.api-test-banner-close {
  width:
    24px !important;

  height:
    24px !important;

  flex:
    0 0 24px !important;

  display:
    grid !important;

  place-items:
    center !important;

  padding:
    0 !important;

  margin:
    0 !important;

  border:
    0 !important;

  background:
    transparent !important;

  color:
    #28523f !important;

  font-size:
    19px !important;

  line-height:
    1 !important;

  cursor:
    pointer !important;
}


/* Mobile */

@media (max-width: 650px) {

  #apiManagerSection
  .api-test-banner {
    min-height:
      48px !important;

    margin-bottom:
      14px !important;

    padding:
      8px 10px !important;
  }

  #apiManagerSection
  .api-test-banner-main {
    overflow-x:
      auto !important;

    scrollbar-width:
      none;

    font-size:
      10px !important;
  }

  #apiManagerSection
  .api-test-banner-main::-webkit-scrollbar {
    display:
      none;
  }

  #apiManagerSection
  .api-test-banner-icon {
    width:
      25px !important;

    height:
      25px !important;

    flex-basis:
      25px !important;
  }
}