/* Optimal Access — /profile/ page (KBucket profile + API keys).
   Removes the legacy blue gradient/photo row backgrounds and restyles the
   API-key table to match the Optimal Access theme. Front end only. */

body.oa-profile-page {
  --oa-ground:      #11151b;
  --oa-ground-2:    #171d25;
  --oa-ground-3:    #1e2630;
  --oa-rule:        rgba(255,255,255,.10);
  --oa-text:        #e8ecf1;
  --oa-text-dim:    #9aa6b4;
  --oa-text-faint:  #6a7686;
  --oa-human:       #4fd1c5;
  --oa-accent:      #e05a47;
}

/* ---------- kill every legacy row background on this page ---------- */
body.oa-profile-page .fl-row,
body.oa-profile-page .fl-row .fl-row-content-wrap,
body.oa-profile-page .fl-col-content,
body.oa-profile-page .fl-module-content,
body.oa-profile-page .entry-content,
body.oa-profile-page .ast-article-single,
body.oa-profile-page .site-main,
body.oa-profile-page #primary {
  background-image: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
}
body.oa-profile-page .fl-row-bg-overlay > .fl-row-content-wrap::after,
body.oa-profile-page .fl-row-bg-photo > .fl-row-content-wrap::before {
  display: none !important;
}
/* Full-height hero row shrinks to its content */
body.oa-profile-page .fl-row-full-height > .fl-row-content-wrap {
  min-height: 0 !important;
  padding-block: 56px !important;
}

/* ---------- typography ---------- */
body.oa-profile-page,
body.oa-profile-page .fl-rich-text,
body.oa-profile-page .fl-rich-text p,
body.oa-profile-page .fl-html,
body.oa-profile-page p,
body.oa-profile-page li,
body.oa-profile-page span {
  color: var(--oa-text);
}
body.oa-profile-page h1,
body.oa-profile-page h2,
body.oa-profile-page h3,
body.oa-profile-page h4,
body.oa-profile-page .fl-heading,
body.oa-profile-page .fl-heading-text {
  font-family: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif !important;
  color: #ffffff !important;
  letter-spacing: -.01em;
}
body.oa-profile-page a { color: var(--oa-human); }
body.oa-profile-page a:hover { color: #ffffff; }

/* ---------- profile card (avatar / name / bio / contact tiles) ---------- */
body.oa-profile-page .fl-row-full-height .fl-row-content,
body.oa-profile-page .user-profile,
body.oa-profile-page .profile-wrap {
  max-width: 900px;
  margin-inline: auto;
}
body.oa-profile-page img[class*="avatar"],
body.oa-profile-page .profile-photo img,
body.oa-profile-page .user-photo img {
  border-radius: 999px;
  border: 1px solid var(--oa-rule);
  background: var(--oa-ground-2);
}
/* the two link/email tiles under the name */
body.oa-profile-page .fl-row-full-height .fl-col-content > div[class*="info"],
body.oa-profile-page .profile-contacts > *,
body.oa-profile-page .user-contacts > * {
  background: var(--oa-ground-2) !important;
  border: 1px solid var(--oa-rule) !important;
  border-radius: 12px;
}

/* ---------- buttons ---------- */
body.oa-profile-page .btn,
body.oa-profile-page .fl-button,
body.oa-profile-page button,
body.oa-profile-page input[type="submit"] {
  font-family: "IBM Plex Mono", ui-monospace, monospace !important;
  border-radius: 999px !important;
  border: 1px solid var(--oa-rule) !important;
  background: transparent !important;
  color: #ffffff !important;
  box-shadow: none !important;
  text-shadow: none !important;
  letter-spacing: .04em;
  padding: 10px 20px !important;
  transition: border-color .2s, color .2s, background-color .2s;
}
body.oa-profile-page .btn:hover,
body.oa-profile-page .fl-button:hover,
body.oa-profile-page button:hover,
body.oa-profile-page input[type="submit"]:hover {
  border-color: var(--oa-human) !important;
  color: var(--oa-human) !important;
  background: rgba(79,209,197,.08) !important;
}
body.oa-profile-page .btn-danger,
body.oa-profile-page .btn-primary,
body.oa-profile-page .fl-button {
  background: var(--oa-accent) !important;
  border-color: var(--oa-accent) !important;
  color: #ffffff !important;
}
body.oa-profile-page .btn-danger:hover,
body.oa-profile-page .btn-primary:hover,
body.oa-profile-page .fl-button:hover {
  background: transparent !important;
  color: var(--oa-accent) !important;
}
body.oa-profile-page .fl-button * { color: inherit !important; }

/* ---------- API key table ---------- */
body.oa-profile-page table {
  width: 100% !important;
  max-width: 1100px;
  margin: 0 auto 24px !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: var(--oa-ground-2) !important;
  border: 1px solid var(--oa-rule) !important;
  border-radius: 12px;
  overflow: hidden;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 14px;
  table-layout: auto;
}
body.oa-profile-page table thead th,
body.oa-profile-page table th {
  background: var(--oa-ground-3) !important;
  color: var(--oa-text-dim) !important;
  font-weight: 500 !important;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 11.5px;
  text-align: left;
  padding: 14px 18px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--oa-rule) !important;
  white-space: nowrap;
}
body.oa-profile-page table td {
  background: transparent !important;
  color: var(--oa-text) !important;
  padding: 14px 18px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--oa-rule) !important;
  vertical-align: middle;
}
body.oa-profile-page table tbody tr:last-child td { border-bottom: 0 !important; }
body.oa-profile-page table tbody tr:hover td { background: rgba(255,255,255,.03) !important; }
/* API key value column reads as code */
body.oa-profile-page table td:nth-child(2) {
  color: var(--oa-human) !important;
  word-break: break-all;
}
/* numeric-looking columns centered */
body.oa-profile-page table td:nth-child(3),
body.oa-profile-page table th:nth-child(3),
body.oa-profile-page table td:nth-child(5),
body.oa-profile-page table th:nth-child(5) { text-align: center; }

