/* RIY portal styles — Ecme dark tokens (see design.md) */
/* Google Sans (OFL-1.1, via @fontsource/google-sans), self-hosted: cyrillic + latin subsets, weights 400/500/600/700 */
@font-face { font-family: "Google Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/google-sans-cyrillic-400-normal.woff2") format("woff2");
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Google Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/google-sans-latin-400-normal.woff2") format("woff2");
  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: "Google Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/google-sans-cyrillic-500-normal.woff2") format("woff2");
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Google Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/google-sans-latin-500-normal.woff2") format("woff2");
  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: "Google Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/google-sans-cyrillic-600-normal.woff2") format("woff2");
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Google Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/google-sans-latin-600-normal.woff2") format("woff2");
  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: "Google Sans"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/google-sans-cyrillic-700-normal.woff2") format("woff2");
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Google Sans"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/google-sans-latin-700-normal.woff2") format("woff2");
  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; }
:root {
  --frame: #0a0a0a;
  --panel: #171717;
  --card: #262626;
  --nested: #404040;
  --text: #a3a3a3;
  --text-strong: #f5f5f5;
  --primary: #2a85ff;
  --primary-tint: #0d1723;
  --danger: #ff6a55;
  --danger-tint: #3c2d2b;
  --success: #10b981;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100vh;
  padding: 22px;
  display: flex;
  background: var(--frame);
  color: var(--text);
  font: 14px/21px "Google Sans", Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
a { color: inherit; text-decoration: none; }

/* Floating content panel on the dark frame */
.panel {
  background: var(--panel);
  border-radius: 20px;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Top bar */
.topbar {
  display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap;   /* buttons are top-aligned with the logo */
  padding: 20px 28px;
  gap: 16px;
}
/* Right column of the top bar: the button row, and under it the page title (h1 + lead) right-aligned in the colour of the page's button (--accent).
   .page-title has zero intrinsic width (width:0; min-width:100%), so a long lead never pushes the buttons under the logo. */
.top-right { flex: 1 1 auto; display: flex; flex-direction: column; align-items: flex-end; }
.page-title { width: 0; min-width: 100%; margin-top: 12px; text-align: right; }
.page-title h1 { margin: 0; font-size: 24px; line-height: 30px; color: var(--accent, var(--text-strong)); }
.page-title .lead { margin: 2px 0 0; }
.topbar.stacked .top-right { align-items: flex-start; }      /* the buttons dropped under the centred logo keep their left alignment; the title stays on the right */
/* Logo lockup: the logo (5x the former size: 216 px) with «SERVICES PORTAL» under it. Both are one outlined SVG, so the caption is
   exactly as wide as the logo. When the row is too full the buttons drop under it. */
.brand { display: block; flex: none; color: var(--text); line-height: 0; }   /* --text = #a3a3a3 (grey logo) */
.brand svg { display: block; width: 216px; height: auto; fill: var(--text); overflow: visible; }
.topbar.stacked .brand { margin-left: auto; margin-right: auto; }   /* portal.js sets .stacked when the buttons have dropped under the logo */
.user { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.user-chip {
  display: flex; align-items: center; gap: 10px;
  background: var(--card); border-radius: 12px; padding: 6px 14px 6px 6px;
  color: var(--text-strong);
}
.avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--nested); color: var(--text-strong);
  display: grid; place-items: center; font-weight: 600; overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.bell { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; display: grid; place-items: center;
  background: rgba(16,185,129,.18); color: #10b981; transition: background .15s, color .15s; }
.bell:hover { background: rgba(16,185,129,.30); }
.bell[aria-pressed="false"] { background: var(--card); color: #737373; }
.bell[aria-pressed="false"]:hover { background: var(--nested); }
.bell:disabled { opacity: .6; cursor: default; }
.bell svg { width: 26px; height: 26px; fill: currentColor; }
.bell svg .slash { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.user-meta { line-height: 16px; }
.user-meta small { display: block; color: var(--text); font-size: 12px; }

/* Base button: same box as the admin tabs (.tab) - 36 px high, 16 px side padding, 10 px radius. .btn.small (32 px) is set per page. */
.btn {
  height: 36px; padding: 0 16px; border-radius: 10px; border: 0; cursor: pointer;
  background: var(--nested); color: var(--text-strong); font: inherit; font-weight: 600;
}
.btn:hover { filter: brightness(1.15); }
a.btn { display: inline-grid; place-items: center; }
.btn-admin { background: #f97316; color: #fff; }
/* Pager under long lists (orders, users, catalog): row count + page size 20 / 50 + navigation */
.pager { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 14px; }
.pager .grow { flex: 1; }
.pager select { height: 32px; padding: 0 8px; border-radius: 10px; border: 1px solid var(--nested); background: var(--panel); color: var(--text-strong); font: inherit; outline: none; cursor: pointer; }
.pager select:focus { border-color: var(--primary); }
.pager input[type=number] { width: 64px; height: 32px; padding: 0 8px; border-radius: 10px; text-align: center; }

/* Login */
.center { flex: 1; display: grid; place-items: center; padding: 24px; }
.login-card {
  width: 100%; max-width: 420px; background: var(--card);
  border-radius: 16px; padding: 40px 32px; text-align: center;
}
.login-card .logo { width: 88px; height: 40px; fill: var(--text-strong); margin-bottom: 20px; }
h1 { margin: 0 0 8px; color: var(--text-strong); font-size: 22px; line-height: 30px; }
.lead { margin: 0 0 28px; }
.tg-slot { min-height: 48px; display: flex; justify-content: center; }
.error {
  margin: 0 0 20px; padding: 12px 16px; border-radius: 12px;
  background: var(--danger-tint); color: var(--danger); text-align: left;
}
.hint { margin-top: 24px; font-size: 12px; }
.notice {
  margin: 0; padding: 12px 16px; border-radius: 12px; text-align: left;
  background: var(--nested); color: var(--text-strong);
}
.notice code { color: var(--primary); }

/* Services */
.content { padding: 12px 28px 40px; max-width: 1040px; width: 100%; margin: 0 auto; }
.content h1 { font-size: 24px; margin-bottom: 4px; }
.content .lead { margin-bottom: 28px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.service {
  display: block; background: var(--card); border-radius: 16px; padding: 22px 24px;
  border: 1px solid transparent; transition: border-color .15s;
}
.service:hover { border-color: var(--primary); }                                  /* hover only recolours the border: blue for 3D print, green for firmware (no tint, no lift) */
.service[data-service="firmware"]:hover { border-color: var(--success); }
.service[data-service="firmware"] .icon { background: rgba(16,185,129,.12); color: var(--success); }
.service .icon {
  width: 56px; height: 56px; border-radius: 12px; display: grid; place-items: center;
  background: var(--primary-tint); color: var(--primary); margin-bottom: 20px;
}
.service .icon svg { width: 28px; height: 28px; }
.service h2 { margin: 0 0 6px; color: var(--text-strong); font-size: 18px; line-height: 26px; }
.service { display: flex; flex-direction: column; }
.service .head { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.service .head .icon { margin-bottom: 0; flex: none; }
.service .head h2 { margin: 0; }
.service p { margin: 0; }
.service { position: relative; overflow: hidden; }
/* «Як це працює?» tab in the top-right corner of a banner: flush with the card corner (its top-right follows the banner's 16 px radius through
   overflow:hidden), lower-left corner rounded with the same 16 px; blue for 3D print, green for firmware. It links to the help page of the service.
   The banner's own link (.service-link) is stretched over the whole card; the tab lies above it. */
.service .service-link { display: block; color: inherit; }
.service .service-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.service .service-link:focus-visible { outline: none; }
.service .service-link:focus-visible::after { outline: 2px solid var(--primary); outline-offset: -2px; }
.service .how { position: absolute; top: 0; right: 0; z-index: 1; height: 36px; padding: 0 20px; display: inline-flex; align-items: center;
  background: var(--primary); color: #fff; font-weight: 600; cursor: pointer; user-select: none;
  border-radius: 0 0 0 16px; transition: filter .15s; }
.service .how:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.service .how:hover { filter: brightness(1.12); }
.service[data-service="firmware"] .how { background: var(--success); }
/* ERP banners: amber */
.service[data-service^="erp_"]:hover { border-color: #f59e0b; }
.service[data-service^="erp_"] .icon { background: rgba(245,158,11,.14); color: #f59e0b; }
.service[data-service^="erp_"] .how { background: #f59e0b; color: #171717; }
.service.locked .how { background: var(--nested); color: var(--text); }
.service .go { margin-top: auto; }
.service .go { color: var(--primary); font-weight: 600; }
.empty { background: var(--card); border-radius: 16px; padding: 28px; }
.group { margin: 28px 0 14px; font-size: 16px; color: var(--text-strong); }
.group:first-of-type { margin-top: 0; }
/* «Фрезер та лазер» banners: orange; no page behind them yet, so they carry the .locked look (dimmed, not clickable) and the «Скоро» tab.
   Remove the .locked class from a banner once its page exists and it turns orange and active. */
.service[data-soon]:not(.locked) { cursor: default; }
.service[data-soon]:not(.locked):hover { border-color: transparent; }
.service[data-soon]:not(.locked) .icon { background: rgba(249,115,22,.14); color: #f97316; }
.service[data-soon]:not(.locked) .how { background: #f97316; cursor: default; }
.service[data-soon] .how:hover { filter: none; }
.service.locked { opacity: .45; cursor: not-allowed; }
.service.locked:hover { border-color: transparent; background: var(--card); transform: none; }
.service.locked .icon { background: rgba(255,255,255,.06); color: #8a8f98; }
[hidden] { display: none !important; }
@media (max-width: 600px) {
  body { padding: 8px; }
  .panel { border-radius: 16px; }
  .topbar, .content { padding-left: 16px; padding-right: 16px; }
  .user-meta { display: none; }
  .topbar { flex-wrap: wrap; }
  .user { flex-wrap: wrap; gap: 8px; }
  .btn { padding: 0 12px; }
  .page-title { text-align: left; }
}