/* Design tokens: taken from docs.ytria.com/sapio365. */
:root {
  --color-brand: #d61965;
  --color-brand-soft: #fce8f0;
  --color-ink: #000c34;
  --color-nav-active: #0a2656;
  --color-nav-text: #000;
  --color-text: #000c34;
  --color-muted: #5c6378;
  --color-link: #357de8;
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-subtle: #eff0f4;
  --color-border: #e2e5eb;
  --color-divider: #eff0f4;
  --color-row-hover: #f7f8fa;
  --color-error: #b3261e;

  --font-body: "Roboto", system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --radius: 6px;
  --radius-pill: 75px;
  --gap: 16px;
  --header-height: 80px;
  --sidebar-width: 323px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-text);
  background: var(--color-bg);
}

a { color: var(--color-link); text-decoration: none; }
a:hover { text-decoration: underline; }
code { font-family: var(--font-mono); font-size: 0.85em; }

/* Header */
.app-header {
  display: flex;
  align-items: center;
  gap: 32px;
  height: var(--header-height);
  padding: 0 24px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-divider);
  color: var(--color-ink);
}
.brand-logo { display: block; height: 44px; }
.header-nav { display: flex; gap: 24px; margin-left: auto; }
.header-link { font-size: 13px; font-weight: 500; color: var(--color-ink); }
.header-link:hover, .header-link[aria-current="page"] { color: var(--color-brand); text-decoration: none; }

/* About page */
.intro h1 { margin: 0 0 12px; font-size: 32px; font-weight: 500; line-height: 1.3; color: var(--color-ink); }
.intro h3 { margin: 28px 0 8px; font-size: 20px; font-weight: 500; line-height: 1.3; color: var(--color-ink); }
.intro p, .intro ul { margin: 0 0 12px; }
.intro li { margin-bottom: 4px; }
.intro pre {
  margin: 0 0 12px; padding: 12px 16px; overflow-x: auto;
  background: var(--color-subtle); border-radius: var(--radius);
}
.intro-table { width: 100%; margin: 0 0 12px; border-collapse: collapse; font-size: 14px; }
.intro-table th, .intro-table td { padding: 10px 8px; border: 1px solid var(--color-border); text-align: left; vertical-align: top; }
.intro-table th { width: 140px; white-space: nowrap; background: var(--color-subtle); font-weight: 700; color: var(--color-ink); }

/* Layout
   The page never scrolls: the layout fills the window under the header, and the sidebar
   list and the content area scroll on their own. The footer sits below the layout, out of
   view, until the content area is scrolled to its end (.footer-open, see useFooterReveal in
   app.js). The module heading and filters hide while scrolling down (.top-hidden, see
   useHidingTop); the table headers stick under them, or at the top when they are hidden. */
#root { height: 100vh; overflow: clip; } /* clip, not hidden: nothing can scroll it */
.layout { display: flex; height: calc(100vh - var(--header-height)); transition: height 0.2s; }
.layout.footer-open { height: calc(100vh - var(--header-height) - var(--footer-h, 0px)); }
.sidebar {
  flex: 0 0 var(--sidebar-width);
  overflow-y: auto;
  background: var(--color-surface);
  border-right: 1px solid var(--color-divider);
}
.content { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: auto; padding: 0 24px; }
.content-about { padding-top: 24px; }
/* Spans the content area's padding too, so a table wider than the area never shows through. */
.content-top {
  position: sticky; top: 0; left: -24px; z-index: 3;
  margin: 0 -24px; padding: 24px 24px var(--gap);
  background: var(--color-surface);
  transition: transform 0.2s;
}
/* Hidden, it leaves its blank bottom strip in view: a gap between the page header and the table. */
.top-hidden .content-top { transform: translateY(calc(-100% + var(--gap))); }
.content-heading { margin-bottom: var(--gap); }
.content-title { margin: 0; font-size: 32px; font-weight: 500; line-height: 1.3; color: var(--color-ink); }
.content-ids { margin: 4px 0 0; font-size: 13px; color: var(--color-muted); }
.content-ids code { margin-left: 6px; color: var(--color-text); }
.content-level { margin: 2px 0 0; font-size: 13px; line-height: 1.5; color: var(--color-muted); }
.content-level .level-icon { vertical-align: top; margin-right: 6px; }
.content-level a { color: var(--color-link); }
.content-level code { color: var(--color-text); }