/* horizontal scroll instead of overflow on small screens */
body.oa-profile-page .fl-html,
body.oa-profile-page .fl-rich-text { overflow-x: auto; }

/* ---------- forms / modals ---------- */
body.oa-profile-page input[type="text"],
body.oa-profile-page input[type="email"],
body.oa-profile-page input[type="password"],
body.oa-profile-page input[type="url"],
body.oa-profile-page textarea,
body.oa-profile-page select {
  background: var(--oa-ground-2) !important;
  border: 1px solid var(--oa-rule) !important;
  color: var(--oa-text) !important;
  border-radius: 8px !important;
}
body.oa-profile-page .modal-content,
body.oa-profile-page .modal-body,
body.oa-profile-page .modal-header,
body.oa-profile-page .modal-footer {
  background: var(--oa-ground-2) !important;
  color: var(--oa-text) !important;
  border-color: var(--oa-rule) !important;
}

/* ---------- accordion (Have Questions?) ---------- */
body.oa-profile-page .fl-accordion-item {
  background: var(--oa-ground-2) !important;
  border: 1px solid var(--oa-rule) !important;
  border-radius: 10px;
  margin-bottom: 10px;
  overflow: hidden;
}
body.oa-profile-page .fl-accordion-button,
body.oa-profile-page .fl-accordion-button-label,
body.oa-profile-page .fl-accordion-content,
body.oa-profile-page .fl-accordion-content p {
  background: transparent !important;
  color: var(--oa-text) !important;
  border: 0 !important;
}
body.oa-profile-page .fl-accordion-button-label { color: #ffffff !important; }

@media (max-width: 780px) {
  body.oa-profile-page table { font-size: 12.5px; }
  body.oa-profile-page table th,
  body.oa-profile-page table td { padding: 11px 12px !important; }
}