/*
 * Scrada — UBL mapping page tokens
 * Colors/type/radius values sourced from client-app/src/assets/scss/colors/scrada.scss
 * + _variables.scss (Material Design v15+ tokens, Poppins primary). Fonts are loaded via Google
 * Fonts in index.html, matching client-app/src/index.html — no self-hosted font files here.
 *
 * Chrome (sitebar, persistent nav, flat panels) is shared with the general API reference —
 * see docs/template.hbs, which reuses the same .sitebar markup/CSS byte-for-byte so both docs
 * read as one product with two tabs.
 */

:root {
  /* ============ COLOR — Brand ============ */
  --scrada-primary-50:  #f7e5e6;
  --scrada-primary-500: #be282d;   /* PRIMARY — sitebar, primary buttons, accents */
  --scrada-primary-600: #b32429;
  --scrada-primary-700: #af1e22;   /* HOVER on primary */

  --scrada-accent:      #1e88e5;
  --scrada-accent-50:   #e8f2fc;
  --scrada-accent-700:  #1669b8;

  /* Exact HTTP-method color from the general API reference (docs/swagger.json → Redoc's theme),
     not a Scrada token — kept faithful to what that documentation already uses for POST. */
  --http-post: #186FAF;

  /* ============ COLOR — Neutrals ============ */
  --bg-page:      #fafafa;   /* nav column — matches the API reference's sidebar tone */
  --bg-card:      #ffffff;   /* content column — matches the API reference's content pane */
  --bg-sunken:    #f6f7f9;
  --bg-row-hover: #f7f8fa;

  --fg1: #2a3547;
  --fg2: rgba(42,53,71,0.66);
  --fg3: #99abb4;
  --fg-on-primary: #ffffff;

  --border:      #e5eaef;
  --border-soft: #edf0f3;

  /* ============ RADIUS ============ */
  --radius-sm: 4px;
  --radius:    6px;

  /* ============ LAYOUT ============ */
  --header-height: 56px;
  --nav-width: 288px;

  /* ============ TYPE ============ */
  --font-family: 'Poppins', 'Roboto', Arial, sans-serif;
  --font-mono:   ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
  --font-icon:   'Material Icons';

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  font-family: var(--font-family);
  color: var(--fg1);
  font-size: 16px;
  line-height: 1.334rem;
  font-weight: var(--fw-light);
  background-color: var(--bg-page);
}