/* Module level icon: list, heading, filter. 1.5em tall: centered on the first line of text. */
.level-icon { display: inline-flex; flex: none; align-items: center; width: 14px; height: 1.5em; color: var(--color-muted); }
.level-icon svg, .level-option svg {
  width: 14px; height: 14px;
  fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.intro .level-icon { vertical-align: top; margin-right: 4px; }

/* Module list */
.module-search-wrap {
  position: sticky; top: 0; z-index: 1;
  padding: 16px 16px 8px;
  background: var(--color-surface);
}
.module-search { display: block; width: 100%; }
.level-filter { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.level-option {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px;
  border: 1px solid var(--color-border); border-radius: var(--radius-pill);
  background: var(--color-surface); font: inherit; font-size: 12px; line-height: 1.5;
  color: var(--color-muted); cursor: pointer;
}
.level-option:hover { background: var(--color-row-hover); }
.level-option[aria-pressed="true"] {
  border-color: var(--color-subtle);
  background: var(--color-subtle);
  color: var(--color-nav-active);
  font-weight: 500;
}
.module-updated { margin: 8px 0 0 8px; font-size: 12px; line-height: 1.5; color: var(--color-muted); }
.module-empty { margin: 0; padding: 8px 24px; font-size: 13px; color: var(--color-muted); }
.module-list ul { list-style: none; margin: 0; padding: 0 16px 16px; }
.module-item {
  display: flex; justify-content: space-between; gap: 8px;
  width: 100%; margin: 2px 0; padding: 10px 8px;
  border: 0; border-radius: var(--radius);
  background: none; font: inherit; font-size: 13px; line-height: 1.5; text-align: left;
  color: var(--color-nav-text); cursor: pointer;
}
.module-item:hover { background: var(--color-row-hover); }
.module-item.is-active {
  background: var(--color-subtle);
  color: var(--color-nav-active);
  font-weight: 500;
}
.module-name { flex: 1; }
.module-count { color: var(--color-muted); font-size: 12px; }

/* Toolbar */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.search, .field select {
  font: inherit; font-size: 13px; line-height: 1.4;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
}
.search {
  flex: 1 1 280px;
  padding: 9px 18px;
  border-radius: var(--radius-pill);
}
.field select { padding: 8px 12px; border-radius: var(--radius); }
.search:focus, .field select:focus { outline: none; border-color: var(--color-link); box-shadow: 0 0 0 2px rgba(53, 125, 232, 0.2); }
.field { display: flex; align-items: center; gap: 8px; }
.field-label, .toggle { font-size: 13px; color: var(--color-muted); }
.toggle { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.toggle input { accent-color: var(--color-nav-active); }
.result-count { margin-left: auto; font-size: 13px; font-weight: 500; color: var(--color-ink); }

/* Table: it takes its full height; the content area scrolls, sideways too when it is narrow. */
.columns-table {
  width: 100%; min-width: 900px;
  table-layout: fixed;
  border-collapse: separate; border-spacing: 0;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-size: 14px; line-height: 1.6;
}
.table-wrap, .intro { margin-bottom: 24px; }
/* Fixed widths; the column title takes what is left. */
.columns-table .col-uid { width: 14%; }
.columns-table .col-family { width: 10%; }
.columns-table .col-dataType { width: 9%; }
.columns-table .col-isDefault { width: 90px; }
.columns-table .col-technical { width: 100px; }
.columns-table .col-extraLoad { width: 9%; }
.truncate {
  display: block;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.columns-table th, .columns-table td {
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.columns-table th:last-child, .columns-table td:last-child { border-right: 0; }
.columns-table th {
  position: sticky; top: var(--top-h, 0px); z-index: 2;
  background: var(--color-subtle);
  text-align: left; white-space: nowrap;
  transition: top 0.2s;
}
.top-hidden .columns-table th { top: var(--gap); }
.columns-table th button {
  width: 100%; padding: 10px 8px;
  border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 700; text-align: left;
  color: var(--color-ink);
  overflow: hidden; text-overflow: ellipsis;
}
.columns-table td {
  padding: 10px 8px;
  vertical-align: top;
}
.columns-table tbody tr:last-child td { border-bottom: 0; }
.columns-table tbody tr { cursor: pointer; }
.columns-table tbody tr:hover { background: var(--color-row-hover); }
.columns-table tbody tr:focus-visible { outline: 2px solid var(--color-link); outline-offset: -2px; }
.columns-table td.col-title .truncate { white-space: normal; }
.col-title { font-weight: 500; color: var(--color-ink); }
.col-uid code { color: var(--color-muted); }

.tag {
  display: inline-block; padding: 1px 8px;
  border-radius: var(--radius);
  background: var(--color-subtle);
  font-size: 12px;
}
.badge {
  display: inline-block; padding: 1px 8px;
  border-radius: var(--radius);
  font-size: 12px; font-weight: 500;
}
.badge-default { background: var(--color-brand-soft); color: var(--color-brand); }
.badge-technical { background: var(--color-subtle); color: var(--color-nav-active); }

/* Detail popup */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  background: rgba(0, 12, 52, 0.4);
}
.modal {
  width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(0, 12, 52, 0.18);
}
.modal-header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--color-divider);
}
.modal-header h3 { margin: 0; font-size: 20px; font-weight: 500; line-height: 1.3; color: var(--color-ink); }
.modal-close {
  border: 0; background: none; cursor: pointer;
  font-size: 26px; line-height: 1; color: var(--color-muted);
}
.modal-close:hover { color: var(--color-ink); }
.modal-fields { margin: 0; padding: 8px 20px 16px; font-size: 14px; }
.modal-field {
  display: grid; grid-template-columns: 180px 1fr; gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-divider);
}
.modal-field:last-child { border-bottom: 0; }
.modal-field dt { font-size: 13px; color: var(--color-muted); }
.modal-field dd { margin: 0; word-break: break-word; color: var(--color-ink); }
.none { color: var(--color-muted); }
@media (max-width: 500px) {
  .modal-field { grid-template-columns: 1fr; gap: 2px; }
}

/* New-version prompt */
.update-prompt {
  position: fixed; right: 16px; bottom: 16px; z-index: 200;
  max-width: calc(100vw - 32px);
  padding: 16px 18px;
  background: var(--color-surface); color: var(--color-ink);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(0, 12, 52, 0.18);
}
.update-text { margin: 0 0 12px; font-size: 14px; }
.update-actions { display: flex; justify-content: flex-end; gap: 8px; }
.btn {
  padding: 8px 16px;
  border: 1px solid transparent; border-radius: var(--radius);
  font: inherit; font-size: 13px; font-weight: 500; line-height: 1.2; cursor: pointer;
}
.btn-primary { background: var(--color-nav-active); color: #fff; }
.btn-primary:hover { filter: brightness(1.25); }
.btn-secondary { background: var(--color-surface); border-color: var(--color-border); color: var(--color-ink); }
.btn-secondary:hover { background: var(--color-subtle); }

.empty, .status { padding: 40px; text-align: center; color: var(--color-muted); }
.status-error { color: var(--color-error); }

/* Footer, as on docs.ytria.com */
.app-footer {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 24px;
  padding: 24px;
  background: var(--color-brand); color: #fff;
  font-size: 13px;
}
.footer-logo { display: block; height: 40px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 0 16px; margin: 0; padding: 0; list-style: none; }
.app-footer a { color: #fff; }
.footer-copyright { margin: 0; }

/* Narrow screens: the module list sits above the content. */
@media (max-width: 800px) {
  .app-header { gap: 16px; padding: 0 16px; }
  .layout { flex-direction: column; }
  .sidebar {
    flex: none; width: 100%; max-height: 200px;
    border-right: 0; border-bottom: 1px solid var(--color-divider);
  }
  .module-search-wrap { padding: 8px 16px; }
  .module-list ul { padding: 0 16px 8px; }
  .content { flex: 1; min-height: 0; padding: 0 16px; }
  .content-about { padding-top: 16px; }
  .content-top { left: -16px; margin: 0 -16px; padding: 16px 16px var(--gap); }
  .app-footer { grid-template-columns: 1fr; gap: 12px; padding: 16px; }
}