/* ═══════════════════════════════════════════════════════════════
   finPOWER Connect Business Layer Help — Topic Page Styles
   Shared by all class, interface, enum, and member detail pages.
   ═══════════════════════════════════════════════════════════════ */

/* ─── Design Tokens ─── */
:root {
  --color-bg: #ffffff;
  --color-surface: #f8f9fb;
  --color-border: #e2e6ed;
  --color-text: #1a1e2c;
  --color-text-secondary: #5a6178;
  --color-text-muted: #8a90a4;
  --color-accent: #2563eb;
  --color-accent-light: #eff4ff;
  --color-method: #7c3aed;
  --color-method-bg: #f5f0ff;
  --color-property: #0891b2;
  --color-property-bg: #ecfeff;
  --color-property-ro: #6366f1;
  --color-property-ro-bg: #eef2ff;
  --color-field: #65a30d;
  --color-field-ro: #4d7c0f;
  --color-optional-bg: #f0fdf4;
  --color-optional-text: #15803d;
  --color-warning-bg: #fef2f2;
  --color-warning-border: #fca5a5;
  --color-warning-text: #b91c1c;
  --color-obsolete-bg: #fffbeb;
  --color-obsolete-border: #f59e0b;
  --color-obsolete-text: #92400e;
}

/* ─── Reset & Base ─── */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.page { max-width: 960px; margin: 0 auto; padding: 2.5rem 2rem 4rem; }

/* ─── Breadcrumb ─── */
.breadcrumb {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-bottom: 1.25rem;
}
.breadcrumb a { color: var(--color-accent); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb .sep { margin: 0 0.35rem; }

/* ─── Page Header ─── */
.page-header { margin-bottom: 2rem; }
.page-header.compact { margin-bottom: 0.5rem; }

.page-header h1 {
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 0.25rem;
}

.page-header .badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.2em 0.6em;
  border-radius: 4px;
  vertical-align: middle;
  margin-left: 0.5rem;
  position: relative;
  top: -2px;
}