button { font-family: inherit; }
a { color: var(--scrada-accent); text-decoration: none; }
a:hover { color: #1669b8; text-decoration: underline; }

:focus-visible { outline: 2px solid var(--scrada-accent); outline-offset: 1px; }

.page-title { color: var(--fg1); font-size: 19px; line-height: 24px; font-weight: var(--fw-regular); margin: 0; }
.page-desc { color: var(--fg2); font-size: 13.5px; line-height: 19px; font-weight: var(--fw-light); margin: 6px 0 0; max-width: 82ch; }

.material-icons {
  font-family: var(--font-icon);
  font-weight: normal;
  font-style: normal;
  font-size: 20px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

/* ============ Page shell ============ */

.shell { height: 100vh; display: flex; flex-direction: column; }

/* Shared site header — reused byte-for-byte in docs/template.hbs so both docs read as one
   product with two tabs (API reference / UBL mapping). Keep the two in sync when editing. */
.sitebar {
  height: var(--header-height); flex: none; background: var(--scrada-primary-500);
  display: flex; align-items: center; gap: 20px; padding: 0 18px; position: relative; z-index: 3;
}
.sitebar-brand { display: flex; align-items: center; gap: 10px; }
.sitebar-brand img.icon { height: 22px; display: block; }
.sitebar-brand img.text { height: 13px; display: block; }
.sitebar-tabs { display: flex; align-items: stretch; height: 100%; gap: 4px; }
.sitebar-tab {
  display: flex; align-items: center; gap: 6px; height: 100%; padding: 0 14px;
  color: rgba(255,255,255,0.75); font-size: 13.5px; font-weight: 500;
  border-bottom: 2px solid transparent;
}
.sitebar-tab:hover { color: #fff; text-decoration: none; }
.sitebar-tab.active { color: #fff; border-bottom-color: #fff; }
.sitebar-tab .material-icons { font-size: 16px; opacity: 0.85; }
.sitebar-tab .sitebar-tab-external { font-size: 13px; opacity: 0.6; }
.sitebar-menu-btn {
  display: none; align-items: center; justify-content: center; width: 34px; height: 34px;
  flex: none; background: transparent; border: none; border-radius: var(--radius-sm); color: #fff; cursor: pointer;
}
.sitebar-menu-btn:hover { background: rgba(255,255,255,0.12); }

.body-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: var(--nav-width) 1fr; }

/* ============ Left nav — persistent, not a popover; matches the API reference's own left nav ============ */

.nav-backdrop { display: none; }

.nav {
  background: var(--bg-page);
  overflow: auto; min-height: 0;
  display: flex; flex-direction: column; padding: 16px 0 24px;
}
.nav-label {
  font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--fg3); padding: 4px 20px 8px;
}

.nav-item {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  background: transparent; border: none; border-left: 3px solid transparent;
  padding: 8px 17px; cursor: pointer; color: var(--fg1); font-family: var(--font-family);
}
.nav-item:hover { background: var(--bg-sunken); }
.nav-item.active { background: var(--scrada-accent-50); border-left-color: var(--scrada-primary-500); }
.nav-item-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nav-item-name { font-size: 13px; font-weight: var(--fw-medium); }
.nav-item.active .nav-item-name { color: var(--scrada-primary-600); }
.nav-item-path {
  font-family: var(--font-mono); font-size: 10.5px; color: var(--fg3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.method-badge {
  flex: none; font-family: var(--font-family); font-size: 10px; font-weight: 700; letter-spacing: 0.3px;
  text-transform: uppercase; padding: 3px 7px; border-radius: 3px; background: var(--http-post); color: #fff;
}

.nav-divider { height: 1px; background: var(--border); margin: 12px 0; }

.nav-sections-head { display: flex; align-items: center; padding: 4px 20px 8px; }
.nav-sections-head .nav-label { padding: 0; flex: 1; }
.toc-clear {
  background: transparent; border: none; color: var(--fg3); font-size: 11px; font-family: var(--font-family);
  cursor: pointer; padding: 0; visibility: hidden;
}
.toc-clear.show { visibility: visible; }
.toc-clear:hover { color: var(--fg1); text-decoration: underline; }

.toc-item {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: transparent;
  border: none; border-left: 3px solid transparent; padding: 6px 17px; cursor: pointer; color: var(--fg2);
  font-size: 13px; font-family: var(--font-family);
}
.toc-item:hover { background: var(--bg-sunken); color: var(--fg1); }
.toc-item.active { border-left-color: var(--scrada-primary-500); color: var(--scrada-primary-600); font-weight: var(--fw-medium); background: var(--scrada-accent-50); }
.toc-item-name { flex: 1; }
.toc-item-count { font-size: 11px; color: var(--fg3); font-variant-numeric: tabular-nums; }

/* ============ Main ============ */

.main {
  background: var(--bg-card);
  display: flex; flex-direction: column; min-height: 0; min-width: 0; padding: 24px 28px; gap: 14px;
}

.toolbar { flex: none; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }

.doctype-switch { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.doctype-btn {
  display: flex; align-items: center; gap: 6px; background: var(--bg-card); color: var(--fg2); border: none;
  padding: 7px 13px; cursor: pointer; font-family: var(--font-family); font-size: 13px; font-weight: var(--fw-medium);
}
.doctype-btn + .doctype-btn { border-left: 1px solid var(--border); }
.doctype-btn.active { background: var(--scrada-primary-500); color: #fff; }
.doctype-btn .material-icons { font-size: 15px; }

.search-block {
  flex: 1; min-width: 220px; max-width: 380px; display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 7px 10px; background: var(--bg-card);
}
.search-block .material-icons { font-size: 17px; color: var(--fg3); }
.search-input { flex: 1; border: none; outline: none; background: transparent; font-family: var(--font-family); font-size: 13px; font-weight: 300; color: var(--fg1); padding: 0; }
.search-clear {
  border: none; background: transparent; border-radius: 50%; width: 22px; height: 22px;
  display: none; align-items: center; justify-content: center; cursor: pointer; color: var(--fg3); padding: 0;
}
.search-clear.show { display: flex; }
.search-clear:hover { background: rgba(0,0,0,0.06); }

.count-label {
  font-family: var(--font-mono); font-size: 12px; color: var(--fg3);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}

.info-callout {
  flex: none; display: flex; align-items: flex-start; gap: 9px; padding: 9px 12px;
  background: var(--scrada-accent-50); border-left: 3px solid var(--scrada-accent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 12.5px; color: var(--fg1);
}
.info-callout .material-icons { font-size: 15px; color: var(--scrada-accent); margin-top: 1px; }
.info-callout strong { font-weight: var(--fw-semibold); }
.info-callout .em { font-family: var(--font-mono); font-size: 12px; }

.panel { flex: 1; min-height: 0; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.table-scroll { flex: 1; min-height: 0; overflow: auto; }
.table-inner { min-width: 960px; }

.thead-row {
  display: grid;
  grid-template-columns: 150px 204px 112px minmax(230px, 1fr) minmax(170px, 230px);
  gap: 16px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-sunken);
  position: sticky;
  top: 0;
  z-index: 1;
}

.th-btn {
  text-align: left; background: transparent; border: none; padding: 0; cursor: pointer;
  font: var(--fw-semibold) 11px/1.2 var(--font-family); letter-spacing: 0.4px; text-transform: uppercase;
  color: var(--fg2); display: flex; align-items: center; gap: 4px;
}
.th-btn:hover { color: var(--fg1); }
.th-arrow { font-size: 11px; color: var(--scrada-primary-500); }
.th-static {
  font: var(--fw-semibold) 11px/1.2 var(--font-family); letter-spacing: 0.4px; text-transform: uppercase;
  color: var(--fg2);
}

.row {
  display: grid;
  grid-template-columns: 150px 204px 112px minmax(230px, 1fr) minmax(170px, 230px);
  gap: 16px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border-soft);
  align-items: start;
}
.row:last-child { border-bottom: none; }
.row:hover { background: var(--bg-row-hover); }

.section-pill {
  background: transparent; color: var(--fg2); border: 1px solid var(--border); border-radius: 3px;
  padding: 2px 8px; cursor: pointer; font-family: var(--font-family); font-size: 11px; font-weight: var(--fw-medium);
  text-align: left; max-width: 100%;
}
.section-pill:hover { border-color: var(--fg3); }
.section-pill.active { background: var(--scrada-accent-50); border-color: var(--scrada-accent); color: var(--scrada-accent-700); }

.cell-stack { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; min-width: 0; }

.json-field { font-family: var(--font-mono); font-size: 12.5px; color: var(--fg1); word-break: break-word; }
.json-field.fixed { color: var(--fg3); }

.tag { font-size: 10px; font-weight: var(--fw-medium); padding: 1px 6px; border-radius: 3px; border: 1px solid var(--border); color: var(--fg2); }

.bt-cell {
  font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--fg1);
  font-variant-numeric: tabular-nums;
}

.ubl-path { font-family: var(--font-mono); font-size: 12.5px; word-break: break-word; }
.ubl-path .ancestor { color: var(--fg3); }
.ubl-path .leaf { color: var(--fg1); }

.note-cell { color: var(--fg2); font-size: 12px; line-height: 16px; font-weight: 300; }

.empty-state { padding: 56px 16px; text-align: center; color: var(--fg3); font-size: 14px; }

.loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: var(--bg-page);
  transition: opacity 0.15s ease;
}
.loading-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}
.loading-overlay p { margin: 0; font-size: 13.5px; color: var(--fg2); }

.spinner {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 3px solid var(--scrada-primary-50);
  border-top-color: var(--scrada-primary-500);
  animation: spin 0.8s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 2.4s; }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 900px) {
  .body-grid { grid-template-columns: 1fr; }

  .sitebar-menu-btn { display: flex; }

  .nav-backdrop.open {
    display: block;
    position: fixed;
    inset: 0;
    top: var(--header-height);
    background: rgba(0, 0, 0, 0.4);
    z-index: 19;
  }

  .nav {
    position: fixed;
    top: var(--header-height);
    bottom: 0;
    left: 0;
    width: 300px;
    max-width: 85vw;
    z-index: 20;
    box-shadow: 2px 0 16px rgba(0,0,0,0.15);
    transform: translateX(-100%);
    transition: transform 0.2s ease;
  }
  .nav.open { transform: translateX(0); }

  @media (prefers-reduced-motion: reduce) {
    .nav { transition: none; }
  }
}

@media (max-width: 480px) {
  .sitebar { padding: 0 12px; gap: 12px; }
  .sitebar-tab { padding: 0 10px; font-size: 12.5px; }
  .sitebar-tab .material-icons { display: none; }
}