/* Zarubezhneft web brandbook (services/docs/zarubezhneft-brandbook-web.md) for the service's pages, laid out like the
   company's portals («ЗН Метрика», the corporate portal): a white app bar with the brand line, a light navigation rail,
   white cards on a cool grey canvas. Shared by «ЗН Контрагенты» (/cp/) and the collection navigator (/).
   Roboto Flex (OFL) stands in for the brand face TT Bluescreens Pro: narrower for the accent face (Normal), wider for
   text (Expanded). The brand face itself is licensed and served only after the login: the pages load
   /static/fonts/tt-bluescreens-pro/fonts.css after this file, and Roboto Flex stays for the login page and for the
   Vietnamese letters the brand face lacks. */

@font-face {
  font-family: "ZN Text"; src: url("fonts/RobotoFlex-latin.woff2") format("woff2");
  font-weight: 100 1000; font-stretch: 25% 151%; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "ZN Text"; src: url("fonts/RobotoFlex-latin-ext.woff2") format("woff2");
  font-weight: 100 1000; font-stretch: 25% 151%; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "ZN Text"; src: url("fonts/RobotoFlex-cyrillic.woff2") format("woff2");
  font-weight: 100 1000; font-stretch: 25% 151%; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "ZN Text"; src: url("fonts/RobotoFlex-vietnamese.woff2") format("woff2");
  font-weight: 100 1000; font-stretch: 25% 151%; font-display: swap;
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301,
    U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

:root {
  /* Brandbook palette */
  --zn-01: #00326E; --zn-02: #001946; --zn-03: #005591; --zn-04: #0078AF; --zn-05: #0A8F2D;
  --zn-06: #4BAF46; --zn-07: #9BC855; --zn-08: #CEE1A5; --zn-09: #EBF0D7; --zn-10: #5A5A5A;
  --zn-callout: #E5EAF0; --zn-muted: #6D6D6D;
  /* Roles (brandbook 1.7) */
  --text: #000000; --text-2: #3D4757; --muted: var(--zn-muted); --heading: var(--zn-01); --link: var(--zn-03);
  --primary: var(--zn-01); --primary-hover: var(--zn-03); --primary-active: var(--zn-02); --focus: var(--zn-04);
  --canvas: #F3F6F9; --surface: #FFFFFF; --surface-2: #F7F9FB; --line: #D9DEE5; --line-soft: #E8ECF1;
  /* Soft status tints; amber and red are off-brand system colours, as the brandbook advises */
  --ok: var(--zn-05); --ok-bg: #E8F4E6; --info: var(--zn-03); --info-bg: #E5EEF7; --warn: #8A6100; --warn-bg: #FFF4D6;
  --warn-line: #F1D58A; --bad: #B71C1C; --bad-bg: #FBE9E9; --off: var(--zn-10); --off-bg: #EEF1F5;
  --font: "ZN Text", Arial, sans-serif;
  --display: 90%; --body: 108%;     /* Roboto Flex for TT Bluescreens Pro Normal / Expanded (fonts.css: 100% / 125%) */
  --radius: 12px; --radius-s: 8px;
  --shadow: 0 1px 2px rgb(0 25 70 / 0.04), 0 6px 20px rgb(0 25 70 / 0.05);
  --brand-line: linear-gradient(90deg, #00326E 0%, #005591 18%, #0078AF 36%, #0A8F2D 58%, #4BAF46 74%, #9BC855 88%, #CEE1A5 100%);
}

* { box-sizing: border-box; }
html { color-scheme: light; }
body { margin: 0; background: var(--canvas); color: var(--text); font: 400 14px/1.5 var(--font); font-stretch: var(--body); }
h1, h2, h3, .display { font-family: var(--font); font-stretch: var(--display); color: var(--heading); }
h1 { font-size: 30px; font-weight: 600; line-height: 1.1; margin: 0; letter-spacing: -0.01em; }
h2 { font-size: 19px; font-weight: 600; margin: 0; }
h3 { font-size: 15px; font-weight: 600; margin: 0 0 8px; }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--zn-01); text-decoration: underline; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.icon { flex: none; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.caption { font-size: 12px; color: var(--muted); }
.num { font-variant-numeric: tabular-nums; }
.error { color: var(--bad); }
.gap-b { margin-bottom: 16px; }
.gap-t { margin-top: 12px; }
.gap-t-s { margin-top: 6px; }
.row-flex { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.grow { flex: 1; }

/* ——— app bar, brand line, navigation rail ——— */
.appbar { height: 60px; background: var(--surface); display: flex; align-items: center; gap: 18px; padding: 0 24px;
  position: sticky; top: 0; z-index: 31; }   /* above the brand line, so its tooltips and dropdowns are too */
.logo { display: flex; align-items: center; gap: 10px; color: var(--zn-01); }
.logo:hover { text-decoration: none; }
/* Placeholder for the official logo from the brand kit. */
.logo-slot { width: 26px; height: 26px; border-radius: 50%; background: conic-gradient(from 200deg, #00326E, #0078AF, #4BAF46, #9BC855, #00326E); }
.logo b { font-size: 17px; font-weight: 600; font-stretch: var(--display); color: var(--zn-01); }
.logo span { font-size: 17px; font-weight: 400; font-stretch: var(--display); color: var(--zn-01); }
.appbar .grow { flex: 1; }
.appbar .finder { display: flex; align-items: center; gap: 8px; width: 300px; padding: 7px 10px; border: 1px solid var(--line);
  border-radius: var(--radius-s); color: var(--muted); background: var(--surface); }
.appbar .finder input { border: 0; outline: 0; font: inherit; flex: 1; min-width: 0; }
.appbar .who { font-weight: 600; color: var(--zn-01); font-size: 13px; }
.appbar .ver { font-size: 11px; color: var(--muted); border: 1px solid var(--line); border-radius: 10px; padding: 1px 8px; }
.icon-btn { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: var(--radius-s); color: var(--text-2);
  background: transparent; border: 0; cursor: pointer; }
.icon-btn:hover { background: var(--off-bg); color: var(--zn-01); }
.zn-line { height: 3px; background: var(--brand-line); position: sticky; top: 60px; z-index: 30; }

.layout { display: flex; min-height: calc(100vh - 63px); }
.side { width: 248px; flex: none; background: var(--surface); padding: 18px 12px; border-right: 1px solid var(--line-soft);
  position: sticky; top: 63px; height: calc(100vh - 63px); overflow: auto; }
.side a, .side span.off { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-s);
  color: var(--text-2); font-size: 14px; margin-bottom: 2px; }
.side a:hover { background: var(--off-bg); color: var(--zn-01); text-decoration: none; }
.side a.current { background: var(--zn-01); color: #fff; }
.side span.off { color: #9AA4B2; cursor: help; }
.side .group { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 18px 12px 6px; }
.side .count { margin-left: auto; font-size: 12px; background: var(--off-bg); color: var(--zn-01); border-radius: 10px; padding: 0 7px; }
.side a.current .count { background: rgb(255 255 255 / 0.18); color: #fff; }

main { flex: 1; min-width: 0; padding: 26px 32px 64px; }

/* ——— page header, breadcrumbs ——— */
.crumbs { display: inline-flex; gap: 8px; align-items: center; background: var(--surface); border-radius: var(--radius-s);
  padding: 7px 12px; font-size: 13px; color: var(--muted); box-shadow: var(--shadow); margin-bottom: 16px; }
.crumbs a { color: var(--muted); }
.crumbs b { color: var(--zn-05); font-weight: 600; }
.pagehead { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 20px; }
.pagehead .sub { color: var(--muted); margin-top: 6px; max-width: 820px; }
.pagehead .tools { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

/* ——— buttons, segmented control, tabs ——— */
.btn { display: inline-flex; align-items: center; gap: 8px; font: 500 14px var(--font); font-stretch: var(--body);
  border-radius: var(--radius-s); padding: 9px 16px; border: 1px solid var(--primary); background: var(--primary); color: #fff;
  cursor: pointer; white-space: nowrap; }
.btn:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: #fff; text-decoration: none; }
.btn:active { background: var(--primary-active); }
.btn--light { background: var(--surface); color: var(--zn-01); border-color: var(--line); box-shadow: 0 1px 2px rgb(0 25 70 / 0.04); }
.btn--light:hover { background: var(--surface-2); color: var(--zn-01); border-color: #C5CDD8; }
.btn--green { background: var(--zn-05); border-color: var(--zn-05); font-weight: 600; }
.btn--green:hover { background: #087A26; border-color: #087A26; }
.btn--danger { background: var(--surface); color: var(--bad); border-color: #E7B7B7; }
.btn--danger:hover { background: var(--bad-bg); color: var(--bad); border-color: var(--bad); }
.btn--small { padding: 6px 12px; font-size: 13px; }
.btn.is-planned, .btn[disabled] { opacity: 0.55; cursor: help; }
.seg { display: inline-flex; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 3px; gap: 2px; flex-wrap: wrap; }
.seg button { font: 500 13px var(--font); font-stretch: var(--body); border: 0; background: transparent; color: var(--text-2);
  padding: 6px 12px; border-radius: 6px; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.seg button:hover { background: var(--off-bg); }
.seg button.is-active { background: var(--zn-01); color: #fff; }
.seg button.is-planned { color: #9AA4B2; cursor: help; }
.seg .n { font-size: 11px; opacity: 0.8; }
.tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--line); margin: 6px 0 20px; overflow-x: auto; }
.tabs a, .tabs span { padding: 10px 0 11px; font-size: 14px; color: var(--muted); border-bottom: 2px solid transparent;
  white-space: nowrap; display: inline-flex; gap: 6px; align-items: center; }
.tabs a:hover { color: var(--zn-01); text-decoration: none; }
.tabs a.is-active { color: var(--zn-01); border-bottom-color: var(--zn-01); font-weight: 600; }
.tabs span { color: #A3ACB9; cursor: help; }
.tabs .n { font-size: 11px; background: var(--off-bg); color: var(--zn-01); border-radius: 9px; padding: 0 6px; font-weight: 500; }

/* ——— cards, KPIs, callouts ——— */
.card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--line-soft); padding: 20px 22px; }
/* Vertical rhythm between page blocks: 16 px between cards and grids, none between the cells of a grid. */
.card + .card, .grid + .grid, .grid + .card, .card + .grid { margin-top: 16px; }
.grid > .card + .card, .grid > .grid + .grid, .grid > .grid + .card, .grid > .card + .grid { margin-top: 0; }
.card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.card-head .right { margin-left: auto; }
.grid { display: grid; gap: 16px; }
.g-kpi { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin-bottom: 16px; }
.g-main { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.kpi { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--line-soft); padding: 16px 20px; }
.kpi .label { font-size: 13px; color: var(--muted); }
.kpi .value { font-size: 34px; font-weight: 400; font-stretch: var(--display); color: var(--zn-01); line-height: 1.15; margin: 4px 0 2px; }
.kpi .value small { font-size: 14px; color: var(--muted); margin-left: 4px; }
.kpi .note { font-size: 12px; color: var(--muted); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.meter { height: 6px; border-radius: 3px; background: var(--off-bg); overflow: hidden; margin: 8px 0 6px; }
.meter i { display: block; height: 100%; background: var(--zn-06); border-radius: 3px; }
.delta-up { color: var(--ok); font-weight: 600; }
.delta-down { color: var(--bad); font-weight: 600; }
.callout { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius-s); font-size: 13px; }
.callout--warn { background: var(--warn-bg); border: 1px solid var(--warn-line); color: #5C4300; }
.callout--warn .icon { color: #C58A00; }
.callout--info { background: var(--info-bg); color: var(--zn-01); }
.callout--stop { background: var(--zn-02); color: #fff; }
.callout--stop a { color: var(--zn-08); }

/* ——— pills ——— */
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border-radius: 12px; font-size: 12px; font-weight: 500;
  white-space: nowrap; background: var(--off-bg); color: var(--off); }
.pill--ok { background: var(--ok-bg); color: var(--ok); }
.pill--info { background: var(--info-bg); color: var(--info); }
.pill--warn { background: var(--warn-bg); color: var(--warn); }
.pill--bad { background: var(--bad-bg); color: var(--bad); }
.pill--stop { background: var(--zn-02); color: #fff; }
.pill--dash { background: transparent; border: 1px dashed #B5BDC9; color: var(--muted); cursor: help; }

/* Tooltips: why a part is not covered yet, or a value's evidence. One floating box for the page (tips.js). */
.tip-float { position: fixed; z-index: 100; max-width: 360px; white-space: pre-line; padding: 9px 11px;
  border-radius: var(--radius-s); background: var(--zn-02); color: #fff; font: 400 12px/1.45 var(--font); font-stretch: 100%;
  text-align: left; box-shadow: 0 8px 24px rgb(0 25 70 / 0.25); pointer-events: none; }
.tip-mark { display: inline-grid; place-items: center; color: #9AA4B2; cursor: help; vertical-align: -3px; }

/* ——— tables ——— */
.table-wrap { overflow-x: auto; }
table.t { width: 100%; border-collapse: collapse; font-size: 13px; }
table.t th { text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted);
  padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--surface); }
table.t td { padding: 12px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
table.t tr.link { cursor: pointer; }
table.t tr.link:hover td { background: var(--surface-2); }
table.t td.r, table.t th.r { text-align: right; white-space: nowrap; }
table.t td.nw { white-space: nowrap; }
table.t .name { color: var(--zn-01); font-weight: 600; font-size: 14px; font-stretch: var(--display); }
table.t .sub { color: var(--muted); font-size: 12px; }
table.t tr.is-related .name { color: var(--text-2); font-weight: 500; }

.tag { display: inline-block; font-size: 12px; color: var(--zn-03); background: var(--info-bg); border-radius: 6px; padding: 1px 8px; }
.table-foot { display: flex; gap: 18px; padding: 12px 4px 0; font-size: 13px; color: var(--muted); }
.table-foot b { color: var(--text); }

@media (max-width: 1240px) {
  .g-main, .g-2 { grid-template-columns: 1fr; }
  .appbar .finder { display: none; }
}
@media (max-width: 860px) {
  .side { display: none; }
  main { padding: 18px 16px 48px; }
  .pagehead { flex-direction: column; }
  .pagehead .tools { margin-left: 0; justify-content: flex-start; }
  .appbar .who, .appbar .ver { display: none; }
}