/* Badge variants */
.badge-class     { background: #dbeafe; color: #1e40af; }
.badge-interface { background: #ecfeff; color: #155e75; }
.badge-enum      { background: #f3e8ff; color: #6b21a8; }
.badge-method    { background: var(--color-method-bg); color: var(--color-method); }
.badge-property  { background: var(--color-property-bg); color: var(--color-property); }
.badge-field     { background: #f7fee7; color: #3f6212; }

/* ─── Parent Link (member pages) ─── */
.parent-link {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  margin-bottom: 1.5rem;
}
.parent-link i { margin-right: 0.25rem; color: var(--color-text-muted); font-size: 0.75rem; }
.parent-link a { color: var(--color-accent); text-decoration: none; }
.parent-link a:hover { text-decoration: underline; }

/* ─── Jump Nav (quick-jump links on class pages) ─── */
.jump-nav {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.75rem;
}
.jump-nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: 0.8rem;
  font-weight: 500;
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s;
}
.jump-nav a:hover {
  border-color: var(--color-accent);
  background: var(--color-accent-light, #eff4ff);
  color: var(--color-accent);
}
.jump-nav a i { font-size: 0.7rem; }
.jump-nav-count {
  font-size: 0.68rem;
  font-weight: 400;
  color: var(--color-text-muted);
}

/* ─── Summary Block ─── */
.summary {
  background: linear-gradient(135deg, #f0fdf4, #ecfdf5);
  border-left: 4px solid #34d399;
  padding: 0.85rem 1.1rem;
  font-size: 0.95rem;
  border-radius: 0 6px 6px 0;
  margin-bottom: 2rem;
}

/* ─── Remarks ─── */
.remarks {
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  margin-bottom: 2rem;
  line-height: 1.65;
}

/* ─── Implements ─── */
.implements {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  margin-bottom: 2rem;
}
.implements i { margin-right: 0.3rem; color: var(--color-accent); }
.implements a { color: var(--color-accent); text-decoration: none; }
.implements a:hover { text-decoration: underline; }

/* ─── Used in Samples ─── */
.used-in-samples {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  margin-bottom: 2rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.used-in-samples > i { color: #7c3aed; margin-right: 0.1rem; }
.sample-link {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.65rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 0.8rem;
  font-weight: 500;
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s;
}
.sample-link:hover {
  border-color: #7c3aed;
  background: #f5f0ff;
  color: #7c3aed;
}

/* Dropdown variant for multiple samples — uses native <details>/<summary> */
.used-in-samples-multi {
  display: block;
  position: relative;
  width: fit-content;
}
.used-in-samples-multi summary {
  cursor: pointer;
  list-style: none;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-surface);
  font-size: 0.85rem;
  color: var(--color-text);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  user-select: none;
}
.used-in-samples-multi summary::-webkit-details-marker { display: none; }
.used-in-samples-multi summary::marker { content: ""; }
.used-in-samples-multi summary:hover { border-color: #7c3aed; }
.used-in-samples-multi summary > i:first-child { color: #7c3aed; }
.used-in-samples-multi summary .chev {
  font-size: 0.65rem;
  transition: transform 0.15s;
  color: var(--color-text-muted);
}
.used-in-samples-multi[open] summary .chev { transform: rotate(180deg); }
.used-in-samples-multi .sample-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 0.35rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  z-index: 10;
  display: flex;
  flex-direction: column;
  min-width: 240px;
}
.used-in-samples-multi .sample-list a {
  padding: 0.4rem 0.65rem;
  border-radius: 4px;
  color: var(--color-text);
  text-decoration: none;
  font-size: 0.85rem;
  white-space: nowrap;
}
.used-in-samples-multi .sample-list a:hover {
  background: #f5f0ff;
  color: #7c3aed;
}

/* ─── Warning Blocks ─── */
.system-warning,
.obsolete-warning {
  padding: 0.75rem 1rem;
  font-size: 0.88rem;
  border-radius: 0 6px 6px 0;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.system-warning {
  background: var(--color-warning-bg);
  border-left: 4px solid var(--color-warning-text);
  color: var(--color-warning-text);
}
.obsolete-warning {
  background: var(--color-obsolete-bg);
  border-left: 4px solid var(--color-obsolete-border);
  color: var(--color-obsolete-text);
}

/* ─── Section Headings ─── */
.section-heading {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 0.75rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.section-heading i { font-size: 0.85rem; }

/* ─── Member Table (class/interface overview pages) ─── */
.member-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 2.25rem;
  font-size: 0.875rem;
}
.member-table th {
  text-align: left;
  font-weight: 500;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  padding: 0.5rem 0.75rem;
  border-bottom: 2px solid var(--color-border);
}
.member-table td {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}
.member-table tr:last-child td { border-bottom: none; }
.member-table tr:hover td { background: var(--color-surface); }

.member-icon {
  width: 2rem;
  text-align: center;
  font-size: 0.85rem;
}

.icon-method      { color: var(--color-method); }
.icon-property    { color: var(--color-property); }
.icon-property-ro { color: var(--color-property-ro); }
.icon-field       { color: var(--color-field); }
.icon-field-ro    { color: var(--color-field-ro); }

.member-name a {
  color: var(--color-accent);
  text-decoration: none;
  font-weight: 500;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
}
.member-name a:hover { text-decoration: underline; }

.member-desc { color: var(--color-text-secondary); }

/* ─── Inline Tags ─── */
.tag-readonly,
.tag-system,
.tag-obsolete {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.15em 0.45em;
  border-radius: 3px;
  margin-left: 0.4rem;
  vertical-align: middle;
}
.tag-readonly { background: var(--color-property-ro-bg); color: var(--color-property-ro); }
.tag-system   { background: var(--color-warning-bg); color: var(--color-warning-text); }
.tag-obsolete { background: #f3f4f6; color: #9ca3af; text-decoration: line-through; }

.tag-optional {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.7rem;
  font-weight: 500;
  padding: 0.15em 0.5em;
  border-radius: 3px;
  background: var(--color-optional-bg);
  color: var(--color-optional-text);
}
.tag-optional i { font-size: 0.6rem; }

.tag-byref {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.7rem;
  font-weight: 500;
  padding: 0.15em 0.5em;
  border-radius: 3px;
  background: #fef3c7;
  color: #92400e;
}
.tag-byref i { font-size: 0.6rem; }

/* ─── Syntax Block (member detail pages) ─── */
.syntax-block {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin-bottom: 2rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
  line-height: 1.7;
  overflow-x: auto;
}
.syntax-block .kw    { color: #7c3aed; font-weight: 500; }
.syntax-block .type  { color: #0891b2; }
.syntax-block .param { color: var(--color-text); }
.syntax-block .opt   { color: var(--color-optional-text); font-style: italic; }
.syntax-block .punct { color: var(--color-text-muted); }
.syntax-block a      { color: #0891b2; text-decoration: none; }
.syntax-block a:hover { text-decoration: underline; }

/* ─── Parameters Table (member detail pages) ─── */
.params-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 2rem;
  font-size: 0.875rem;
}
.params-table th {
  text-align: left;
  font-weight: 500;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  padding: 0.5rem 0.75rem;
  border-bottom: 2px solid var(--color-border);
}
.params-table td {
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}
.params-table tr:last-child td { border-bottom: none; }
.params-table tr:hover td { background: var(--color-surface); }

.param-name {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-text);
}

.param-type {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.82rem;
  color: var(--color-property);
}
.param-type a { color: var(--color-property); text-decoration: none; }
.param-type a:hover { text-decoration: underline; }

.param-desc { color: var(--color-text-secondary); }
.param-default {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.82rem;
  color: var(--color-text-muted);
  font-style: italic;
}

/* ─── Return Value Block ─── */
.return-block {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin-bottom: 2rem;
  font-size: 0.9rem;
}
.return-block .return-type {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
  color: var(--color-property);
  font-weight: 500;
}
.return-block p {
  margin-top: 0.4rem;
  color: var(--color-text-secondary);
}

/* ─── Enum Values Table ─── */
.enum-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 2.25rem;
  font-size: 0.875rem;
}
.enum-table th {
  text-align: left;
  font-weight: 500;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  padding: 0.5rem 0.75rem;
  border-bottom: 2px solid var(--color-border);
}
.enum-table td {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}
.enum-table tr:last-child td { border-bottom: none; }
.enum-table tr:hover td { background: var(--color-surface); }
.enum-table .enum-name {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
  font-weight: 500;
}
.enum-table .enum-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.82rem;
  color: var(--color-text-muted);
}

/* ─── Code Sample Pages ─── */
.key-objects {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
}
.key-objects li {
  display: inline-block;
}
.key-objects code {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.82rem;
  background: var(--color-accent-light, #eff4ff);
  color: var(--color-accent);
  padding: 0.25em 0.6em;
  border-radius: 5px;
  border: 1px solid var(--color-border);
}

pre.code-sample {
  background: #1e293b;
  color: #e2e8f0;
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  line-height: 1.65;
  overflow-x: auto;
  margin-bottom: 2rem;
  tab-size: 2;
}
pre.code-sample .vb-keyword { color: #93c5fd; font-weight: 500; }
pre.code-sample .vb-string  { color: #fca5a5; }
pre.code-sample .vb-comment { color: #6b7280; font-style: italic; }

/* ─── Member Information Footer ─── */
.member-info {
  border-top: 1px solid var(--color-border);
  margin-top: 2.5rem;
  padding-top: 1rem;
  font-size: 0.78rem;
  color: var(--color-text-muted);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 1rem;
}
.member-info dt { font-weight: 500; }
.member-info dd { margin: 0; }