/* GENERATED FILE. DO NOT EDIT: change the sources and rebuild (node _dev_materials/css-sources/build_css_bundle.js).
 * Source of truth, inserted verbatim in exactly this order (order matters for specificity ties - see the sources
 * manifest, css_bundle_sources.json, before reordering anything):
 *    1. _dev_materials/css-sources/00-foundation.css
 *    2. _dev_materials/css-sources/01-portal-handbook.css
 *    3. _dev_materials/css-sources/02-shell-auth.css
 *    4. _dev_materials/css-sources/03-metal-journal.css
 *    5. _dev_materials/css-sources/04-metal-invoice.css
 *    6. _dev_materials/css-sources/06-backup.css
 *    7. _dev_materials/css-sources/07-shared-controls.css
 *    8. _dev_materials/css-sources/08-record-details.css
 *    9. _dev_materials/css-sources/09-analytics.css
 * Freshness is checked by --check and by css_bundle_smoke_test.js.
 */
/* ==== _dev_materials/css-sources/00-foundation.css ==== */
/* Keep the page width stable when one tab needs a scrollbar and another does not. */
html { scrollbar-gutter: stable; }

/* Таблица журнала */
    .table-container {
      width: 100%;
      overflow: hidden;
      margin-top: 6px;
      border-radius: 10px;
      border: 1px solid rgba(56, 189, 248, 0.15);
      background: rgba(15, 23, 42, 0.6);
    }

@media (max-width: 900px) {

.table-container { display: none; }

}

@media print {

@page { size: A4 portrait; margin: 0; }

body * {
        visibility: hidden !important;
      }

}

/* Стили для портала и меню разделов */
    .portal-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      gap: 14px;
      margin-top: 18px;
    }

.badge-dev {
      background: rgba(255, 255, 255, 0.08);
      color: #94a3b8;
      font-size: 10px;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: 6px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      white-space: nowrap;
    }

* { 
      box-sizing: border-box; 
      margin: 0; 
      padding: 0; 
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; 
      -webkit-tap-highlight-color: transparent; 
    }

html {
      background-color: #05080d;
      height: 100%;
    }

body {
      position: relative;
      isolation: isolate;
      background: #05080d;
      color: #f1f5f9; 
      display: flex; 
      justify-content: center; 
      min-height: 100vh; 
      padding-top: max(16px, calc(env(safe-area-inset-top) + 8px));
      padding-bottom: max(92px, calc(env(safe-area-inset-bottom) + 76px));
      padding-left: max(14px, env(safe-area-inset-left));
      padding-right: max(14px, env(safe-area-inset-right));
    }

body.otk-offline-readonly {
      padding-top: max(46px, calc(env(safe-area-inset-top) + 38px));
    }

body.otk-offline-readonly:has(.test-environment-banner) {
      padding-top: max(80px, calc(env(safe-area-inset-top) + 72px));
    }

.test-environment-banner {
      position: fixed;
      top: max(6px, env(safe-area-inset-top));
      left: 50%;
      z-index: 100002;
      width: max-content;
      max-width: calc(100vw - 24px);
      padding: 6px 12px;
      border: 1px solid #f59e0b;
      border-radius: 999px;
      background: #7c2d12;
      color: #fff7ed;
      box-shadow: 0 5px 18px rgba(0, 0, 0, .35);
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .04em;
      text-align: center;
      transform: translateX(-50%);
      pointer-events: none;
    }

.otk-offline-banner {
      position: fixed;
      top: max(6px, env(safe-area-inset-top));
      left: 50%;
      z-index: 100002;
      width: max-content;
      max-width: calc(100vw - 24px);
      padding: 6px 12px;
      border: 1px solid #2563eb;
      border-radius: 999px;
      background: #1e3a5f;
      color: #eff6ff;
      box-shadow: 0 5px 18px rgba(0, 0, 0, .35);
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .04em;
      text-align: center;
      transform: translateX(-50%);
      pointer-events: none;
    }

body:has(.test-environment-banner) .otk-offline-banner {
      top: max(40px, calc(env(safe-area-inset-top) + 34px));
    }

body::after {
      content: "";
      position: fixed;
      inset: 0;
      z-index: -1;
      pointer-events: none;
      background:
        radial-gradient(ellipse 760px 520px at -5% -4%, rgba(239, 68, 68, .18), transparent 72%),
        radial-gradient(ellipse 760px 520px at 105% 104%, rgba(14, 165, 233, .18), transparent 72%),
        radial-gradient(ellipse 520px 360px at 58% -12%, rgba(37, 99, 235, .045), transparent 74%),
        repeating-linear-gradient(118deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 88px),
        linear-gradient(145deg, #05080d 0%, #060a11 52%, #05080d 100%);
    }

body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      opacity: .22;
      background-image: radial-gradient(circle, rgba(148, 163, 184, .17) 0 1px, transparent 1.2px);
      background-size: 28px 28px;
      mask-image: linear-gradient(to bottom, rgba(0,0,0,.72), transparent 88%);
      -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.72), transparent 88%);
    }

.ambient-particles {
      position: fixed;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
      pointer-events: none;
      opacity: .9;
    }

.ambient-sheen {
      position: fixed;
      top: -35vh;
      left: -34vw;
      width: 30vw;
      height: 170vh;
      z-index: 0;
      pointer-events: none;
      opacity: .12;
      transform: rotate(18deg);
      background: linear-gradient(90deg, transparent, rgba(125, 211, 252, .055), rgba(255, 255, 255, .026), transparent);
      filter: blur(12px);
      animation: ambientSheenDrift 46s linear infinite;
    }

@keyframes ambientSheenDrift {
      0% { transform: translateX(-12vw) rotate(18deg); }
      48%, 100% { transform: translateX(168vw) rotate(18deg); }
    }

@media (prefers-reduced-motion: reduce) {

.ambient-sheen { animation: none; opacity: .07; left: 42vw; }

}

.app-container {
     width: 100%;
     max-width: 100%;
     padding: 10px;
     box-sizing: border-box;
     position: relative;
     z-index: 1;
    }

@media (min-width: 992px) {

.app-container {
    max-width: 1800px;
    margin: 0 auto;
    padding: 14px 18px;
  }

:is(#metal-screen, #tmc-screen) > .card { padding-block: 20px; }

.table-responsive-box {
    overflow-x: visible;
    }

}

@media (max-width: 991px) {

.table-responsive-box {
    overflow-x: auto; /* Горизонтальный скролл только на смартфонах */
    -webkit-overflow-scrolling: touch;
    }

}

.card {
      background: transparent;
      border: 1px solid transparent;
      border-radius: 16px;
      padding: 16px;
      margin-bottom: 12px;
      box-shadow: none;
    }

/* Keep the working screens close to the phone edges while respecting display cutouts. */
@media (max-width: 600px) {
  body {
    padding-top: max(2px, env(safe-area-inset-top));
    padding-left: max(4px, env(safe-area-inset-left));
    padding-right: max(4px, env(safe-area-inset-right));
  }

  body.otk-offline-readonly,
  body.otk-offline-readonly:has(.test-environment-banner) {
    padding-top: max(2px, env(safe-area-inset-top));
  }

  .test-environment-banner {
    top: max(2px, env(safe-area-inset-top));
    background: rgba(124, 45, 18, .72);
  }

  .app-container { padding-inline: 4px; }
  .card { padding-inline: 8px; }
}

.title-h1 {
      font-size: 16px; 
      font-weight: 700; 
      color: #38bdf8; 
      margin-bottom: 6px; 
      display: flex; 
      align-items: center;
      justify-content: center;
      text-align: center;
      gap: 8px; 
    }

.subtitle { font-size: 13px; color: #94a3b8; line-height: 1.4; text-align: center; }

.menu-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 14px;
      padding-top: 2px;
    }

/* Та же техника маски (значок = --metal-icon поверх currentColor), но отдельными классами от handbook-* —
       иконка приёмки металла не входит в набор значков справочника, и guard-тест считает их количество раздельно. */
    .metal-menu-icon { color: #e2e8f0; }

.metal-menu-icon::before,
    .metal-title-icon::before {
      content: "";
      background: currentColor;
      -webkit-mask: var(--metal-icon) center / contain no-repeat;
      mask: var(--metal-icon) center / contain no-repeat;
    }

.metal-menu-icon::before { width: 34px; height: 34px; transition: color .22s ease, transform .22s ease; }

.metal-title-icon { width: 1.4em; height: 1.4em; display: inline-grid; place-items: center; flex: none; color: #38bdf8; }

.metal-title-icon::before { width: 1.25em; height: 1.25em; flex: none; }

.metal-icon-rods { --metal-icon: url('../assets/icons/handbook/metal-rods.svg?v=1.14.4'); }

.workflow-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(2, 6, 23, 0.82);
}

.workflow-card {
  width: min(460px, 100%);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  border: 1px solid #334155;
  border-radius: 14px;
  padding: 18px;
  background: #172033;
  box-shadow: 0 24px 60px rgba(0,0,0,0.55);
}

@media (max-width: 900px) {

.workflow-card { padding: 15px; }

}

/* Theme switcher */
:root { color-scheme: dark; }

/* Light theme. Dark stays the safe default when no preference is saved. */
html[data-theme="light"] {
  color-scheme: light;
}

html[data-theme="light"] body {
  color: #172033;
}

html[data-theme="light"] body::before {
  opacity: .48;
  background-image: radial-gradient(circle, rgba(51, 65, 85, .25) 0 1px, transparent 1.25px);
}

html[data-theme="light"] .ambient-particles {
  opacity: .95;
  mix-blend-mode: multiply;
}

html[data-theme="light"] .ambient-sheen {
  opacity: .32;
  background: linear-gradient(90deg, transparent, rgba(2, 132, 199, .14), rgba(255, 255, 255, .5), transparent);
}

html[data-theme="light"] .card { background: transparent; border-color: transparent; box-shadow: none; }

html[data-theme="light"] .badge-dev { border-color: #cbd5e1; color: #3f5165; }

html[data-theme="light"] .metal-menu-icon { color: #365f7b; }

html[data-theme="light"] .metal-title-icon { color: #075985; }

html[data-theme="light"] .user-fullname { color: #172033; }

html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder { color: #3f5165; opacity: 1; }

html[data-theme="light"] input[type="date"] { color-scheme: light; }

html[data-theme="light"] .table-container { border-color: #c4d4e2; }

html[data-theme="light"] .certificate-warning { color: #8a4b00; }

html[data-theme="light"] .quality-metric {
  border-color: #c2d3e0;
  background: #edf3f7;
}

html[data-theme="light"] .quality-metric > span,
html[data-theme="light"] .quality-detail-heading > span { color: #3b4e62; }

html[data-theme="light"] .user-editor { background: rgba(232, 239, 245, .65); }

html[data-theme="light"] .history-entry-title { color: #1e293b; }

html[data-theme="light"] .history-entry-meta { color: #3f5165; }

html[data-theme="light"] .history-entry-comment { color: #334155; }

html[data-theme="light"] .supplier-suggestions {
  border-color: #99bdd2;
  background: #fff;
  box-shadow: 0 12px 30px rgba(30, 64, 92, .18);
  scrollbar-color: #9cb3c5 #eef3f7;
}

html[data-theme="light"] .metric-card.fe-card { border-color: #60a5fa; }

html[data-theme="light"] .metal-composition-item { border-color: #bfd0dc; background: #f8fafc; }

html[data-theme="light"] .tol-sign { color: #075985; }

html[data-theme="light"] .metric-card.highlighted .metric-param,
html[data-theme="light"] .metric-card.highlighted .tol-sign { color: #92400e; }
/* ==== _dev_materials/css-sources/01-portal-handbook.css ==== */
.btn-menu {
      --accent-rgb: 56, 189, 248;
      background: rgba(22, 31, 46, 0.68);
      border: 1px solid rgba(56, 189, 248, 0.12);
      color: #e2e8f0;
      min-height: 112px;
      padding: 18px;
      border-radius: 14px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 14px;
      box-shadow: inset 3px 0 0 rgba(var(--accent-rgb), .68), 0 4px 12px rgba(0,0,0,0.25);
      min-width: 0;
      transition: background-color .28s ease, border-color .28s ease, box-shadow .28s ease, transform .28s ease;
      position: relative;
      overflow: hidden;
    }

.btn-menu:hover {
      background: rgba(27, 40, 60, .78);
    }

.btn-menu:active { background: #23354d; transform: scale(0.98); }

.btn-menu-icon {
      width: 46px;
      height: 46px;
      display: grid;
      place-items: center;
      flex: none;
      border-radius: 12px;
      background: rgba(var(--accent-rgb), .1);
      border: 1px solid rgba(var(--accent-rgb), .16);
      box-shadow: 0 0 18px rgba(var(--accent-rgb), .07);
      font-size: 23px;
      transition: background-color .28s ease, border-color .28s ease, box-shadow .28s ease;
    }

.handbook-menu-icon { color: #e2e8f0; }

.handbook-menu-icon::before,
    .handbook-title-icon::before,
    .handbook-section-title::before {
      content: "";
      background: currentColor;
      -webkit-mask: var(--handbook-icon) center / contain no-repeat;
      mask: var(--handbook-icon) center / contain no-repeat;
    }

.handbook-menu-icon::before {
      width: 34px;
      height: 34px;
      transition: color .22s ease, transform .22s ease;
    }

.handbook-title-icon {
      width: 1.4em;
      height: 1.4em;
      display: inline-grid;
      place-items: center;
      flex: none;
      color: #38bdf8;
    }

.handbook-title-icon::before,
    .handbook-section-title::before { width: 1.25em; height: 1.25em; flex: none; }

.handbook-section-title::before { color: #38bdf8; }

.handbook-icon-standards { --handbook-icon: url('../assets/icons/handbook/standards.svg?v=1.13.38-test.37'); }

.handbook-icon-gost { --handbook-icon: url('../assets/icons/handbook/flange-gost.svg?v=1.13.38-test.37'); }

.handbook-icon-asme { --handbook-icon: url('../assets/icons/handbook/flange-asme.svg?v=1.13.38-test.37'); }

.handbook-icon-rings { --handbook-icon: url('../assets/icons/handbook/metal-rings.svg?v=1.13.38-test.37'); }

.handbook-icon-gaskets { --handbook-icon: url('../assets/icons/handbook/elastic-gaskets.svg?v=1.13.38-test.37'); }

.handbook-icon-steel-blind { --handbook-icon: url('../assets/icons/handbook/steel-blind.svg?v=1.13.38-test.37'); }

.handbook-icon-spectacle-blind { --handbook-icon: url('../assets/icons/handbook/spectacle-blind.svg?v=1.13.38-test.37'); }

.handbook-icon-chemistry { --handbook-icon: url('../assets/icons/handbook/chemistry.svg?v=1.13.38-test.37'); }

.btn-menu-copy {
      min-width: 0;
      display: flex;
      flex: 1;
      flex-direction: column;
      align-items: flex-start;
      gap: 5px;
      text-align: left;
    }

.btn-menu-desc {
      color: #64748b;
      font-size: 11px;
      font-weight: 550;
      line-height: 1.35;
    }

.btn-menu-arrow {
      flex: none;
      color: rgb(var(--accent-rgb));
      font-size: 17px;
      opacity: .75;
      transition: opacity .28s ease, transform .28s ease, filter .28s ease;
    }

.btn-menu:hover .btn-menu-icon {
      background: rgba(var(--accent-rgb), .15);
      border-color: rgba(var(--accent-rgb), .3);
      box-shadow: 0 0 23px rgba(var(--accent-rgb), .14);
    }

.btn-menu:hover .handbook-menu-icon { color: rgb(var(--accent-rgb)); }

.btn-menu:hover .handbook-menu-icon::before { transform: scale(1.04); }

.btn-portal:hover:not(.btn-disabled) .handbook-menu-icon { color: #38bdf8; }

.btn-menu:hover .btn-menu-arrow {
      opacity: .95;
      filter: brightness(1.12);
      transform: translateX(2px);
    }

#handbook-screen .btn-menu:nth-child(1) { --accent-rgb: 56, 189, 248; }

#handbook-screen .btn-menu:nth-child(2) { --accent-rgb: 96, 165, 250; }

#handbook-screen .btn-menu:nth-child(3) { --accent-rgb: 244, 63, 94; }

#handbook-screen .btn-menu:nth-child(4) { --accent-rgb: 196, 181, 253; }

#handbook-screen .btn-menu:nth-child(5) { --accent-rgb: 248, 113, 113; }

#handbook-screen .btn-menu:nth-child(6) { --accent-rgb: 45, 212, 191; }

#handbook-screen .btn-menu:nth-child(7) { --accent-rgb: 74, 222, 128; }

.handbook-hero-card {
      margin-bottom: 14px;
      padding: 20px 22px;
      background: transparent;
      position: relative;
      overflow: hidden;
    }

/* С учётом линии и 2px поля меню расстояние до первого ряда разделов равно 16px. */
#handbook-screen .handbook-hero-card { padding-bottom: 0; margin-bottom: 13px; }

.handbook-hero-card::before,
    .portal-dashboard-card::before {
      content: "";
      position: absolute;
      inset: 0 16% auto;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(125, 211, 252, .55), transparent);
      pointer-events: none;
    }

.handbook-measurement-row {
      display: flex;
      justify-content: center;
      margin-top: 12px;
    }

#handbook-section-screen .handbook-measurement-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
      align-items: center;
}

#handbook-section-screen .handbook-section-back {
      grid-column: 1;
      justify-self: start;
}

#handbook-section-screen .handbook-section-back .ico {
      width: 16px;
      height: 16px;
}

#handbook-section-screen .handbook-measurement-button:not(.handbook-section-back) { grid-column: 2; }

@media (max-width: 600px) {
  #handbook-section-screen .handbook-section-back { width: 38px; padding: 0; }
  #handbook-section-screen .handbook-section-back span { display: none; }
}

.handbook-measurement-button {
      min-height: 38px;
      padding: 8px 14px;
      border: 1px solid rgba(56, 189, 248, .32);
      border-radius: 11px;
      background: rgba(14, 165, 233, .1);
      color: #bae6fd;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      font: inherit;
      font-size: 12px;
      font-weight: 800;
      cursor: pointer;
      transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
    }

.handbook-measurement-button:hover {
      background: rgba(14, 165, 233, .17);
      border-color: rgba(56, 189, 248, .52);
    }

.handbook-measurement-button.active {
      color: #bbf7d0;
      background: rgba(34, 197, 94, .14);
      border-color: rgba(74, 222, 128, .55);
      box-shadow: 0 0 20px rgba(34, 197, 94, .11);
    }

.portal-dashboard-card { padding: 22px; position: relative; overflow: hidden; }

@media (min-width: 700px) {

#handbook-screen .menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

}

@media (min-width: 1000px) {

#handbook-screen .menu-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

#handbook-screen .btn-menu:last-child { grid-column: 2; }

}

@media (max-width: 699px) {

.portal-grid { grid-template-columns: minmax(0, 1fr); }

#handbook-screen:not(.hidden) {
        display: flex;
        flex-direction: column;
        height: calc(100dvh - 238px);
        min-height: 0;
        overflow: hidden;
      }

#handbook-screen .menu-grid {
        flex: 1 1 auto;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(4, minmax(0, 1fr));
        gap: 8px;
        min-height: 0;
      }

.portal-dashboard-card,
      .handbook-hero-card { padding: 15px; }

#handbook-screen .handbook-hero-card { margin-bottom: 3px; padding: 10px 12px; }

#handbook-screen .title-h1 { margin-bottom: 3px; font-size: 14px; line-height: 1.2; }

#handbook-screen .subtitle { font-size: 10.5px; line-height: 1.25; }

#handbook-screen .handbook-measurement-row { margin-top: 6px; }

#handbook-screen .handbook-measurement-button { min-height: 30px; padding: 5px 10px; font-size: 10px; }

#handbook-screen .btn-menu {
        width: 100%;
        height: 100%;
        min-height: 0;
        padding: 8px;
        gap: 8px;
        border-radius: 11px;
      }

#handbook-screen .btn-menu:last-child { grid-column: 1 / -1; min-height: 0; }

#handbook-screen .btn-menu-icon { width: 34px; height: 34px; border-radius: 9px; font-size: 18px; }

#handbook-screen .handbook-menu-icon::before { width: 25px; height: 25px; }

#handbook-screen .btn-menu-copy { gap: 4px; }

#handbook-screen .btn-text { font-size: 11.5px; line-height: 1.2; overflow: visible; }

#handbook-screen .btn-menu-desc {
        display: -webkit-box;
        overflow: hidden;
        color: #8293aa;
        font-size: 9px;
        line-height: 1.25;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
      }

#handbook-screen .btn-menu-arrow { display: none; }

}

@media print {

.quick-nav,
      .handbook-measurement-row { display: none !important; }

body::after,
      body::before,
      .ambient-particles,
      .ambient-sheen { display: none !important; }

}

.search-box { 
      display: flex; 
      gap: 8px; 
      margin-top: 10px; 
      position: relative;
    }

.input-wrap {
      position: relative;
      flex: 1;
      display: flex;
      align-items: center;
    }

.section-helper {
      margin-top: 8px;
      font-size: 12px;
      color: #64748b;
      line-height: 1.4;
    }

.metal-catalog-toggle {
      border-color: rgba(56, 189, 248, 0.42);
      color: #7dd3fc;
      font-family: inherit;
      font-weight: 750;
    }

.metal-catalog {
      margin-top: 10px;
    }

.metal-catalog-toolbar {
      justify-content: space-between;
      color: #cbd5e1;
    }

.metal-catalog-toolbar input {
      font: inherit;
    }

.metal-catalog-list {
      display: grid;
      overflow-y: auto;
      padding: 1px 4px 1px 1px;
    }

.metal-catalog-item {
      display: grid;
      gap: 3px;
      min-width: 0;
      color: #e2e8f0;
      text-align: left;
      cursor: pointer;
    }

.metal-catalog-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.metal-catalog-item:hover, .metal-catalog-item:focus-visible { outline: none; }

.metal-catalog-empty { grid-column: 1 / -1; padding: 18px; color: #94a3b8; text-align: center; }

.result-wrapper {
      margin-top: 14px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

.res-header-card {
      border: 1px solid rgba(56, 189, 248, 0.18);
      border-radius: 12px;
      padding: 12px 14px;
    }

.res-standard { font-size: 13px; font-weight: 700; color: #38bdf8; }

.res-details { font-size: 14px; color: #f1f5f9; margin-top: 2px; font-weight: 600; }

.res-analog-badge {
      display: inline-block;
      background: rgba(30, 58, 95, 0.7);
      color: #38bdf8;
      border: 1px solid #0284c7;
      padding: 2px 8px;
      border-radius: 6px;
      font-size: 11px;
      font-weight: 700;
      margin-top: 6px;
    }

@keyframes svgReveal {
      from {
        opacity: 0;
        transform: scale(0.97);
      }
      to {
        opacity: 1;
        transform: scale(1);
      }
    }

@media (max-width: 699px) and (max-height: 700px) {

#handbook-screen:not(.hidden) { height: calc(100dvh - 218px); }

#handbook-screen .handbook-hero-card { padding: 7px 10px; }

#handbook-screen .subtitle { display: none; }

#handbook-screen .btn-menu { padding: 6px 7px; }

}

.scheme-card {
      padding: 14px 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
    }

.scheme-stage {
      width: 100%;
      min-width: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      padding: 4px 8px 8px;
    }

.scheme-header {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 8px 8px;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

.scheme-header-actions {
      display: flex;
      align-items: center;
      gap: 10px;
    }

.scheme-header-hint {
      font-size: 10px;
    }

.scheme-svg-container {
      display: block;
      width: min(100%, 620px);
      max-width: 620px;
      height: auto;
      max-height: 650px;
      overflow: visible;
      animation: svgReveal 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

.scheme-card-atk_rev .scheme-svg-container {
      width: min(100%, 720px);
      max-width: 720px;
      max-height: 700px;
    }

.scheme-drawing-stack {
      width: 100%;
      display: grid;
      gap: 12px;
      justify-items: center;
    }

.scheme-drawing-stack-atk-rev {
      width: min(100%, 760px);
      grid-template-columns: 1fr;
    }

.scheme-drawing-panel {
      width: 100%;
      min-width: 0;
      border: 1px solid rgba(100, 116, 139, .2);
      border-radius: 10px;
      background: rgba(15, 23, 42, .28);
      overflow: hidden;
    }

.scheme-drawing-label {
      padding: 7px 10px 2px;
      color: #94a3b8;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .5px;
      text-transform: uppercase;
    }

.scheme-card-atk_rev .scheme-drawing-panel .scheme-svg-container {
      width: 100%;
      max-width: none;
      max-height: none;
      overflow: hidden;
    }

.scheme-card-atk_rev .scheme-drawing-panel-section-mobile-left,
    .scheme-card-atk_rev .scheme-drawing-panel-section-mobile-right {
      display: none;
    }

.res-block-title {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.6px;
      color: #64748b;
      margin: 10px 0 6px 2px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

.res-block-title::before {
      content: "";
      display: inline-block;
      width: 3px;
      height: 10px;
      background: #38bdf8;
      border-radius: 2px;
    }

.metrics-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
    }

.metric-card {
      border: 1px solid rgba(255, 255, 255, 0.08);
      padding: 8px 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      cursor: pointer;
      transition: all 0.2s ease;
    }

.metric-card:active { transform: scale(0.96); }

/* .highlighted.highlighted (не .highlighted) - специфичность должна побеждать .fe-card (тот же вес 2 класса), а элемент
       может иметь оба класса одновременно (подсветка по параметру приходит отдельно от отметки "по ГОСТ и ASME"). */
    .metric-card.highlighted.highlighted {
      background: rgba(30, 58, 95, 0.85);
      border-color: #facc15;
      box-shadow: 0 0 12px rgba(250, 204, 21, 0.35);
    }

.metric-card.fe-card {
      background: rgba(23, 37, 84, 0.7);
      border-color: #3b82f6;
    }

.metric-param {
      font-size: 11px;
      font-weight: 700;
      color: #7dd3fc;
      margin-bottom: 2px;
      letter-spacing: 0.2px;
    }

.metric-card.highlighted .metric-param {
      color: #facc15;
    }

.metric-val {
      font-size: 13px;
      font-weight: 700;
      color: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 3px;
    }

.dim-nominal {
      font-size: 15px;
      font-weight: 800;
      color: #f8fafc;
    }

.dim-tol-badge {
      font-size: 13px;
      font-weight: 800;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      padding: 2px 8px;
      border-radius: 6px;
      background: rgba(56, 189, 248, 0.12);
      border: 1px solid rgba(56, 189, 248, 0.28);
      color: #bae6fd;
      white-space: nowrap;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 1px;
    }

.tol-sign {
      font-size: 16px;
      font-weight: 900;
      line-height: 1;
      color: #38bdf8;
      margin-right: 2px;
    }

.metric-card.highlighted .dim-tol-badge {
      background: rgba(250, 204, 21, 0.15);
      border-color: rgba(250, 204, 21, 0.4);
      color: #fef08a;
    }

.metric-card.highlighted .tol-sign {
      color: #facc15;
    }

.fastener-section {
      border: 1px solid rgba(37, 99, 235, 0.4);
      padding: 12px;
    }

.fastener-section-title {
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 8px;
    }

.fastener-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
      gap: 8px;
    }

.fastener-item {
      border: 1px solid rgba(30, 58, 138, 0.6);
      border-radius: 8px;
      padding: 8px;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      cursor: pointer;
      transition: all 0.2s ease;
    }

.fastener-item:active { transform: scale(0.96); }

.fastener-item.highlighted {
      background: rgba(30, 58, 95, 0.9);
      border-color: #facc15;
      box-shadow: 0 0 12px rgba(250, 204, 21, 0.35);
    }

.fastener-label { font-size: 10px; font-weight: 600; color: #94a3b8; }

.fastener-value {
      font-size: 16px;
      font-weight: 800;
      margin-top: 2px;
    }

.error-card {
      background: rgba(39, 20, 24, 0.75);
      border: 1px solid #4c1d24;
      color: #fca5a5;
      border-radius: 12px;
      padding: 14px;
      font-size: 13px;
      line-height: 1.5;
    }

.dim-line { stroke-width: 1.2; stroke-dasharray: 2 2; transition: stroke 0.2s; }

.dim-arrow { stroke-width: 1.2; fill: none; transition: stroke 0.2s; }

.dim-tag {
    font-size: 9px;
    font-weight: 800;
    cursor: pointer;
    transition: fill 0.2s;
    paint-order: stroke fill;
    stroke-width: 1.5px;
    stroke-linejoin: round;
  }

.dim-tag-valued { font-size: 6.5px; letter-spacing: -0.1px; }

.dim-tag-with-tolerance { font-size: 6px; letter-spacing: -0.22px; }

.dim-group { cursor: pointer; }

/* .dim-active.dim-active (не .dim-active) - тот же вес (3 класса), что у мобильного оверрайда ниже
     (.scheme-card-atk_rev ... .dim-tag), а подсветка должна побеждать его на любой ширине экрана. */
  .dim-group.dim-active.dim-active .dim-tag {
    fill: #facc15;
    font-weight: 900;
    filter: drop-shadow(0 0 6px #eab308);
  }

@media (max-width: 600px) {

.scheme-card { padding: 12px 2px 8px; }

.scheme-stage { padding: 2px 0 6px; }

.scheme-header { padding-left: 8px; padding-right: 8px; }

.scheme-header-hint { display: none; }

.scheme-expand-button { min-height: 38px; padding: 7px 11px; }

.scheme-svg-container,
    .scheme-card-atk_rev .scheme-svg-container {
      width: 100%;
      max-width: 100%;
      max-height: none;
    }

.dim-tag { font-size: 11px; stroke-width: 1.8px; }

.dim-tag-valued { font-size: 10px; }

.dim-tag-with-tolerance { font-size: 8.4px; letter-spacing: -0.32px; }

.scheme-card-atk_rev .dim-tag-valued { font-size: 12px; }

.scheme-card-atk_rev .dim-tag-with-tolerance { font-size: 9.6px; }

.scheme-card-atk_rev .scheme-drawing-panel {
      overflow: hidden;
    }

.scheme-card-atk_rev .scheme-drawing-panel .scheme-svg-container {
      width: 100%;
      min-width: 0;
      max-width: 100%;
    }

.scheme-card-atk_rev .scheme-drawing-panel-detail .scheme-svg-container {
      width: 100%;
      min-width: 0;
    }

.scheme-card-atk_rev .scheme-drawing-panel-section { display: none; }

.scheme-card-atk_rev .scheme-drawing-panel-section-mobile-left,
    .scheme-card-atk_rev .scheme-drawing-panel-section-mobile-right {
      display: block;
    }

.scheme-card-atk_rev .scheme-drawing-panel-section-mobile-left .dim-tag,
    .scheme-card-atk_rev .scheme-drawing-panel-section-mobile-right .dim-tag {
      fill: #cbd5e1;
    }

.scheme-card-atk_rev .scheme-drawing-panel-section-mobile-left .dim-tag-valued,
    .scheme-card-atk_rev .scheme-drawing-panel-section-mobile-right .dim-tag-valued {
      font-size: 10px;
      letter-spacing: 0;
    }

.scheme-card-atk_rev .scheme-drawing-panel-section-mobile-left .dim-tag-with-tolerance,
    .scheme-card-atk_rev .scheme-drawing-panel-section-mobile-right .dim-tag-with-tolerance {
      font-size: 7.5px;
      letter-spacing: -0.18px;
    }

}

.dim-group.dim-active .dim-line {
    stroke: #facc15;
    stroke-width: 1.5;
  }

.dim-group.dim-active .dim-arrow {
    stroke: #facc15;
    stroke-width: 1.8;
    filter: drop-shadow(0 0 3px rgba(250, 204, 21, 0.75));
  }

.bolt-hole-rect {
      fill: #090e17;
      stroke: #64748b;
      stroke-width: 1.2;
      stroke-dasharray: 3 3;
      transition: all 0.2s;
      cursor: pointer;
    }

/* .bolt-hole-active трижды (не один раз) - вес должен побеждать html[data-theme="light"] .bolt-hole-rect (2 класса/атрибута
       + элемент), иначе fill в светлой теме перебивает подсветку активного отверстия. */
    .bolt-hole-active.bolt-hole-active.bolt-hole-active {
      fill: rgba(250, 204, 21, 0.15);
      stroke: #facc15;
      stroke-width: 2.2;
      stroke-dasharray: none;
      filter: drop-shadow(0 0 10px rgba(234, 179, 8, 0.9));
    }

.scheme-callout {
      position: absolute;
      z-index: 25;
      pointer-events: none;
      background: rgba(11, 17, 32, 0.95);
      border: 1px solid #facc15;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6), 0 0 6px rgba(250, 204, 21, 0.25);
      border-radius: 5px;
      padding: 2px 6px;
      display: flex;
      align-items: center;
      gap: 4px;
      transform: translate(-50%, -100%);
      margin-top: -6px;
      transition: top 0.15s ease-out, left 0.15s ease-out, opacity 0.15s ease;
      opacity: 0;
      visibility: hidden;
      white-space: nowrap;
    }

.scheme-callout::after {
      content: "";
      position: absolute;
      bottom: -4px;
      left: 50%;
      transform: translateX(-50%);
      border-left: 4px solid transparent;
      border-right: 4px solid transparent;
      border-top: 4px solid #facc15;
    }

.scheme-callout.is-visible {
      opacity: 1;
      visibility: visible;
    }

.scheme-callout.is-below {
      transform: translate(-50%, 0);
      margin-top: 8px;
    }

.scheme-callout.is-below::after {
      top: -4px;
      bottom: auto;
      border-top: 0;
      border-bottom: 4px solid #facc15;
    }

body.scheme-viewer-open { overflow: hidden; }

.scheme-viewer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: grid;
    place-items: center;
    padding: 12px;
    background: rgba(2, 6, 12, .88);
  }

.scheme-viewer-backdrop.hidden { display: none; }

.scheme-viewer-shell {
    width: min(1180px, 100%);
    height: min(92vh, 920px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(56, 189, 248, .35);
    border-radius: 14px;
    background: #090e17;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .65);
  }

.scheme-viewer-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(148, 163, 184, .18);
  }

.scheme-viewer-title { color: #e2e8f0; font-size: 14px; font-weight: 900; }

.scheme-viewer-subtitle { margin-top: 2px; color: #94a3b8; font-size: 11px; }

.scheme-viewer-actions { display: flex; align-items: center; gap: 6px; flex: none; }

.scheme-viewer-actions button {
    min-width: 42px;
    min-height: 42px;
    padding: 6px 9px;
    border: 1px solid #334155;
    border-radius: 9px;
    background: #111c2e;
    color: #e2e8f0;
    font-size: 18px;
    font-weight: 900;
    cursor: pointer;
  }

.scheme-viewer-actions .scheme-viewer-zoom { min-width: 64px; font-size: 12px; }

.scheme-viewer-actions .scheme-viewer-close { color: #fca5a5; }

.scheme-viewer-viewport {
    flex: 1;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    padding: 12px;
    touch-action: none;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
  }

.scheme-viewer-viewport.is-dragging { cursor: grabbing; }

.scheme-viewer-canvas {
    min-width: 0;
    margin: 0 auto;
    padding: 0;
    will-change: width;
  }

.scheme-viewer-canvas .scheme-svg-container {
    width: 100%;
    max-width: none;
    max-height: none;
    animation: none;
  }

.scheme-viewer-canvas .dim-group { pointer-events: none; }

.scheme-viewer-canvas .scheme-drawing-stack-atk-rev {
    width: 100%;
    max-width: none;
  }

@media (max-width: 600px) {

.scheme-viewer-backdrop { padding: 0; }

.scheme-viewer-shell { width: 100%; height: 100dvh; border: 0; border-radius: 0; }

.scheme-viewer-toolbar { align-items: flex-start; padding: 8px; }

.scheme-viewer-subtitle { max-width: 135px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.scheme-viewer-actions { gap: 4px; }

.scheme-viewer-actions button { min-width: 40px; min-height: 42px; padding: 5px 7px; }

.scheme-viewer-actions .scheme-viewer-zoom { min-width: 56px; }

.scheme-viewer-viewport { padding: 8px 4px 18px; }

}

.scheme-callout-param {
      font-size: 11px;
      font-weight: 800;
      color: #facc15;
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    }

.scheme-callout-val {
      font-size: 12px;
      font-weight: 700;
      color: #fff;
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      display: inline-flex;
      align-items: center;
      gap: 3px;
    }

.scheme-callout-val .dim-nominal {
      font-size: 12px;
    }

.scheme-callout-val .dim-tol-badge {
      padding: 0 4px;
      font-size: 10px;
    }

html[data-theme="light"] .res-header-card,
html[data-theme="light"] .journal-overview-bar,
html[data-theme="light"] .journal-toolbar,
html[data-theme="light"] .production-search-panel,
html[data-theme="light"] .tag-print-panel,
html[data-theme="light"] .journal-result-summary-panel,
html[data-theme="light"] .metal-journal-pagination {
  border-color: rgba(3, 105, 161, .2);
  background: rgba(255, 255, 255, .83);
  box-shadow: 0 9px 30px rgba(30, 64, 92, .11);
}

html[data-theme="light"] .handbook-hero-card {
  background: transparent;
}

html[data-theme="light"] .handbook-measurement-button {
  color: #075985;
  background: rgba(14, 165, 233, .08);
  border-color: rgba(2, 132, 199, .28);
}

html[data-theme="light"] .handbook-measurement-button.active {
  color: #166534;
  background: rgba(34, 197, 94, .1);
  border-color: rgba(22, 163, 74, .38);
}

html[data-theme="light"] .portal-heading span,
html[data-theme="light"] .title-h1,
html[data-theme="light"] .res-standard,
html[data-theme="light"] .production-search-title,
html[data-theme="light"] .passport-search-title,
html[data-theme="light"] .tag-print-title,
html[data-theme="light"] .journal-result-summary-title,
html[data-theme="light"] .record-detail-label,
html[data-theme="light"] .record-detail-section-title,
html[data-theme="light"] .metal-composition-label { color: #075985; }

html[data-theme="light"] .portal-heading strong,
html[data-theme="light"] .res-details,
html[data-theme="light"] .metal-list-context-title,
html[data-theme="light"] .journal-result-summary-panel strong,
html[data-theme="light"] .journal-primary,
html[data-theme="light"] .record-detail-value,
html[data-theme="light"] .metal-composition-value,
html[data-theme="light"] .workflow-title,
html[data-theme="light"] .auth-title,
html[data-theme="light"] .user-editor-title,
html[data-theme="light"] .managed-user-directory-toolbar,
html[data-theme="light"] .managed-user-name,
html[data-theme="light"] .quality-heading h2 { color: #172033; }

html[data-theme="light"] .subtitle,
html[data-theme="light"] .section-helper,
html[data-theme="light"] .btn-menu-desc,
html[data-theme="light"] .btn-portal-desc,
html[data-theme="light"] .journal-secondary,
html[data-theme="light"] .journal-controller-comment,
html[data-theme="light"] .journal-action-caption,
html[data-theme="light"] .journal-status-filter-wrap,
html[data-theme="light"] .tag-print-label,
html[data-theme="light"] .quality-note,
html[data-theme="light"] .quality-filters label,
html[data-theme="light"] .managed-user-role-line,
html[data-theme="light"] .managed-user-pins,
html[data-theme="light"] .workflow-description,
html[data-theme="light"] .workflow-field label,
html[data-theme="light"] .user-editor-field > span,
html[data-theme="light"] .auth-hint,
html[data-theme="light"] .scheme-header,
html[data-theme="light"] .scheme-drawing-label { color: #34495e; }

html[data-theme="light"] .btn-portal,
html[data-theme="light"] .btn-menu {
  border-color: rgba(3, 105, 161, .18);
  color: #1e293b;
  box-shadow: inset 3px 0 0 rgba(var(--accent-rgb, 56, 189, 248), .74), 0 5px 18px rgba(30, 64, 92, .1);
}

html[data-theme="light"] .btn-portal:hover:not(.btn-disabled),
html[data-theme="light"] .btn-menu:hover {
  border-color: rgba(var(--accent-rgb, 56, 189, 248), .58);
}

html[data-theme="light"] .btn-menu-icon,
html[data-theme="light"] .btn-portal-icon { background: rgba(var(--accent-rgb, 56, 189, 248), .1); }

html[data-theme="light"] .handbook-menu-icon { color: #365f7b; }

html[data-theme="light"] .handbook-title-icon,
html[data-theme="light"] .handbook-section-title::before { color: #075985; }

html[data-theme="light"] .metal-catalog { border-color: #bfd8e7; }

html[data-theme="light"] .metal-catalog-toolbar { color: #334155; }

html[data-theme="light"] .metal-catalog-toolbar input { color: #172033; color-scheme: light; }

html[data-theme="light"] .metal-catalog-item { border-color: #d2dee8; color: #172033; }

html[data-theme="light"] .metal-catalog-item strong { color: #075985; }

html[data-theme="light"] .metal-catalog-item:hover,
html[data-theme="light"] .metal-catalog-item:focus-visible { border-color: #0ea5e9; background: #edf8fe; }

html[data-theme="light"] .auth-backdrop,
html[data-theme="light"] .workflow-backdrop,
html[data-theme="light"] .site-dialog-backdrop,
html[data-theme="light"] .scheme-viewer-backdrop { background: rgba(44, 62, 80, .52); }

html[data-theme="light"] .scheme-card {
  border-color: #c2d1dd;
}

html[data-theme="light"] .scheme-drawing-panel { border-color: #ccd8e2; background: rgba(237, 243, 247, .7); }

html[data-theme="light"] .metric-card,
html[data-theme="light"] .fastener-section,
html[data-theme="light"] .fastener-item {
  border-color: #bfd0dc;
}

html[data-theme="light"] .metric-val,
html[data-theme="light"] .dim-nominal { color: #172033; }

html[data-theme="light"] .dim-tag { fill: #34495e; stroke: #f8fafc; }

html[data-theme="light"] .bolt-hole-rect { fill: #f8fafc; }

html[data-theme="light"] .scheme-callout { background: rgba(255, 255, 255, .97); }

html[data-theme="light"] .scheme-viewer-shell {
  border-color: #91bdd6;
  background: #f7fafc;
  box-shadow: 0 24px 70px rgba(24, 49, 71, .28);
}

html[data-theme="light"] .scheme-viewer-title { color: #172033; }

html[data-theme="light"] .scheme-viewer-subtitle { color: #3f5165; }

html[data-theme="light"] .scheme-viewer-actions button { border-color: #bdcddd; background: #edf3f7; color: #334155; }

html[data-theme="light"] .metric-param,
html[data-theme="light"] .res-block-title { color: #075985; }

html[data-theme="light"] .dim-tol-badge {
  border-color: #7cc7eb;
  color: #075985;
}

html[data-theme="light"] .metric-card.highlighted .dim-tol-badge {
  border-color: #e4b93f;
  background: #fef3c7;
  color: #854d0e;
}

/* ── Общая ширина экранов: содержимое вровень с логотипом слева и плашкой профиля справа ──
   Экранные карточки прозрачны, их боковой отступ (16–22px) только сужал содержимое относительно шапки. */
#core-otk-menu-screen > .card,
#handbook-screen > .card,
#handbook-section-screen > .card,
#metal-screen > .card,
#tmc-screen > .card { padding-inline: 0; }

/* Бирюзовая линия под шапкой — на всех экранах (у меню ОТК и главной справочника она уже есть). */
#handbook-section-screen > .card,
#metal-screen > .card { position: relative; }

#handbook-section-screen > .card::before,
#metal-screen > .card::before {
  content: "";
  position: absolute;
  inset: 0 16% auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(125, 211, 252, .55), transparent);
  pointer-events: none;
}

html[data-theme="light"] .handbook-hero-card::before,
html[data-theme="light"] .portal-dashboard-card::before,
html[data-theme="light"] #handbook-section-screen > .card::before,
html[data-theme="light"] #metal-screen > .card::before { background: linear-gradient(90deg, transparent, rgba(2, 132, 199, .5), transparent); }

/* ── Кнопки разделов (меню ОТК и справочник): плоский вид, без выпуклости; при наведении светлеют рамка и стрелка ── */
.btn-portal, .btn-menu { background-image: none; }

.btn-portal:hover:not(.btn-disabled), .btn-menu:hover { transform: none; border-color: rgba(var(--accent-rgb, 56, 189, 248), .6); }

.btn-menu:hover { box-shadow: inset 3px 0 0 rgba(var(--accent-rgb), .95); }

html[data-theme="light"] .btn-portal, html[data-theme="light"] .btn-menu { background-image: none; }

html[data-theme="light"] .btn-portal:hover:not(.btn-disabled), html[data-theme="light"] .btn-menu:hover { box-shadow: inset 3px 0 0 rgba(var(--accent-rgb, 56, 189, 248), .95), 0 4px 12px rgba(30, 64, 92, .1); }

/* ── Конструкторы запроса справочника (ГОСТ-фланцы, ASME, кольца, прокладки, заглушки АТК): значения в панелях сеткой, переключатели кнопками ── */
.query-builder { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; }

.query-builder.hidden { display: none; }

.qb-field { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 4px; flex: var(--qb-grow, 1) 1 0; order: var(--qb-order, 0); }

.qb-field[data-size="seg"] { flex-grow: 0; flex-basis: auto; }

.qb-field-label { color: #cbd5e1; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }

.qb-select { display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 100%; height: 40px; box-sizing: border-box; padding: 0 12px; border: 1px solid rgba(148, 163, 184, .3); border-radius: 8px; background-color: rgba(15, 23, 42, .6); color: #e2e8f0; font-family: inherit; font-size: 15px; font-weight: 700; text-align: left; cursor: pointer; }

.qb-select:focus { outline: none; border-color: #38bdf8; box-shadow: 0 0 0 3px rgba(56, 189, 248, .14); }

.qb-select.is-open { border-color: #38bdf8; }

.qb-field.is-inactive .qb-select { opacity: .4; pointer-events: none; }

.qb-select-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.qb-chevron { flex: none; width: 16px; height: 16px; fill: none; stroke: #7dd3fc; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s ease; }

.qb-select.is-open .qb-chevron { transform: rotate(180deg); }

.qb-segment { display: flex; gap: 6px; }

.qb-segment-button { flex: 1 1 auto; min-width: 52px; height: 40px; padding: 0 12px; border: 1px solid rgba(148, 163, 184, .3); border-radius: 8px; background: rgba(15, 23, 42, .6); color: #cbd5e1; font-size: 15px; font-weight: 800; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease; }

.qb-segment-button:hover { border-color: rgba(56, 189, 248, .6); color: #e0f2fe; }

.qb-segment-button.is-active { border-color: rgba(56, 189, 248, .8); background: rgba(56, 189, 248, .35); color: #fff; }

/* панель значений: полупрозрачная, фон за ней слегка размыт (только пока панель открыта) */
.qb-panel { position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; display: grid; grid-template-columns: repeat(var(--qb-cols, 2), minmax(var(--qb-min, 74px), 1fr)); gap: 6px; width: max-content; min-width: 100%; box-sizing: border-box; padding: 8px; border: 1px solid rgba(148, 163, 184, .3); border-radius: 10px; background: rgba(16, 26, 44, .82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 16px 40px rgba(0, 0, 0, .5); }

.qb-panel.hidden { display: none; }

.qb-option { height: 42px; padding: 0 12px; border: 1px solid rgba(148, 163, 184, .28); border-radius: 8px; background: rgba(148, 163, 184, .1); color: #e2e8f0; font-family: inherit; font-size: 15px; font-weight: 800; white-space: nowrap; cursor: pointer; }

.qb-option:hover { border-color: rgba(56, 189, 248, .6); }

.qb-option.is-active { border-color: rgba(56, 189, 248, .8); background: rgba(56, 189, 248, .35); color: #fff; }

.qb-option:disabled { opacity: .35; cursor: not-allowed; }

/* раздел с конструктором: вместо строк «Формат» и «Примеры» — сам конструктор; ручной ввод остаётся ниже */
#handbook-section-screen.is-query-builder .section-helper { display: none; }

#handbook-section-screen.is-query-builder .search-box { margin-top: 12px; }

html[data-theme="light"] .qb-field-label { color: #34495e; }

html[data-theme="light"] .qb-select, html[data-theme="light"] .qb-segment-button { background-color: rgba(255, 255, 255, .75); border-color: rgba(81, 113, 136, .4); color: #172033; }

html[data-theme="light"] .qb-segment-button.is-active { background: rgba(14, 165, 233, .3); border-color: #0284c7; color: #0c4a6e; }

html[data-theme="light"] .qb-chevron { stroke: #0369a1; }

html[data-theme="light"] .qb-panel { background: rgba(255, 255, 255, .84); border-color: rgba(71, 85, 105, .28); box-shadow: 0 16px 40px rgba(30, 64, 92, .22); }

html[data-theme="light"] .qb-option { background: rgba(81, 113, 136, .08); border-color: rgba(81, 113, 136, .35); color: #172033; }

html[data-theme="light"] .qb-option.is-active { background: rgba(14, 165, 233, .28); border-color: #0284c7; color: #0c4a6e; }

@media (max-width: 720px) {

.query-builder { flex-wrap: wrap; }

.qb-field { order: var(--qb-phone-order, 0); flex: 1 1 100%; }

.qb-field[data-size="sm"] { flex: 0 0 92px; }

.qb-field[data-size="fill"] { flex: 1 1 0; min-width: 120px; }

.qb-field[data-size="seg"] { flex: 1 1 auto; }

.qb-segment-button { min-width: 0; padding: 0; }

#handbook-section-screen[data-builder="gost"] .qb-field[data-qb-field="row"] { flex: 0 0 150px; }

#handbook-section-screen[data-builder="gost"] .qb-field[data-qb-field="row"] .qb-segment-button { flex: 0 0 72px; }

#handbook-section-screen[data-builder="gost"] .search-box { gap: 6px; }

#handbook-section-screen[data-builder="gost"] .input-query { height: 40px; box-sizing: border-box; }

#handbook-section-screen[data-builder="gost"] .btn-search { flex: 0 0 72px; width: 72px; min-width: 0; height: 40px; padding: 0; box-sizing: border-box; }

}

/* ── Справочник, раздел без конструктора («Химсостав»): примеры кнопками; подсказка в пустой области до первого поиска ── */
.examples-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.examples-label { margin-right: 4px; color: #94a3b8; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }

.section-empty-hint { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 34px 0 10px; padding: 28px 16px; border: 1px dashed rgba(148, 163, 184, .28); border-radius: 12px; color: #94a3b8; font-size: 14px; font-weight: 600; text-align: center; }

.section-empty-hint .ico { width: 34px; height: 34px; opacity: .5; }

#handbook-result-container:not(.hidden) ~ .section-empty-hint,
.section-helper:has(.metal-catalog:not(.hidden)) ~ .section-empty-hint { display: none; }

html[data-theme="light"] .examples-label { color: #34495e; }

html[data-theme="light"] .section-empty-hint { border-color: rgba(81, 113, 136, .35); color: #34495e; }

/* ── Справочник: результат (схема, плитки размеров), окно «Все марки», панели конструктора — единый стиль сайта ── */
.res-header-card { background: rgba(148, 163, 184, .08); border-color: rgba(148, 163, 184, .24); }

.scheme-card { background: rgba(15, 23, 42, .38); border: 1px solid rgba(148, 163, 184, .24); border-radius: 12px; }

.scheme-header { color: #94a3b8; }

.scheme-header-hint { color: #94a3b8; font-weight: 600; }

.scheme-expand-button, .scheme-toggle-button { min-height: 32px; padding: 5px 12px; border: 1px solid rgba(148, 163, 184, .35); border-radius: 8px; background: rgba(148, 163, 184, .1); color: #e2e8f0; font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; transition: background-color .15s ease, border-color .15s ease; }

.scheme-expand-button:hover, .scheme-toggle-button:hover { border-color: rgba(56, 189, 248, .6); background: rgba(56, 189, 248, .2); }

.scheme-card.is-collapsed { padding-top: 8px; padding-bottom: 8px; }

.scheme-card.is-collapsed .scheme-header { padding-bottom: 0; }

.scheme-card.is-collapsed .scheme-stage, .scheme-card.is-collapsed .scheme-callout, .scheme-card.is-collapsed .scheme-header-hint, .scheme-card.is-collapsed .scheme-expand-button { display: none; }

.dim-line { stroke: #64748b; }

.dim-arrow { stroke: #94a3b8; }

.dim-tag { font-family: inherit; fill: #cbd5e1; stroke: rgba(11, 18, 32, .92); }

.metric-val, .dim-nominal { font-family: inherit; font-variant-numeric: tabular-nums; }

.fastener-section { background: rgba(148, 163, 184, .06); border-color: rgba(148, 163, 184, .24); border-radius: 10px; box-shadow: none; }

.fastener-section-title { color: #94a3b8; }

.fastener-item { background: rgba(148, 163, 184, .08); border-color: rgba(148, 163, 184, .22); }

.fastener-value { font-family: inherit; color: #7dd3fc; font-variant-numeric: tabular-nums; }

/* окно «Все марки в базе» */
.metal-catalog { padding: 14px; border: 1px solid rgba(148, 163, 184, .26); border-radius: 12px; background: rgba(15, 23, 42, .5); }

@media (max-width: 600px) {
  .portal-dashboard-card,
  .metal-catalog { padding-inline: 8px; }
}

.metal-catalog-toolbar { margin-bottom: 12px; }

.metal-catalog-toolbar strong { color: #cbd5e1; font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }

.metal-catalog-toolbar input { min-height: 40px; box-sizing: border-box; padding: 0 12px; border: 1px solid rgba(148, 163, 184, .3); border-radius: 8px; background: rgba(15, 23, 42, .6); color: #e2e8f0; font-size: 14px; }

.metal-catalog-toolbar input:focus { outline: none; border-color: #38bdf8; box-shadow: 0 0 0 3px rgba(56, 189, 248, .14); }

.metal-catalog-list { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; max-height: min(46vh, 430px); }

.metal-catalog-item { min-height: 54px; padding: 9px 12px; border: 1px solid rgba(148, 163, 184, .24); border-radius: 8px; background: rgba(148, 163, 184, .08); transition: background-color .15s ease, border-color .15s ease; }

.metal-catalog-item strong { color: #7dd3fc; font-size: 13.5px; font-weight: 800; }

.metal-catalog-item span { color: #94a3b8; font-size: 11px; }

.metal-catalog-item:hover, .metal-catalog-item:focus-visible { border-color: rgba(56, 189, 248, .6); background: rgba(56, 189, 248, .16); }

html[data-theme="light"] .scheme-expand-button, html[data-theme="light"] .scheme-toggle-button { border-color: rgba(81, 113, 136, .4); background: rgba(255, 255, 255, .7); color: #172033; }

html[data-theme="light"] .scheme-expand-button:hover, html[data-theme="light"] .scheme-toggle-button:hover { border-color: #0284c7; background: rgba(14, 165, 233, .16); }

html[data-theme="light"] .scheme-header-hint { color: #34495e; }

html[data-theme="light"] .res-header-card { border-color: #bfd0dc; }

html[data-theme="light"] .metal-catalog-toolbar strong { color: #34495e; }

html[data-theme="light"] .metal-catalog-toolbar input { background: rgba(255, 255, 255, .8); border-color: rgba(81, 113, 136, .4); }

html[data-theme="light"] .metal-catalog-item span { color: #34495e; }

@media (min-width: 900px) {

.dim-nominal { font-size: 19px; }

.dim-tol-badge { font-size: 14px; }

.fastener-label { font-size: 12px; }

.fastener-value { font-size: 19px; }

.fastener-section-title { font-size: 13px; }

}

.metal-catalog-toolbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }

.metal-catalog-toolbar input { width: min(420px, 46vw); justify-self: center; grid-column: 2; }

@media (max-width: 640px) {

.metal-catalog-toolbar { display: flex; flex-direction: column; align-items: stretch; }

.metal-catalog-toolbar input { width: 100%; }

}

html[data-theme="light"] .fastener-section-title { color: #34495e; }

html[data-theme="light"] .fastener-label { color: #34495e; }

html[data-theme="light"] .fastener-value { color: #075985; }

html[data-theme="light"] .metal-catalog-list { color-scheme: light; }

html[data-theme="light"] .btn-menu-arrow { filter: brightness(.6) saturate(1.3); opacity: 1; }

html[data-theme="light"] .btn-portal, html[data-theme="light"] .btn-menu { background: rgba(255, 255, 255, .68); }

html[data-theme="light"] .btn-portal:hover:not(.btn-disabled), html[data-theme="light"] .btn-menu:hover { background: rgba(255, 255, 255, .86); }

html[data-theme="light"] .res-header-card { background: rgba(255, 255, 255, .55); }

.handbook-desc-mobile { display: none; }

@media (max-width: 600px) {
  #handbook-section-screen .handbook-desc-full { display: none; }
  #handbook-section-screen .handbook-desc-mobile { display: inline; }
  #handbook-section-screen .subtitle { white-space: nowrap; }
}

.qb-field-label { display: inline-flex; align-items: baseline; gap: 4px; }
.qb-field-note { color: #94a3b8; opacity: .7; font-size: 10px; font-weight: 500; letter-spacing: 0; text-transform: none; white-space: nowrap; }

html[data-theme="light"] .scheme-card { background: rgba(255, 255, 255, .5); }

html[data-theme="light"] .metric-card, html[data-theme="light"] .fastener-item { background: rgba(255, 255, 255, .55); }

html[data-theme="light"] .fastener-section { background: rgba(255, 255, 255, .45); }

html[data-theme="light"] .dim-tol-badge { background: rgba(223, 243, 253, .7); }

html[data-theme="light"] .metal-catalog { background: rgba(255, 255, 255, .55); }

html[data-theme="light"] .metal-catalog-item { background: rgba(255, 255, 255, .6); }

/* Схема поворотной заглушки (вид сверху): диски, отверстие и трубки в светлой теме светлые, а не тёмные */
html[data-theme="light"] .scheme-svg-container [fill="#0f172a"] { fill: #f4f7fa; }

html[data-theme="light"] .scheme-svg-container [fill="#090e17"] { fill: #e1e9f0; }

html[data-theme="light"] .scheme-svg-container [fill="#0b1320"] { fill: #d3dee8; }
/* ==== _dev_materials/css-sources/02-shell-auth.css ==== */
.quick-nav {
      position: fixed;
      left: 50%;
      bottom: max(14px, env(safe-area-inset-bottom));
      transform: translateX(-50%);
      z-index: 1200;
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 5px;
      border: 1px solid rgba(56, 189, 248, .22);
      border-radius: 15px;
      background: rgba(10, 17, 29, .91);
      box-shadow: 0 14px 40px rgba(0, 0, 0, .48);
    }

.quick-nav-button {
      min-width: 128px;
      min-height: 42px;
      padding: 8px 10px;
      border: 0;
      border-radius: 10px;
      background: transparent;
      color: #94a3b8;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      font-size: 12px;
      font-weight: 750;
      cursor: pointer;
      white-space: nowrap;
    }

.quick-nav-button:hover { color: #e2e8f0; background: rgba(51, 65, 85, .45); }

.quick-nav-button.active {
      color: #7dd3fc;
      background: rgba(14, 165, 233, .15);
      box-shadow: inset 0 0 0 1px rgba(56, 189, 248, .22);
    }

.quick-nav-icon { color: #38bdf8; font-size: 16px; line-height: 1; }

@media (max-width: 699px) {

.quick-nav {
        bottom: max(8px, env(safe-area-inset-bottom));
        width: calc(100% - 20px);
        max-width: calc(100vw - 12px);
        justify-content: stretch;
        padding: 4px;
        gap: 2px;
        box-sizing: border-box;
      }

.quick-nav-button {
        min-width: 0;
        flex: 1 1 0;
        padding: 7px 2px;
        gap: 3px;
        font-size: 10.5px;
        white-space: normal;
        line-height: 1.12;
        text-align: center;
      }

.quick-nav-icon { flex: 0 0 auto; font-size: 14px; }

.quick-nav-button span:last-child { min-width: 0; overflow-wrap: normal; }

}

/* Выровненная аккуратная плашка профиля */
.user-badge-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
  width: 100%;
}

.app-update-notice {
  position: fixed;
  top: max(44px, calc(env(safe-area-inset-top) + 38px));
  left: 50%;
  z-index: 100001;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: calc(100vw - 24px);
  padding: 9px 10px 9px 14px;
  border: 1px solid rgba(56, 189, 248, .72);
  border-radius: 12px;
  background: rgba(15, 23, 42, .97);
  color: #e2e8f0;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .45);
  font-size: 13px;
  font-weight: 800;
  transform: translateX(-50%);
}

.app-update-notice button {
  min-height: 36px;
  padding: 7px 12px;
  border: 1px solid #38bdf8;
  border-radius: 8px;
  background: #0284c7;
  color: #fff;
  font: inherit;
  cursor: pointer;
}

.app-update-notice button:hover { background: #0369a1; }

.app-update-notice button:disabled { opacity: .7; cursor: wait; }

.user-badge-bar > .user-badge-inner { justify-self: end; max-width: 100%; }

.portal-heading { text-align: center; display: grid; gap: 3px; padding: 5px 18px; }

.portal-heading span { color: #7dd3fc; font-size: clamp(21px, 1.7vw, 32px); font-weight: 850; letter-spacing: .025em; }

.portal-heading strong { color: #e2e8f0; font-size: clamp(12px, 1vw, 16px); font-weight: 600; letter-spacing: .04em; }

.portal-heading::after { content: ''; width: 48px; height: 2px; margin: 4px auto 0; background: #e74451; border-radius: 2px; }

@media (max-width: 1050px) {

.user-badge-bar { grid-template-columns: auto minmax(0, 1fr); }

.portal-heading { justify-self: end; padding: 0 3px; }

.user-badge-bar > .user-badge-inner { grid-column: 1 / -1; justify-self: stretch; }

}

.brand-cluster {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.4vw, 20px);
}

.company-brand {
  height: 58px;
  border: 0;
  background: transparent;
  opacity: .76;
  cursor: pointer;
  appearance: none;
  transition: opacity .18s ease, transform .18s ease;
}

.company-brand:hover { opacity: .95; transform: translateY(-1px); }

.company-brand:active { transform: scale(.98); }

.company-brand img {
  display: block;
  object-fit: contain;
  object-position: left center;
  filter: none;
}

.user-badge-inner {
  display: inline-flex;
  align-items: center;
}

.user-profile-menu-wrap {
  position: relative;
  min-width: 0;
}

.user-profile-trigger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: default;
}

.user-profile-trigger.can-switch-role {
  cursor: pointer;
  border-radius: 8px;
}

.user-profile-trigger.can-switch-role:hover .user-avatar-circle,
.user-profile-trigger.can-switch-role:focus-visible .user-avatar-circle {
  color: #7dd3fc;
  outline: 1px solid rgba(56, 189, 248, .65);
}

.user-meta {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.user-role-switch-indicator {
  color: #7dd3fc;
  font-size: 16px;
  line-height: 1;
  transition: transform .16s ease;
}

.user-profile-trigger[aria-expanded="true"] .user-role-switch-indicator { transform: rotate(180deg); }

.admin-role-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 1200;
  width: min(300px, calc(100vw - 32px));
  border: 1px solid #334155;
}

.admin-role-menu-title {
  color: #94a3b8;
  font-weight: 800;
  text-transform: uppercase;
}

.admin-role-options { display: grid; }

.admin-role-option {
  width: 100%;
  border: 1px solid #334155;
  border-radius: 8px;
  text-align: left;
  cursor: pointer;
}

.admin-role-option:hover { border-color: #38bdf8; background: #12263d; }

.admin-role-option.active {
  cursor: default;
}

.admin-role-option:disabled { opacity: .62; cursor: wait; }

.admin-users-menu-button {
  width: 100%;
  border: 1px solid rgba(56, 189, 248, .55);
  border-radius: 8px;
  text-align: left;
  cursor: pointer;
}

.user-avatar-circle {
  font-size: 16px;
  background: #0f172a;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-fullname {
  font-weight: 700;
  font-size: 13px;
  color: #f8fafc;
  line-height: 1.2;
}

.user-role-label {
  font-size: 11px;
  font-weight: 600;
  color: #38bdf8;
}

.btn-badge-logout {
  background: #0f172a;
  border: 1px solid #334155;
  color: #94a3b8;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

@media (max-width: 699px) {

.ambient-particles { opacity: .78; }

.ambient-sheen { opacity: .07; animation-duration: 58s; }

.user-badge-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

.brand-cluster {
    width: 100%;
    justify-content: space-between;
    gap: 6px;
  }

.company-brand {
    align-self: flex-start;
  }

.user-badge-inner {
    align-self: stretch;
    justify-content: space-between;
  }

.user-profile-menu-wrap { flex: 1; }

.user-profile-trigger { max-width: 100%; }

.user-meta { flex: 1; }

.admin-role-menu { right: auto; left: 0; }

}

.btn-badge-logout:hover {
  background: #ef4444;
  color: #fff;
  border-color: #ef4444;
}

/* Окно авторизации */
.auth-backdrop {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

.auth-card {
  background: rgba(28, 28, 28, 0.85);
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 14px;
  padding: 24px;
  width: 90%;
  max-width: 360px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}

.auth-session-check {
  min-height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: #f8fafc;
}

.auth-session-spinner {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  border: 3px solid rgba(148, 163, 184, .35);
  border-top-color: #38bdf8;
  border-radius: 50%;
  contain: strict;
  will-change: transform;
  animation: auth-session-spin .8s linear infinite;
}

.auth-session-title {
  font-size: 15px;
  font-weight: 700;
}

.auth-session-description {
  margin-top: 3px;
  color: #94a3b8;
  font-size: 12px;
}

@keyframes auth-session-spin {
  from { transform: translateZ(0) rotate(0deg); }
  to { transform: translateZ(0) rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {

.auth-session-spinner { animation: none; }

}

.auth-title-box {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.auth-icon {
  font-size: 26px;
}

.auth-title {
  margin: 0;
  font-size: 17px;
  color: #f8fafc;
  font-weight: 700;
}

.auth-field {
  margin-bottom: 14px;
}

.auth-field label {
  display: block;
  font-size: 12px;
  color: #cbd5e1;
  font-weight: 600;
  margin-bottom: 6px;
}

.auth-input {
  width: 100%;
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 8px;
  padding: 10px 12px;
  color: #f8fafc;
  font-size: 14px;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.2s;
}

.auth-input:focus {
  border-color: #38bdf8;
}

.auth-pin-input {
  text-align: center;
  font-size: 20px;
  letter-spacing: 6px;
  font-weight: 700;
}

.auth-hint {
  font-size: 10px;
  color: #64748b;
  margin-top: 4px;
  line-height: 1.3;
}

.auth-err-text {
  color: #f87171;
  font-size: 12px;
  margin-bottom: 12px;
  display: none;
  text-align: center;
}

.workflow-backdrop.user-management-backdrop { z-index: 100003; }

.user-management-backdrop .user-management-card {
  width: min(1080px, 100%);
  height: min(720px, calc(100dvh - 32px));
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  padding: 0;
}

.managed-user-roles { display: grid; gap: 6px; }

.managed-user-role-option {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 36px;
  padding: 7px 9px;
  border: 1px solid #334155;
  border-radius: 8px;
  background: #111827;
  color: #dbeafe;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.managed-user-role-option:has(input:checked) { border-color: rgba(56, 189, 248, .62); background: rgba(2, 132, 199, .13); }

.managed-user-role-option input,
.managed-user-admin-toggle input { width: 17px; height: 17px; margin: 0; flex: 0 0 auto; accent-color: #0ea5e9; }

.managed-user-role-option:has(input:disabled) { opacity: .62; cursor: default; }

.managed-user-admin-toggle {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 3px;
  padding: 11px;
  border: 1px solid rgba(168, 85, 247, .48);
  border-radius: 9px;
  background: rgba(88, 28, 135, .15);
  color: #e9d5ff;
  cursor: pointer;
}

.managed-user-admin-toggle span { display: grid; gap: 2px; font-size: 12px; }

.managed-user-admin-toggle small { color: #a78bfa; font-size: 10px; line-height: 1.3; }

.managed-user-directory { display: grid; grid-template-rows: auto minmax(0, 1fr); width: 100%; height: 100%; min-width: 0; min-height: 0; }

.managed-user-directory-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid #273449;
  color: #f8fafc;
  font-size: 14px;
}

.managed-user-directory-toolbar .auth-input { width: min(280px, 42%); margin-left: auto; min-height: 38px; }

.managed-user-add-button {
  min-height: 38px;
  padding: 8px 13px;
  border: 1px solid rgba(56, 189, 248, .68);
  border-radius: 8px;
  background: #0369a1;
  color: #fff;
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
  cursor: pointer;
}

.managed-user-add-button:hover { background: #0284c7; }

.managed-user-list { min-height: 0; overflow-y: auto; padding: 10px; }

.managed-user-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid #2b3a50;
  border-radius: 10px;
  background: #111827;
}

.managed-user-item + .managed-user-item { margin-top: 7px; }

.managed-user-item.is-inactive { opacity: .67; background: rgba(30, 41, 59, .5); }

.managed-user-name { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; color: #f8fafc; font-size: 13px; font-weight: 850; }

.managed-user-self { padding: 2px 6px; border-radius: 99px; background: rgba(14, 165, 233, .18); color: #7dd3fc; font-size: 9px; text-transform: uppercase; }

.managed-user-role-line { margin-top: 3px; color: #94a3b8; font-size: 11px; line-height: 1.35; }

.managed-user-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }

.managed-user-badge { padding: 3px 7px; border-radius: 99px; font-size: 9px; font-weight: 850; }

.managed-user-badge.is-admin { background: rgba(126, 34, 206, .22); color: #d8b4fe; }

.managed-user-badge.is-active { background: rgba(22, 101, 52, .26); color: #86efac; }

.managed-user-badge.is-inactive { background: rgba(153, 27, 27, .22); color: #fca5a5; }

.managed-user-actions { display: flex; gap: 6px; }

.managed-user-actions button {
  min-height: 34px;
  padding: 7px 9px;
  border: 1px solid #475569;
  border-radius: 7px;
  background: #243147;
  color: #dbeafe;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}

.managed-user-actions button.is-remove { border-color: rgba(248, 113, 113, .48); color: #fca5a5; }

.managed-user-actions button.is-restore { border-color: rgba(74, 222, 128, .5); color: #86efac; }

.managed-user-actions button:disabled { opacity: .35; cursor: not-allowed; }

.managed-user-loading,
.managed-user-empty { padding: 30px 14px; color: #94a3b8; font-size: 12px; text-align: center; }

.managed-user-pins { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: 12px; color: #94a3b8; }

.managed-user-pins code { color: #e0f2fe; letter-spacing: .15em; font-size: 14px; font-weight: 700; padding: 3px 7px; background: #0b1424; border: 1px solid #284255; border-radius: 5px; }

@media (max-width: 640px) {

.user-badge-bar { grid-template-columns: minmax(80px, .8fr) minmax(0, 1.2fr); }

.portal-heading span { font-size: 21px; }

.portal-heading strong { font-size: 11px; }

}

.supplier-combobox .auth-input { padding-right: 30px; }

@media (max-width: 900px) {

.workflow-backdrop.user-management-backdrop { padding: 0; align-items: stretch; }

.user-management-backdrop .user-management-card { width: 100%; height: 100dvh; max-height: none; border: 0; border-radius: 0; }

}

@media (max-width: 560px) {

.managed-user-roles { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.managed-user-role-option { min-height: 40px; padding: 6px 7px; font-size: 10px; }

.managed-user-directory { display: block; height: auto; }

.managed-user-directory-toolbar { position: sticky; top: 0; z-index: 2; flex-wrap: wrap; padding: 10px 12px; background: #172033; }

.managed-user-directory-toolbar strong { width: 100%; }

.managed-user-directory-toolbar .auth-input { flex: 1 1 120px; width: auto; margin-left: 0; }

.managed-user-add-button { flex: 0 0 auto; min-height: 40px; padding-inline: 10px; }

.managed-user-list { overflow: visible; padding: 8px; }

.managed-user-item { grid-template-columns: 1fr; gap: 9px; }

.managed-user-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }

.managed-user-actions button { min-height: 40px; }

}

img.company-brand-light { display: none; }

.btn-theme-toggle, .btn-badge-notify {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 30px;
  padding: 4px 9px;
  border: 1px solid #334155;
  border-radius: 7px;
  background: #0f172a;
  color: #cbd5e1;
  font-size: 10px;
  font-weight: 750;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

.btn-theme-toggle:hover, .btn-badge-notify:hover { border-color: #38bdf8; color: #f8fafc; background: #17243a; }

.btn-theme-toggle:active, .btn-badge-notify:active { transform: scale(.97); }

.btn-theme-toggle:focus-visible, .btn-badge-notify:focus-visible { outline: 2px solid #38bdf8; outline-offset: 2px; }

.btn-badge-notify:disabled { opacity: .5; cursor: not-allowed; }

.theme-toggle-icon { font-size: 14px; line-height: 1; }

.auth-card { position: relative; }

.auth-title-box { padding-right: 92px; }

html[data-theme="light"] .company-brand-dark { display: none; }

html[data-theme="light"] .company-brand-light { display: block; }

html[data-theme="light"] .user-avatar-circle { background: #e7eef5; }

html[data-theme="light"] .app-update-notice {
  border-color: #0284c7;
  background: rgba(255, 255, 255, .98);
  color: #172033;
  box-shadow: 0 12px 30px rgba(30, 64, 92, .2);
}

html[data-theme="light"] .user-role-label,
html[data-theme="light"] .user-role-switch-indicator { color: #075985; }

html[data-theme="light"] .btn-badge-logout:hover { border-color: #ef4444; background: #ef4444; color: #fff; }

html[data-theme="light"] .admin-role-menu,
html[data-theme="light"] .quick-nav {
  border-color: #bdd0df;
  background: rgba(255, 255, 255, .68);
  box-shadow: 0 16px 40px rgba(30, 64, 92, .18);
}

html[data-theme="light"] .admin-role-menu-title { color: #3f5165; }

html[data-theme="light"] .admin-role-option:hover { border-color: #0ea5e9; background: #edf8fe; }

html[data-theme="light"] .quick-nav-button { color: #3b4e62; }

html[data-theme="light"] .quick-nav-button:hover { color: #172033; background: #edf2f7; }

html[data-theme="light"] .quick-nav-button.active { color: #075985; }

html[data-theme="light"] .auth-session-check,
html[data-theme="light"] .auth-session-title { color: #172033; }

html[data-theme="light"] .auth-session-description { color: #3f5165; }

html[data-theme="light"] .auth-session-spinner {
  border-color: rgba(100, 116, 139, .28);
  border-top-color: #0284c7;
}

html[data-theme="light"] .user-management-heading,
html[data-theme="light"] .managed-user-directory-toolbar { border-color: #cbd8e3; }

html[data-theme="light"] .managed-user-directory-toolbar { background: #f9fbfd; }

html[data-theme="light"] .managed-user-role-option,
html[data-theme="light"] .managed-user-item {
  border-color: #c5d3df;
  background: #fff;
  color: #1e3a5f;
}

html[data-theme="light"] .managed-user-item.is-inactive { background: #edf1f5; }

html[data-theme="light"] .managed-user-actions button {
  border-color: #b8c9d8;
  background: #edf3f7;
  color: #334155;
}

html[data-theme="light"] .managed-user-pins code { border-color: #aec5d6; background: #e8f0f6; color: #075985; }

html[data-theme="light"] .managed-user-badge.is-admin { background: #f0e5fc; color: #6b21a8; }

html[data-theme="light"] .managed-user-badge.is-active { background: #dcfce7; color: #166534; }

html[data-theme="light"] .managed-user-badge.is-inactive { background: #fee2e2; color: #991b1b; }

@media (max-width: 699px) {

.theme-toggle-label { display: none; }

.btn-theme-toggle { width: 32px; min-width: 32px; padding: 4px; }

.auth-title-box { padding-right: 36px; }

html[data-theme="light"] .managed-user-directory-toolbar { background: #f9fbfd; }

}

/* ── Плашка профиля в шапке: плоская поверхность, рамка как у логотипа (сверху и по бокам до середины бордовая, ниже серая), «мягкие» кнопки ── */
.user-badge-inner {
  position: relative;
  gap: 8px;
  padding: 7px 12px 7px 14px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: rgba(20, 28, 43, .72);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .25);
}

.user-badge-inner::before {
  content: "";
  position: absolute;
  inset: -1px;
  padding: 2px;
  border-radius: inherit;
  background: linear-gradient(180deg, #a61f33 0 50%, rgba(148, 163, 184, .55) 50% 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}

.user-badge-inner .user-profile-menu-wrap { padding-right: 14px; margin-right: 4px; border-right: 1px solid rgba(148, 163, 184, .2); }

.user-badge-inner .user-avatar-circle { width: 34px; height: 34px; background: rgba(15, 23, 42, .55); box-shadow: 0 0 0 1px rgba(56, 189, 248, .35); }

.user-badge-inner .btn-theme-toggle,
.user-badge-inner .btn-badge-notify,
.user-badge-inner .btn-badge-logout {
  border: 1px solid rgba(148, 163, 184, .28);
  border-radius: 10px;
  background: rgba(148, 163, 184, .1);
  box-shadow: none;
  color: #dbe8f6;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.user-badge-inner .btn-badge-logout { font-weight: 700; }

.user-badge-inner .btn-theme-toggle:hover,
.user-badge-inner .btn-theme-toggle:focus-visible,
.user-badge-inner .btn-badge-notify:hover,
.user-badge-inner .btn-badge-notify:focus-visible {
  border-color: rgba(56, 189, 248, .55);
  background: rgba(56, 189, 248, .17);
  color: #fff;
}

.user-badge-inner .btn-badge-logout:hover,
.user-badge-inner .btn-badge-logout:focus-visible {
  border-color: rgba(248, 113, 113, .6);
  background: rgba(239, 68, 68, .2);
  color: #fecaca;
}

html[data-theme="light"] .user-badge-inner {
  border-color: transparent;
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 8px 20px rgba(30, 64, 92, .12);
}

html[data-theme="light"] .user-badge-inner::before { background: linear-gradient(180deg, #b3202f 0 50%, rgba(71, 85, 105, .42) 50% 100%); }

html[data-theme="light"] .user-badge-inner .user-profile-menu-wrap { border-right-color: rgba(3, 105, 161, .2); }

html[data-theme="light"] .user-badge-inner .user-avatar-circle { background: #e7eef5; box-shadow: 0 0 0 1px rgba(2, 132, 199, .35); }

html[data-theme="light"] .user-badge-inner .btn-theme-toggle,
html[data-theme="light"] .user-badge-inner .btn-badge-notify,
html[data-theme="light"] .user-badge-inner .btn-badge-logout {
  border-color: rgba(15, 23, 42, .18);
  background: rgba(15, 23, 42, .05);
  box-shadow: none;
  color: #334155;
}

html[data-theme="light"] .user-badge-inner .btn-theme-toggle:hover,
html[data-theme="light"] .user-badge-inner .btn-theme-toggle:focus-visible,
html[data-theme="light"] .user-badge-inner .btn-badge-notify:hover,
html[data-theme="light"] .user-badge-inner .btn-badge-notify:focus-visible {
  border-color: rgba(2, 132, 199, .55);
  background: rgba(14, 165, 233, .15);
  color: #075985;
}

html[data-theme="light"] .user-badge-inner .btn-badge-logout:hover,
html[data-theme="light"] .user-badge-inner .btn-badge-logout:focus-visible {
  border-color: rgba(185, 28, 28, .55);
  background: rgba(239, 68, 68, .14);
  color: #7f1d1d;
}

@media (max-width: 699px) {

.user-badge-inner { gap: 8px; padding: 7px 10px; }

.user-badge-inner .user-profile-menu-wrap { padding-right: 8px; margin-right: 0; }

.user-badge-inner .user-avatar-circle { width: 30px; height: 30px; }

}

/* ── Логотип: кнопка ровно по размеру логотипа (раньше кликалась пустая зона справа), сам логотип крупнее.
   Высота блока (строка шапки) не меняется: картинка выходит за него на свои прозрачные поля сверху и снизу. ── */
.company-brand { width: auto; padding: 0; overflow: visible; display: flex; align-items: center; }

.company-brand img { width: auto; height: 84px; max-width: none; flex: none; }

@media (max-width: 699px) {

.company-brand { width: auto; height: 50px; }

 .company-brand img { height: 72px; }

}

@media (max-width: 640px) {

.user-badge-bar .company-brand { width: auto; max-width: none; height: 44px; }

 .user-badge-bar .company-brand img { height: 66px; }

}

/* ── Профиль: тема и выход — только значки; стрелка выбора должности — SVG по центру плашки, вплотную к тексту ── */
.user-badge-inner .theme-toggle-label { display: none; }

.user-badge-inner .btn-theme-toggle, .user-badge-inner .btn-badge-notify, .user-badge-inner .btn-badge-logout { width: 36px; min-width: 36px; height: 36px; min-height: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }

.user-badge-inner .btn-theme-toggle .ico, .user-badge-inner .btn-badge-notify .ico, .user-badge-inner .btn-badge-logout .ico { width: 18px; height: 18px; }

.user-role-switch-indicator { display: inline-flex; align-items: center; justify-content: center; align-self: center; width: 16px; height: 14px; margin-left: -4px; }

.user-role-switch-indicator.hidden { display: none; }

/* ── Вход и восстановление сессии: в стиле остальных окон (нейтральное затемнение вместо синего, полупрозрачная карточка, мягкие поля и кнопка); кнопки темы в окне нет ── */
.auth-backdrop { background: rgba(2, 6, 23, .55); }

#core-auth-modal .auth-card { background: rgba(23, 32, 51, .62); border: 1px solid rgba(148, 163, 184, .22); box-shadow: inset 0 3px 0 rgba(56, 189, 248, .7), 0 24px 60px rgba(0, 0, 0, .45); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }

#core-auth-modal .auth-title-box { padding-right: 0; }

#core-auth-modal .auth-icon { display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center; border-radius: 10px; background: rgba(56, 189, 248, .12); color: #7dd3fc; font-size: 0; }

#core-auth-modal .auth-icon .ico { width: 20px; height: 20px; }

#core-auth-modal .auth-input { height: 40px; padding: 0 12px; border-radius: 10px; background: rgba(15, 23, 42, .55); border-color: rgba(148, 163, 184, .3); }

#core-auth-modal .auth-input:focus { border-color: #38bdf8; }

#core-auth-modal .btn-auth-submit { height: 42px; padding: 0 12px; border-radius: 10px; }

#core-auth-modal .auth-session-check { min-height: 110px; }

html[data-theme="light"] .auth-backdrop { background: rgba(30, 50, 72, .35); }

html[data-theme="light"] #core-auth-modal .auth-card { background: rgba(249, 251, 253, .74); border-color: rgba(71, 85, 105, .22); box-shadow: inset 0 3px 0 rgba(2, 132, 199, .6), 0 24px 65px rgba(24, 49, 71, .25); }

html[data-theme="light"] #core-auth-modal .auth-icon { background: rgba(14, 165, 233, .14); color: #075985; }

html[data-theme="light"] #core-auth-modal .auth-input { background: rgba(255, 255, 255, .85); border-color: #bdcddd; color: #172033; }

@media (prefers-reduced-transparency: reduce) {

#core-auth-modal .auth-card { -webkit-backdrop-filter: none; backdrop-filter: none; background: #172033; }

html[data-theme="light"] #core-auth-modal .auth-card { background: #f9fbfd; }

}

/* ── Вход и восстановление сессии: фон за окном размыт и затемнён (данные не видны посторонним) ── */
#core-auth-modal { background: rgba(5, 8, 13, .72); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); }

html[data-theme="light"] #core-auth-modal { background: rgba(226, 232, 240, .62); }

@media (prefers-reduced-transparency: reduce) {

#core-auth-modal, html[data-theme="light"] #core-auth-modal { -webkit-backdrop-filter: none; backdrop-filter: none; background: #05080d; }

html[data-theme="light"] #core-auth-modal { background: #e2e8f0; }

}

/* На телефоне экран проверки входа полностью закрывает шапку и тестовую плашку. */
@media (max-width: 600px) {
  #core-auth-modal {
    z-index: 100004;
    background: #05080d;
  }

  html[data-theme="light"] #core-auth-modal { background: #e2e8f0; }
}

/* ── Экран ожидания (после 15 минут бездействия): содержимое скрыто, остаются фон, частицы и логотип.
   Цикл 14 с: скобки прорисовываются линией → проявляется надпись → по логотипу проходит блик → пауза; ореол «дышит», логотип медленно смещается (защита OLED от выгорания). ── */
.idle-screen { position: fixed; inset: 0; z-index: 100050; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .6s ease; cursor: default; }

.idle-screen.is-visible { opacity: 1; }

body.idle-screen-active > *:not(.ambient-particles):not(.ambient-sheen):not(#core-idle-screen) { opacity: 0 !important; visibility: hidden; pointer-events: none; transition: opacity .55s ease, visibility 0s linear .55s; }

body.idle-screen-leaving > *:not(.ambient-particles):not(.ambient-sheen):not(#core-idle-screen) { transition: opacity .45s ease; }

body.idle-screen-active #core-idle-screen, body.idle-screen-active #core-idle-screen * { visibility: visible !important; }

@media print {

.idle-screen { display: none !important; }

}

html:has(body.idle-screen-active) { overflow: hidden; scrollbar-gutter: auto; }

html[data-theme="light"] .quick-nav-icon { color: #0369a1; }

html[data-theme="light"] .quick-nav-button.active { background: rgba(224, 242, 254, .75); }

/* ── Меню профиля (смена должности): стиль сайта — полупрозрачная панель, плоские мягкие кнопки ── */
.user-role-switch-indicator .ico { width: 15px; height: 15px; }

.admin-role-menu { padding: 12px; border-color: rgba(148, 163, 184, .3); border-radius: 12px; background: rgba(16, 26, 44, .84); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 16px 40px rgba(0, 0, 0, .5); }

.admin-role-menu-title { padding: 0 2px 8px; font-size: 11px; letter-spacing: .06em; }

.admin-role-options { gap: 6px; }

.admin-role-option { min-height: 40px; padding: 0 12px; border-color: rgba(148, 163, 184, .3); background: rgba(148, 163, 184, .1); color: #e2e8f0; font-family: inherit; font-size: 13px; font-weight: 700; transition: background-color .15s ease, border-color .15s ease; }

.admin-role-option:hover:not(:disabled):not(.active) { border-color: rgba(56, 189, 248, .6); background: rgba(56, 189, 248, .16); }

.admin-role-option.active { border-color: rgba(56, 189, 248, .8); background: rgba(56, 189, 248, .35); color: #fff; }

.admin-users-menu-button { display: flex; align-items: center; gap: 8px; min-height: 40px; margin-top: 10px; padding: 0 12px; border-color: rgba(56, 189, 248, .5); background: rgba(56, 189, 248, .16); color: #e0f2fe; font-family: inherit; font-size: 13px; font-weight: 700; }

.admin-users-menu-button:hover { border-color: rgba(56, 189, 248, .8); background: rgba(56, 189, 248, .3); }

.admin-users-menu-button .ico { width: 17px; height: 17px; }

html[data-theme="light"] .admin-role-menu { background: rgba(255, 255, 255, .82); border-color: rgba(71, 85, 105, .3); box-shadow: 0 16px 40px rgba(30, 64, 92, .2); }

html[data-theme="light"] .admin-role-option { background: rgba(255, 255, 255, .55); border-color: rgba(81, 113, 136, .4); color: #172033; }

html[data-theme="light"] .admin-role-option:hover:not(:disabled):not(.active) { border-color: #0284c7; background: rgba(14, 165, 233, .16); }

html[data-theme="light"] .admin-role-option.active { background: rgba(14, 165, 233, .3); border-color: #0284c7; color: #0c4a6e; }

html[data-theme="light"] .admin-users-menu-button { background: rgba(14, 165, 233, .14); border-color: rgba(2, 132, 199, .55); color: #075985; }

html[data-theme="light"] .admin-users-menu-button:hover { background: rgba(14, 165, 233, .26); border-color: #0284c7; }
/* ==== _dev_materials/css-sources/03-metal-journal.css ==== */
/* Навигация внутри модуля металла */
    .metal-subnav {
  display: flex;
  max-width: 700px;
  margin: 14px auto 18px auto; /* Центрирование */
  background: transparent;
  padding: 0;
  gap: 4px;
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
}

.metal-tab-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: #94a3b8;
  font-size: 13px;
  font-weight: 700;
  border-radius: 8px 8px 0 0;
  cursor: pointer;
  transition: background-color .14s ease, color .14s ease, border-color .14s ease, transform .14s ease;
  text-align: center;
}

.metal-tab-btn:hover:not(.active) { color: #cbd5e1; }

.metal-tab-btn.active {
  background: transparent;
  color: #38bdf8;
  border-bottom-color: #38bdf8;
  box-shadow: none;
}

@media (max-width: 560px) {

.metal-subnav { max-width: 100%; }

.metal-tab-btn { padding: 10px 6px; font-size: 11px; min-height: 44px; }

}

.journal-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 12px;
      text-align: left;
      table-layout: fixed;
    }

.journal-table th {
      background: rgba(30, 41, 59, 0.85);
      color: #94a3b8;
      padding: 9px 8px;
      font-weight: 700;
      border-bottom: 1px solid rgba(56, 189, 248, 0.2);
      white-space: normal;
      overflow-wrap: anywhere;
      line-height: 1.2;
    }

.journal-table td {
      padding: 10px 8px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
      color: #e2e8f0;
      white-space: normal;
      overflow-wrap: anywhere;
      vertical-align: top;
      line-height: 1.3;
    }

.journal-table tbody tr { cursor: pointer; }

.journal-table tr:hover,
    .journal-table tr:focus-visible { background: rgba(56, 189, 248, 0.08); outline: none; }

.journal-table th:nth-child(1) { width: 4%; }

.journal-table th:nth-child(2) { width: 7%; }

.journal-table th:nth-child(3) { width: 13%; }

.journal-table th:nth-child(4) { width: 12%; }

.journal-table th:nth-child(5) { width: 7%; }

.journal-table th:nth-child(6) { width: 18%; }

.journal-table th:nth-child(7) { width: 23%; }

.journal-table th:nth-child(8) { width: 16%; }

.journal-number { color: #38bdf8; font-weight: 800; font-variant-numeric: tabular-nums; }

.journal-table td.journal-number { color: #38bdf8; }

.journal-primary { color: #f8fafc; font-weight: 750; }

.journal-secondary { color: #94a3b8; font-size: 10px; margin-top: 3px; }

.journal-status-step { margin-top: 4px; white-space: normal; }

.journal-problem { color: #fca5a5; font-size: 10px; margin-top: 5px; }

.journal-controller-comment { margin-top: 6px; padding: 5px 7px; border-left: 2px solid rgba(56, 189, 248, .7); border-radius: 0 5px 5px 0; background: rgba(14, 116, 144, .13); color: #cbd5e1; font-size: 10px; line-height: 1.35; white-space: pre-wrap; overflow-wrap: anywhere; }

.journal-controller-comment strong { color: #7dd3fc; font-weight: 800; }

.journal-mobile-comment { grid-column: 1 / -1; }

.journal-action-stack { display: flex; flex-direction: column; align-items: stretch; gap: 7px; }

.journal-action-group { display: flex; flex-direction: column; gap: 4px; padding-top: 5px; border-top: 1px solid rgba(148, 163, 184, 0.12); }

.journal-action-group:first-child { padding-top: 0; border-top: 0; }

.journal-action-caption { color: #64748b; font-size: 8px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }

.journal-action-stack .chip { width: 100%; margin: 0; white-space: normal; line-height: 1.2; }

.journal-action-stack .chip:focus-visible { outline: 2px solid #38bdf8; outline-offset: 2px; }

.journal-danger-action { border-color: rgba(254, 202, 202, 0.55); }

.journal-table tbody tr.journal-tone-waiting { background: rgba(245, 158, 11, 0.085); box-shadow: inset 4px 0 rgba(245, 158, 11, 0.7); }

.journal-table tbody tr.journal-tone-senior { background: rgba(249, 115, 22, 0.105); box-shadow: inset 4px 0 rgba(249, 115, 22, 0.78); }

.journal-table tbody tr.journal-tone-engineer { background: rgba(59, 130, 246, 0.105); box-shadow: inset 4px 0 rgba(59, 130, 246, 0.76); }

.journal-table tbody tr.journal-tone-accepted { background: rgba(34, 197, 94, 0.085); box-shadow: inset 4px 0 rgba(34, 197, 94, 0.7); }

.journal-table tbody tr.journal-tone-senior-approved { background: rgba(20, 184, 166, 0.095); box-shadow: inset 4px 0 rgba(20, 184, 166, 0.74); }

.journal-table tbody tr.journal-tone-engineer-approved { background: rgba(14, 165, 233, 0.1); box-shadow: inset 4px 0 rgba(14, 165, 233, 0.75); }

.journal-table tbody tr.journal-tone-rejected { background: rgba(239, 68, 68, 0.115); box-shadow: inset 4px 0 rgba(239, 68, 68, 0.82); }

.journal-mobile-list { display: none; }

@media (max-width: 900px) {

.journal-mobile-list { display: grid; gap: 10px; margin-top: 10px; }

.journal-mobile-card {
        border: 1px solid rgba(56, 189, 248, 0.18);
        border-radius: 12px;
        padding: 12px;
        background: rgba(15, 23, 42, 0.78);
      }

.journal-mobile-card.journal-tone-waiting { background: linear-gradient(90deg, rgba(245,158,11,.18), rgba(15,23,42,.82) 34%); border-left-color: rgba(245,158,11,.82); }

.journal-mobile-card.journal-tone-senior { background: linear-gradient(90deg, rgba(249,115,22,.21), rgba(15,23,42,.82) 34%); border-left-color: rgba(249,115,22,.85); }

.journal-mobile-card.journal-tone-engineer { background: linear-gradient(90deg, rgba(59,130,246,.21), rgba(15,23,42,.82) 34%); border-left-color: rgba(59,130,246,.84); }

.journal-mobile-card.journal-tone-accepted { background: linear-gradient(90deg, rgba(34,197,94,.18), rgba(15,23,42,.82) 34%); border-left-color: rgba(34,197,94,.82); }

.journal-mobile-card.journal-tone-senior-approved { background: linear-gradient(90deg, rgba(20,184,166,.19), rgba(15,23,42,.82) 34%); border-left-color: rgba(20,184,166,.82); }

.journal-mobile-card.journal-tone-engineer-approved { background: linear-gradient(90deg, rgba(14,165,233,.2), rgba(15,23,42,.82) 34%); border-left-color: rgba(14,165,233,.83); }

.journal-mobile-card.journal-tone-rejected { background: linear-gradient(90deg, rgba(239,68,68,.23), rgba(15,23,42,.82) 34%); border-left-color: rgba(239,68,68,.88); }

.journal-mobile-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }

.journal-mobile-number { color: #38bdf8; font-size: 16px; font-weight: 850; }

.journal-mobile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }

.journal-mobile-field { min-width: 0; }

.journal-mobile-field.is-wide { grid-column: 1 / -1; }

.journal-mobile-label { color: #64748b; font-size: 9px; font-weight: 800; text-transform: uppercase; }

.journal-mobile-value { margin-top: 2px; color: #e2e8f0; font-size: 12px; overflow-wrap: anywhere; }

.journal-mobile-actions { margin-top: 12px; }

.journal-details-button {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        width: 100%;
        margin-top: 8px;
        padding: 8px 14px;
        border: 1px solid var(--jp-soft-border);
        border-radius: 10px;
        background: var(--jp-soft);
        color: var(--jp-btn-text);
        font-family: inherit;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .01em;
        cursor: pointer;
        transition: background-color .15s ease, border-color .15s ease, color .15s ease;
      }

.journal-details-button:hover:not(:disabled),
      .journal-details-button:focus-visible { border-color: var(--jp-hover-border); background: var(--jp-soft-hover); color: var(--jp-btn-hover-text); }

.journal-toolbar { flex-wrap: wrap; gap: 8px; }

}

@media (max-width: 600px) {
  .journal-mobile-card { padding-inline: 8px; }
}

.btn-export-excel {
      background: rgba(30, 41, 59, 0.8);
      border: 1px solid rgba(56, 189, 248, 0.2);
      color: #38bdf8;
      padding: 8px 12px;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

.btn-export-excel:active { background: #1e293b; }

@media print {

.tag-print-page {
        display: grid !important;
        width: 210mm !important;
        height: 297mm !important;
        grid-template-columns: 1fr 1fr !important;
        grid-template-rows: 1fr 1fr !important;
        gap: 6mm !important;
        padding: 6mm !important;
        background: #fff !important;
        box-sizing: border-box !important;
        break-after: page !important;
        page-break-after: always !important;
      }

.tag-print-page:last-child {
        break-after: auto !important;
        page-break-after: auto !important;
      }

.tag-print-box {
        border: 2px dashed #000 !important;
        padding: 8px 10px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        font-family: Arial, sans-serif !important;
        color: #000 !important;
        background: #fff !important;
        box-sizing: border-box !important;
        height: 100% !important;
      }

.tag-print-box-empty {
        border: 0 !important;
        background: transparent !important;
      }

.tag-print-box * {
        color: #000 !important;
      }

}

@media (min-width: 992px) {

#metal-screen .journal-table { font-size: 13px; }

#metal-screen .journal-table th,
  #metal-screen .journal-table td { padding: 11px 10px; }

}

.chip {
      background: rgba(22, 31, 46, 0.7);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 6px;
      padding: 3px 8px;
      font-size: 11px;
      color: #94a3b8;
      cursor: pointer;
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    }

.chip:active { background: #23354d; color: #38bdf8; }

/* Статусы в журнале */
.badge-status {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
}

.status-wait { background: #854d0e; color: #fef08a; }

/* Ждет приемки */
.status-ok { background: #166534; color: #bbf7d0; }

/* Соответствует */
 /* На решении ОГК */
.status-reject { background: #991b1b; color: #fecaca; }

/* Брак */
.status-engineer { background: #1d4ed8; color: #dbeafe; }

/* Пропущено конструктором */
.status-senior { background: #0f766e; color: #ccfbf1; }

/* Пропущено старшим */

.metal-sync-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: nowrap;
  margin: 0;
  padding: 6px 7px;
  border: 0;
  background: transparent;
  min-width: 0;
}

.metal-sync-state {
  color: #94a3b8;
  font-size: 11px;
  font-weight: 700;
}

.metal-sync-state.is-ok { color: #4ade80; }

.metal-sync-state.is-error { color: #f87171; }

.metal-toolbar-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.btn-metal-small:disabled,
.chip:disabled,
.btn-submit-metal:disabled {
  opacity: 0.55;
  cursor: wait;
}

@keyframes journalRowUpdated {
  0% { outline-color: transparent; filter: brightness(1); }
  18% { outline-color: #67e8f9; filter: brightness(1.28); }
  58% { outline-color: rgba(103,232,249,.7); filter: brightness(1.08); }
  100% { outline-color: transparent; filter: brightness(1); }
}

.journal-row-updated {
  outline: 2px solid transparent;
  outline-offset: -2px;
  animation: journalRowUpdated 2.4s ease-out both;
}

.site-print-frame { position: fixed; width: 1px; height: 1px; right: 0; bottom: 0; border: 0; opacity: 0; pointer-events: none; }

html.metal-modal-open,
body.metal-modal-open {
  overflow: hidden;
  overscroll-behavior: none;
}

.user-management-heading { padding: 18px 20px 14px; border-bottom: 1px solid #334155; }

.user-management-layout {
  position: relative;
  min-height: 0;
  overflow: hidden;
}

.user-editor {
  width: min(640px, 100%);
  height: 100%;
  min-width: 0;
  margin: 0 auto;
  padding: 18px;
  overflow-y: auto;
  background: rgba(15, 23, 42, .46);
}

.user-editor-title { margin-bottom: 14px; color: #f8fafc; font-size: 15px; font-weight: 850; }

.user-editor-field { display: block; margin-bottom: 14px; }

.user-editor-field > span {
  display: block;
  margin-bottom: 6px;
  color: #94a3b8;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.user-editor-actions { display: grid; grid-template-columns: auto minmax(120px, 1fr); gap: 8px; margin-top: 14px; }

.user-editor-pin-note { margin-top: 10px; color: #64748b; font-size: 10px; line-height: 1.4; }

.journal-toolbar {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: end;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 7px 9px;
  border: 1px solid rgba(56, 189, 248, .18);
  border-radius: 10px;
  background: rgba(15, 23, 42, .66);
  min-width: 0;
}

.journal-status-filter-wrap {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.journal-status-filter-wrap .journal-status-filter { min-width: 170px; padding: 7px 9px; }

.journal-command-center {
  display: grid;
  gap: 6px;
  margin-bottom: 0;
}

.journal-search-sticky {
  position: sticky;
  top: max(46px, calc(env(safe-area-inset-top) + 38px));
  z-index: 6;
  display: block;
  margin-bottom: 6px;
  padding: 6px 0;
  background: transparent;
  pointer-events: none;
}

.journal-search-sticky .journal-search-input {
  margin: 0;
  pointer-events: auto;
}

.journal-search-sticky.is-stuck {
  background: transparent;
}

.journal-search-sticky.is-stuck .journal-search-input {
  border-color: rgba(56, 189, 248, .34);
  box-shadow: 0 10px 24px rgba(2, 8, 23, .34);
}

.quality-filters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 10px; align-items: end; }

.quality-filters label { display: grid; gap: 6px; min-width: 0; font-size: 12px; color: #94a3b8; }

.quality-filters button { min-height: 40px; }

.quality-filter-disabled { opacity: .45; }

.quality-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }

.quality-metric { position: relative; display: grid; gap: 6px; border: 1px solid #294054; border-radius: 10px; padding: 14px; background: #122234; }

.quality-metric > span { color: #afc1d3; font-size: 11px; }

.quality-metric strong { font-size: clamp(20px, 2.2vw, 31px); line-height: 1.2; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }

.quality-note { color: #91a6ba; font-size: 12px; line-height: 1.5; margin: 12px 0 18px; }

.quality-detail-heading { display: flex; justify-content: space-between; gap: 10px; margin: 18px 0 10px; font-size: 14px; }

.quality-detail-heading > span { display: flex; align-items: center; gap: 8px; color: #b8c7d6; font-size: 11px; }

.quality-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; }

.quality-action-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 18px 0 12px; }

.quality-action-row > div { display: grid; gap: 3px; }

.quality-action-row > div > span { color: #94a3b8; font-size: 11px; }

.quality-reference-button, .quality-excel-button { min-width: 112px; border-color: #1597c7; color: #7dd3fc; }

.quality-empty { padding: 40px 15px; color: #94a3b8; text-align: center; }

@media (max-width: 1250px) {

.journal-overview-bar .metal-sync-bar { flex-wrap: wrap; }

}

@media (max-width: 640px) {

.quality-filters { grid-template-columns: 1fr 1fr; }

.quality-filters button { grid-column: 1 / -1; }

.quality-summary { grid-template-columns: 1fr 1fr; }

.quality-metric { padding: 12px; }

.quality-metric strong { font-size: 19px; }

.quality-action-row { align-items: flex-end; }

.quality-action-row > div { max-width: 62%; }

.quality-detail-heading { flex-wrap: wrap; }

}

.journal-overview-bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  border: 1px solid rgba(56, 189, 248, .18);
  border-radius: 10px;
  background: rgba(15, 23, 42, .68);
  overflow: hidden;
}

.journal-workbench { display: grid; grid-template-columns: minmax(420px, .92fr) minmax(560px, 1.55fr); gap: 6px; }

.journal-workbench.without-tag-print { grid-template-columns: minmax(0, 1fr); }

.journal-workbench.without-tag-print .journal-toolbar { min-height: 40px; }

/* Reserve independent tracks for every role: sync text never sizes the chart. */
.journal-command-center .journal-overview-bar {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 430px;
  grid-template-rows: 24px 24px;
  gap: 6px;
  align-items: stretch;
  border: 0;
  background: transparent;
  overflow: visible;
}

.journal-command-center .metal-sync-bar { display: contents; }

.journal-command-center .metal-list-context {
  grid-area: 1 / 1 / 3 / 2;
  align-items: flex-start;
  min-width: 0;
  min-height: 0;
  padding: 7px 12px 0;
  border: 1px solid rgba(56,189,248,.18);
  border-radius: 9px;
  background: rgba(15,23,42,.68);
}

.journal-command-center .metal-list-context-title {
  font-size: 13px;
  line-height: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.journal-command-center .metal-sync-state {
  grid-area: 2 / 1 / 3 / 2;
  position: relative;
  min-width: 0;
  padding: 0 12px 5px;
  line-height: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.journal-command-center .metal-toolbar-actions {
  grid-area: 1 / 3 / 3 / 4;
  display: grid;
  grid-template-columns: 1fr .8fr 1.2fr;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  min-width: 0;
  border: 1px solid rgba(56,189,248,.18);
  border-radius: 9px;
  background: rgba(15,23,42,.68);
}

.journal-command-center .metal-toolbar-actions button { min-width: 0; padding: 6px 4px; min-height: 40px; font-size: 11px; }

@media (min-width: 1201px) {

#metal-view-journal.aligned-inspection-layout:not(.hidden) {
    display: grid;
    grid-template-columns: minmax(360px, 1.05fr) minmax(270px, 1fr) 260px 164px;
    grid-template-rows: 24px 24px 40px;
    gap: 6px;
    align-items: stretch;
  }

#metal-view-journal.aligned-inspection-layout > .journal-command-center { display: contents; }

#metal-view-journal.aligned-inspection-layout > .journal-search-sticky {
    grid-area: 1 / 2 / 2 / 3;
    grid-row: 3 / 4;
    align-self: stretch;
    margin: 0;
    padding: 0;
  }

#metal-view-journal.aligned-inspection-layout > .journal-search-sticky .journal-search-input { height: 40px; padding: 0 12px; }

#metal-view-journal.aligned-inspection-layout > :not(.journal-command-center):not(.journal-search-sticky) { grid-column: 1 / -1; }

.journal-command-center.aligned-inspection-tools {
    grid-template-columns: minmax(360px, 1.05fr) minmax(270px, 1fr) 260px 164px;
    grid-template-rows: 24px 24px 40px;
    gap: 6px;
    align-items: stretch;
  }

.aligned-inspection-tools .journal-overview-bar,
  .aligned-inspection-tools .metal-sync-bar,
  .aligned-inspection-tools .journal-workbench,
  .aligned-inspection-tools .journal-toolbar { display: contents; }

.aligned-inspection-tools .metal-list-context {
    grid-area: 1 / 1 / 3 / 2;
    align-items: flex-start;
    min-width: 0;
    min-height: 0;
    padding: 7px 12px 0;
    border: 1px solid rgba(56,189,248,.18);
    border-radius: 9px;
    background: rgba(15,23,42,.68);
  }

.aligned-inspection-tools .metal-list-context-title { font-size: 13px; line-height: 18px; white-space: nowrap; }

.aligned-inspection-tools .metal-sync-state {
    grid-area: 2 / 1 / 3 / 2;
    position: relative;
    min-width: 0;
    padding: 0 12px 5px;
    line-height: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

.aligned-inspection-tools .metal-toolbar-actions {
    grid-area: 1 / 3 / 3 / 5;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) 164px;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    min-width: 0;
    border: 1px solid rgba(56,189,248,.18);
    border-radius: 9px;
    background: rgba(15,23,42,.68);
  }

.aligned-inspection-tools .metal-toolbar-actions button { min-width: 0; padding: 6px 4px; min-height: 40px; font-size: 11px; }

.aligned-inspection-tools .tag-print-panel {
    grid-area: 3 / 1 / 4 / 2;
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
    padding: 4px 9px;
    min-width: 0;
  }

.aligned-inspection-tools .tag-print-title { font-size: 10px; line-height: 12px; }

.aligned-inspection-tools .tag-print-controls { min-width: 0; }

.aligned-inspection-tools .tag-print-query { height: 24px; min-height: 0; padding: 3px 6px; line-height: 16px; }

.aligned-inspection-tools .tag-print-submit { height: 24px; min-height: 0; padding: 3px 12px; line-height: 16px; }

.aligned-inspection-tools .journal-status-filter-wrap {
    grid-area: 3 / 3 / 4 / 4;
    min-width: 0;
    padding: 6px 8px;
    border: 1px solid rgba(56,189,248,.18);
    border-radius: 9px;
    background: rgba(15,23,42,.68);
  }

.aligned-inspection-tools .journal-status-filter { width: 100%; min-width: 0; }

.aligned-inspection-tools .btn-export-excel { grid-area: 3 / 4 / 4 / 5; width: 100%; height: 100%; margin: 0; justify-content: center; }

}

@media (min-width: 1251px) {

#metal-view-journal.aligned-inspection-layout:not(.hidden) {
    grid-template-columns: 430px minmax(270px, 1fr) 260px 164px;
  }

.journal-command-center .journal-overview-bar {
    grid-template-columns: 430px minmax(0, 1fr) 430px;
  }

.journal-command-center.aligned-inspection-tools {
    grid-template-columns: 430px minmax(270px, 1fr) 260px 164px;
  }

}

@media (min-width: 901px) {

#metal-view-journal.standard-journal-layout:not(.hidden) {
    display: grid;
    grid-template-columns: minmax(200px, 1fr) 164px;
    grid-template-rows: 54px 40px;
    gap: 6px;
  }

#metal-view-journal.standard-journal-layout[data-journal-scope="journal"] {
    grid-template-columns: minmax(200px, 1fr) 260px 164px;
  }

#metal-view-journal.standard-journal-layout[data-journal-scope="journal"][data-user-role="passport"] {
    grid-template-columns: minmax(200px, 1fr) 260px 260px 164px;
  }

/* Non-printing roles use the same fixed header/tool heights as inspectors.
     Flex fills hidden filter slots instead of leaving empty auto-grid columns. */
  .journal-command-center:not(.aligned-inspection-tools) {
    grid-template-rows: 54px 40px;
    align-content: start;
  }

.journal-command-center:not(.aligned-inspection-tools) .journal-overview-bar {
    min-height: 0;
    height: 54px;
    box-sizing: border-box;
  }

.journal-command-center:not(.aligned-inspection-tools) .journal-toolbar {
    display: flex;
    align-items: stretch;
    gap: 6px;
    height: 40px;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-sizing: border-box;
  }

.journal-command-center:not(.aligned-inspection-tools) .journal-status-filter-wrap {
    flex: 0 1 260px;
    min-width: 0;
    padding: 6px 8px;
    border: 1px solid rgba(56,189,248,.18);
    border-radius: 9px;
    background: rgba(15,23,42,.68);
    box-sizing: border-box;
  }

.journal-command-center:not(.aligned-inspection-tools) .journal-status-filter { width: 100%; min-width: 0; }

.journal-command-center:not(.aligned-inspection-tools) .btn-export-excel {
    flex: 0 0 164px;
    width: 164px;
    height: 100%;
    margin: 0;
    justify-content: center;
    box-sizing: border-box;
  }

/* Keep the same grid in both tabs; only the left panel spans the chart slot. */
  .journal-command-center[data-journal-scope="work"] .metal-list-context,
  .journal-command-center[data-journal-scope="work"] .metal-sync-state {
    grid-column: 1 / 3;
  }

#metal-view-journal.standard-journal-layout > .journal-command-center,
  #metal-view-journal.standard-journal-layout > .journal-command-center .journal-workbench,
  #metal-view-journal.standard-journal-layout > .journal-command-center .journal-toolbar { display: contents; }

#metal-view-journal.standard-journal-layout > .journal-command-center .journal-overview-bar { grid-area: 1 / 1 / 2 / -1; }

#metal-view-journal.standard-journal-layout > .journal-search-sticky {
    grid-area: 2 / 1 / 3 / 2;
    align-self: stretch;
    margin: 0;
    padding: 0;
  }

#metal-view-journal.standard-journal-layout > .journal-search-sticky .journal-search-input { height: 40px; padding: 0 12px; }

#metal-view-journal.standard-journal-layout > .journal-command-center #metal-journal-status-filter-wrap { grid-area: 2 / 2 / 3 / 3; }

#metal-view-journal.standard-journal-layout > .journal-command-center #metal-passport-action-filter-wrap { grid-area: 2 / 3 / 3 / 4; }

#metal-view-journal.standard-journal-layout > .journal-command-center .btn-export-excel { grid-column: -2 / -1; grid-row: 2 / 3; }

#metal-view-journal.standard-journal-layout > :not(.journal-command-center):not(.journal-search-sticky) { grid-column: 1 / -1; }

}

@media (min-width: 1201px) {

#metal-view-journal.standard-journal-layout:not(.hidden),
  #metal-view-journal.standard-journal-layout[data-journal-scope="journal"],
  #metal-view-journal.standard-journal-layout[data-journal-scope="journal"][data-user-role="passport"] {
    grid-template-columns: minmax(360px, 1.05fr) minmax(270px, 1fr) 260px 164px;
  }

#metal-view-journal.standard-journal-layout > .journal-command-center .journal-result-summary-panel:not(.hidden) {
    display: flex;
    grid-area: 2 / 1 / 3 / 2;
  }

#metal-view-journal.standard-journal-layout > .journal-search-sticky { grid-area: 2 / 2 / 3 / 3; }

#metal-view-journal.standard-journal-layout > .journal-command-center #metal-journal-status-filter-wrap { grid-area: 2 / 3 / 3 / 4; }

#metal-view-journal.standard-journal-layout > .journal-command-center #metal-passport-action-filter-wrap { grid-area: 2 / 1 / 3 / 2; }

#metal-view-journal.standard-journal-layout > .journal-command-center .btn-export-excel { grid-area: 2 / 4 / 3 / 5; }

#metal-view-journal.standard-journal-layout > .journal-command-center .metal-toolbar-actions { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) 164px; }

}

@media (min-width: 1251px) {

#metal-view-journal.standard-journal-layout:not(.hidden),
  #metal-view-journal.standard-journal-layout[data-journal-scope="journal"],
  #metal-view-journal.standard-journal-layout[data-journal-scope="journal"][data-user-role="passport"] {
    grid-template-columns: 430px minmax(270px, 1fr) 260px 164px;
  }

}

@media (max-width: 900px) {

.journal-command-center .journal-overview-bar {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 24px 24px auto auto;
  }

.journal-command-center .metal-toolbar-actions { grid-area: 3 / 1 / 4 / 2; }

.journal-command-center[data-journal-scope="work"] .journal-overview-bar { grid-template-rows: 24px 24px auto; }

.journal-command-center[data-journal-scope="work"] .metal-toolbar-actions { grid-area: 3 / 1 / 4 / 2; }

}

@media (min-width: 1600px) {

.aligned-inspection-tools .tag-print-panel {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 6px;
  }

.aligned-inspection-tools .tag-print-controls { display: contents; }

.aligned-inspection-tools .tag-print-label { display: none; }

.aligned-inspection-tools .tag-print-submit { min-width: 74px; padding-inline: 10px; }

}

input[type="date"] { color-scheme: dark; cursor: pointer; }

input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .85; }

.metal-list-context {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0 14px;
  min-height: 42px;
  border: 0;
  border-right: 1px solid rgba(56, 189, 248, .16);
  background: transparent;
}

.metal-list-context-title { color: #e2e8f0; font-size: 14px; font-weight: 850; }

.journal-mini-states { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

.journal-mini-state { display: inline-flex; align-items: center; min-height: 29px; padding: 5px 11px; border: 1px solid rgba(148,163,184,.18); border-radius: 999px; font-size: 12px; line-height: 1.2; font-weight: 850; background: rgba(148,163,184,.12); color: #cbd5e1; }

.journal-mini-state.is-ok { color: #86efac; background: rgba(34,197,94,.15); }

.journal-mini-state.is-claim { color: #fdba74; background: rgba(249,115,22,.15); }

.journal-mini-state.is-cert { color: #7dd3fc; background: rgba(14,165,233,.15); }

/* Голые классы без .chip - в разметке этот класс всегда идёт вместе с .chip (0,3,0), которая специфичнее и потому
   побеждает сама по себе; эти правила остаются только как визуальный фолбэк на случай будущей разметки без .chip. */
.certificate-journal-button { border-color: rgba(14,165,233,.65); background: rgba(3,105,161,.2); color: #bae6fd; }

.passport-primary-action { border-color: rgba(34,197,94,.7); background: rgba(22,101,52,.72); color: #dcfce7; }

.passport-action-group { border-top-color: rgba(34,197,94,.25); }

.journal-search-sticky .journal-search-input { width: 100%; min-width: 0; height: var(--metal-command-height); padding: 0 12px; font-size: 12px; box-sizing: border-box; }

.production-search-panel {
  margin: 0 0 10px;
  padding: 10px 12px;
  border: 1px solid rgba(56, 189, 248, .2);
  border-radius: 10px;
  background: rgba(15, 23, 42, .62);
}

.production-search-title { margin-bottom: 7px; color: #7dd3fc; font-size: 11px; font-weight: 850; text-transform: uppercase; letter-spacing: .04em; }

.production-search-grid { display: grid; grid-template-columns: .8fr 1.2fr 1.2fr 1.2fr auto; gap: 8px; align-items: center; }

.production-search-grid .form-input { min-width: 0; padding: 8px 10px; }

.production-search-reset { min-height: 38px; }

.passport-search-panel { padding: 6px 8px; margin-bottom: 6px; }

.passport-search-grid { display: grid; grid-template-columns: auto repeat(6, minmax(105px, 1fr)) auto; gap: 6px; align-items: center; }

.passport-search-grid .form-input { width: 100%; min-width: 0; padding: 7px 8px; font-size: 12px; box-sizing: border-box; }

.passport-search-title { margin: 0; white-space: nowrap; }

.passport-search-reset { min-height: 34px; white-space: nowrap; }

.tag-print-panel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 7px 9px;
  border: 1px solid rgba(56, 189, 248, .2);
  border-radius: 10px;
  background: rgba(15, 23, 42, .7);
  box-sizing: border-box;
}

.tag-print-title {
  margin: 0;
  color: #38bdf8;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.tag-print-controls {
  display: grid;
  grid-template-columns: auto minmax(90px, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.tag-print-label { color: #94a3b8; font-size: 11px; white-space: nowrap; }

.tag-print-query {
  width: 100%;
  min-width: 0;
  padding: 6px;
  box-sizing: border-box;
}

.tag-print-panel .tag-print-submit {
  min-width: 0;
  padding: 6px 14px;
  font-size: 12px;
  white-space: nowrap;
}

.journal-result-summary-panel {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 7px 12px;
  border: 1px solid rgba(56, 189, 248, .2);
  border-radius: 10px;
  background: rgba(15, 23, 42, .7);
  box-sizing: border-box;
}

.journal-result-summary-title {
  color: #38bdf8;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.journal-result-summary-panel strong {
  min-width: 0;
  color: #e2e8f0;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (min-width: 901px) {

.journal-table { font-size: 15px; }

.journal-table th { padding: 11px 9px; font-size: 13px; }

.journal-table td { padding: 12px 9px; line-height: 1.4; }

.journal-number, .journal-primary { font-size: 15.5px; }

.journal-secondary, .journal-problem { font-size: 12.5px; }

.journal-action-caption { font-size: 9.5px; }

.badge-status { font-size: 12px; padding: 5px 8px; }

}

.metal-journal-pagination {
  position: fixed;
  left: 50%;
  bottom: calc(max(14px, env(safe-area-inset-bottom)) + 62px);
  transform: translateX(-50%);
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  max-width: calc(100vw - 20px);
  padding: 6px;
  border: 1px solid rgba(56, 189, 248, .22);
  border-radius: 12px;
  background: rgba(10, 17, 29, .95);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .38);
}

.metal-journal-page-buttons, .tmc-page-buttons { display: flex; align-items: center; gap: 5px; }

.metal-journal-pagination button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  line-height: 1;
  min-width: 30px;
  min-height: 32px;
  padding: 5px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: #cbd5e1;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
}

.metal-journal-pagination .ico { display: block; width: 12px; height: 12px; flex: none; }
.metal-journal-pagination button:hover:not(:disabled) { border-color: rgba(56, 189, 248, .55); background: rgba(14, 165, 233, .25); color: #fff; }

.metal-journal-pagination button:focus-visible { outline: 2px solid #38bdf8; outline-offset: 2px; }

.metal-journal-pagination button.is-current { border-color: #38bdf8; background: #0284c7; color: #fff; box-shadow: 0 0 14px rgba(14, 165, 233, .32); }

.metal-journal-pagination button:disabled { opacity: .38; cursor: default; }

.metal-journal-page-ellipsis { min-width: 18px; color: #94a3b8; text-align: center; }

.metal-journal-page-info, .tmc-page-info { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

#metal-view-journal.has-pagination { padding-bottom: 60px; }

@media (max-width: 560px) {

.metal-journal-pagination { bottom: calc(max(8px, env(safe-area-inset-bottom)) + 62px); gap: 3px; }

.metal-journal-page-buttons, .tmc-page-buttons { gap: 3px; }

.metal-journal-pagination button { min-width: 28px; min-height: 30px; padding: 4px; }

}

@media (max-width: 900px) {

.production-search-grid { grid-template-columns: 1fr 1fr; }

.production-search-reset { grid-column: 1 / -1; }

.journal-overview-bar { grid-template-columns: minmax(0, 1fr); }

.metal-list-context { display: flex; min-height: 38px; padding: 0 10px; border-right: 0; border-bottom: 1px solid rgba(56, 189, 248, .14); }

.metal-sync-bar { flex-wrap: wrap; }

.journal-workbench { grid-template-columns: minmax(0, 1fr); }

.journal-toolbar { grid-template-columns: minmax(0, 1fr); align-items: stretch; }

.journal-status-filter-wrap { display: grid; grid-template-columns: auto minmax(0, 1fr); }

.journal-status-filter-wrap .journal-status-filter { width: 100%; min-width: 0; }

.btn-export-excel { width: 100%; justify-content: center; }

.passport-search-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.passport-search-title,
  .passport-search-reset { grid-column: 1 / -1; }

.passport-search-reset { width: 100%; justify-content: center; }

}

@media (min-width: 901px) and (max-width: 1200px) {

.journal-workbench { grid-template-columns: minmax(0, 1fr); }

.passport-search-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.passport-search-title { grid-column: 1 / -1; }

}

.act-journal-button {
  border-color: #2563eb;
  background: rgba(37, 99, 235, 0.2);
  color: #bfdbfe;
  font-weight: 850;
}

@media (max-width: 560px) {

.tag-print-panel { grid-template-columns: minmax(0, 1fr); gap: 6px; }

.tag-print-controls { grid-template-columns: minmax(0, 1fr); }

.tag-print-label { margin-bottom: -2px; }

.tag-print-panel .tag-print-submit { width: 100%; min-height: 42px; }

.passport-search-grid { grid-template-columns: minmax(0, 1fr); }

.passport-search-title,
  .passport-search-reset { grid-column: auto; }

}

html[data-theme="light"] .metal-journal-pagination button { color: #334155; }

html[data-theme="light"] .metal-journal-pagination button:hover:not(:disabled) { border-color: #38bdf8; background: #e0f2fe; color: #075985; }

html[data-theme="light"] .metal-journal-pagination button.is-current { background: #0284c7; color: #fff; }

html[data-theme="light"] .chip {
  border-color: #cbd5e1;
  background: #f4f7fa;
  color: #34495e;
}

html[data-theme="light"] .chip:hover { border-color: #0ea5e9; color: #075985; background: #edf8fe; }

html[data-theme="light"] .journal-action-stack .chip:focus-visible { outline-color: #0369a1; }

html[data-theme="light"] .journal-table th {
  border-bottom-color: #b9ccdc;
  background: #dfe8f1;
  color: #4b5f73;
}

html[data-theme="light"] .journal-table td { border-bottom-color: #dbe4ec; color: #243447; }

html[data-theme="light"] .journal-number,
html[data-theme="light"] .journal-mobile-number { color: #075985; }

html[data-theme="light"] .journal-table td.journal-number { color: #075985; }

html[data-theme="light"] .journal-problem { color: #a61b2b; }

html[data-theme="light"] .journal-table tr:hover,
html[data-theme="light"] .journal-table tr:focus-visible { background: rgba(2, 132, 199, .08); }

html[data-theme="light"] .journal-mobile-card {
  border-color: #c6d5e2;
  background: rgba(255, 255, 255, .9);
}

html[data-theme="light"] .journal-mobile-value { color: #243447; }

html[data-theme="light"] .journal-mobile-label { color: #3f5165; }

html[data-theme="light"] .journal-mini-state {
  border-color: #b7c7d5;
  background: #e7edf3;
  color: #334155;
}

html[data-theme="light"] .journal-mini-state.is-ok { border-color: #86d5ad; background: #d9f5e6; color: #08764f; }

html[data-theme="light"] .journal-mini-state.is-claim { border-color: #f0b47e; background: #fff0df; color: #a9440b; }

html[data-theme="light"] .journal-mini-state.is-cert { border-color: #80c9e8; background: #dff3fd; color: #075985; }

html[data-theme="light"] .journal-search-sticky { background: transparent; }

html[data-theme="light"] .journal-search-sticky.is-stuck {
  background: transparent;
  box-shadow: none;
}

html[data-theme="light"] .journal-search-sticky.is-stuck .journal-search-input {
  border-color: rgba(3, 105, 161, .28);
  box-shadow: 0 10px 24px rgba(71, 85, 105, .18);
}

html[data-theme="light"] .journal-command-center .metal-list-context,
html[data-theme="light"] .journal-command-center .metal-toolbar-actions,
html[data-theme="light"] .journal-command-center:not(.aligned-inspection-tools) .journal-status-filter-wrap,
html[data-theme="light"] .aligned-inspection-tools .metal-list-context,
html[data-theme="light"] .aligned-inspection-tools .metal-toolbar-actions,
html[data-theme="light"] .aligned-inspection-tools .journal-status-filter-wrap {
  border-color: rgba(3, 105, 161, .2);
  background: rgba(255, 255, 255, .83);
}

html[data-theme="light"] .metal-subnav {
  border-color: rgba(3, 105, 161, .22);
}

html[data-theme="light"] .metal-tab-btn { color: #3f5165; }

html[data-theme="light"] .journal-controller-comment { background: rgba(14, 116, 144, .08); }

html[data-theme="light"] .journal-controller-comment strong { color: #075985; }

@media print {

.btn-theme-toggle, .btn-badge-notify, .metal-journal-pagination { display: none !important; }

}

html[data-theme="light"] .metal-tab-btn.active { color: #075985; border-bottom-color: #075985; }

/* ── Цвета и интервалы компонентов верхней панели журнала ── */
#metal-view-journal {
  --jp-pad: 8px;
  --jp-side: 12px;
  --jp-window: linear-gradient(180deg, rgba(148, 163, 184, .09) 0%, rgba(23, 32, 51, .5) 34%, rgba(17, 27, 45, .5) 100%);
  --jp-border: rgba(148, 163, 184, .22);
  --jp-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 14px 34px rgba(0, 0, 0, .3);
  --jp-line: rgba(148, 163, 184, .18);
  --jp-fill: rgba(148, 163, 184, .08);
  --jp-hover-border: rgba(56, 189, 248, .5);
  --jp-accent-text: #7dd3fc;
  --jp-btn-text: #dbe8f6;
  --jp-btn-hover-text: #fff;
  --jp-soft: rgba(148, 163, 184, .1);
  --jp-soft-hover: rgba(56, 189, 248, .17);
  --jp-soft-border: rgba(148, 163, 184, .28);
  --jp-soft-accent: rgba(56, 189, 248, .12);
  --jp-soft-accent-border: rgba(56, 189, 248, .4);
}

html[data-theme="light"] #metal-view-journal {
  --jp-window: linear-gradient(180deg, rgba(255, 255, 255, .78) 0%, rgba(255, 255, 255, .6) 34%, rgba(255, 255, 255, .5) 100%);
  --jp-border: rgba(71, 85, 105, .22);
  --jp-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 10px 26px rgba(30, 64, 92, .1);
  --jp-line: rgba(3, 105, 161, .2);
  --jp-fill: rgba(15, 23, 42, .045);
  --jp-hover-border: rgba(2, 132, 199, .5);
  --jp-accent-text: #075985;
  --jp-btn-text: #334155;
  --jp-btn-hover-text: #075985;
  --jp-soft: rgba(15, 23, 42, .05);
  --jp-soft-hover: rgba(14, 165, 233, .15);
  --jp-soft-border: rgba(15, 23, 42, .18);
  --jp-soft-accent: rgba(14, 165, 233, .12);
  --jp-soft-accent-border: rgba(2, 132, 199, .42);
}

#metal-journal-command-center {
  border: 1px solid var(--jp-border);
  border-radius: 10px;
  background: var(--jp-window);
  box-shadow: var(--jp-shadow);
}

/* Контейнер имеет собственный «бокс» только на узких экранах (там нет общей сетки): даём ему поля окна. */
#metal-journal-command-center { padding: var(--jp-pad) var(--jp-side); }

@media (min-width: 1201px) {

#metal-view-journal.aligned-inspection-layout:not(.hidden) { padding-top: var(--jp-pad); padding-inline: var(--jp-side); }

#metal-view-journal.aligned-inspection-layout:not(.hidden) > :not(.journal-command-center):not(.journal-search-sticky):not(.metal-journal-pagination) { margin-inline: calc(-1 * var(--jp-side)); }

}

@media (min-width: 901px) {

#metal-view-journal.standard-journal-layout:not(.hidden) { padding-top: var(--jp-pad); padding-inline: var(--jp-side); }

#metal-view-journal.standard-journal-layout:not(.hidden) > :not(.journal-command-center):not(.journal-search-sticky):not(.metal-journal-pagination) { margin-inline: calc(-1 * var(--jp-side)); }

}

#metal-view-journal:not(.hidden) > .table-container { width: auto; }

@media (min-width: 1201px) {

#metal-view-journal.aligned-inspection-layout > .journal-search-sticky[data-journal-scope="work"],
  #metal-view-journal.standard-journal-layout > .journal-search-sticky[data-journal-scope="work"] { grid-column: 2 / 3; }

.journal-command-center.aligned-inspection-tools[data-journal-scope="work"] .btn-export-excel { grid-area: 3 / 3 / 4 / 5; }

#metal-view-journal.standard-journal-layout > .journal-command-center[data-journal-scope="work"] .btn-export-excel { grid-area: 2 / 3 / 3 / 5; width: 100%; }

}

#metal-journal-command-center .metal-list-context,
#metal-journal-command-center .metal-sync-state,
#metal-journal-command-center .metal-toolbar-actions,
#metal-journal-command-center .tag-print-panel,
#metal-journal-command-center .journal-status-filter-wrap,
#metal-journal-command-center .journal-result-summary-panel,
#metal-journal-command-center .journal-toolbar { padding-inline: 0; }

#metal-journal-command-center .journal-workbench { border-top: 1px solid var(--jp-line); padding-top: var(--jp-pad); }

html[data-theme="light"] #metal-journal-command-center .metal-sync-state:not(.is-ok):not(.is-error) { color: #3f5165; }

/* Кнопки панели — «мягкие» плоские: лёгкая заливка и тонкая рамка; при наведении подсвечиваются синим. */
#metal-journal-command-center .metal-toolbar-actions .btn-metal-small,
#metal-journal-command-center .btn-export-excel {
  border: 1px solid var(--jp-soft-border);
  border-radius: 10px;
  box-shadow: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

#metal-journal-command-center .metal-toolbar-actions .btn-metal-small { background: var(--jp-soft); color: var(--jp-btn-text); }

#metal-journal-command-center .btn-export-excel { border-color: var(--jp-soft-accent-border); background: var(--jp-soft-accent); color: var(--jp-accent-text); }

#metal-journal-command-center .metal-toolbar-actions .btn-metal-small:hover:not(:disabled),
#metal-journal-command-center .metal-toolbar-actions .btn-metal-small:focus-visible,
#metal-journal-command-center .btn-export-excel:hover,
#metal-journal-command-center .btn-export-excel:focus-visible {
  border-color: var(--jp-hover-border);
  background: var(--jp-soft-hover);
  color: var(--jp-btn-hover-text);
}

@media (max-width: 900px) {

#metal-journal-command-center { padding: var(--jp-pad) 10px; }

}

.journal-action-stack .chip,
.journal-mobile-actions .chip {
  --g: 148, 163, 184; --gl: 71, 85, 105; --gt: #e2e8f0; --gtl: #1e293b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: inherit;
  font-weight: 700;
  letter-spacing: .01em;
  padding: 8px 14px;
  border: 1px solid rgba(var(--g), .5);
  border-radius: 10px;
  color: var(--gt);
  box-shadow: none;
  text-shadow: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, filter .15s ease;
}

.journal-action-stack .chip.chip-ok, .journal-mobile-actions .chip.chip-ok,
.journal-action-stack .chip.passport-primary-action, .journal-mobile-actions .chip.passport-primary-action { --g: 34, 197, 94; --gl: 22, 163, 74; --gt: #86efac; --gtl: #14532d; }

.journal-action-stack .chip.chip-warn, .journal-mobile-actions .chip.chip-warn { --g: 249, 115, 22; --gl: 234, 88, 12; --gt: #fdba74; --gtl: #7c2d12; }

.journal-action-stack .chip.chip-danger, .journal-mobile-actions .chip.chip-danger { --g: 239, 68, 68; --gl: 220, 38, 38; --gt: #fca5a5; --gtl: #7f1d1d; }

.journal-action-stack .chip.chip-teal, .journal-mobile-actions .chip.chip-teal { --g: 20, 184, 166; --gl: 13, 148, 136; --gt: #5eead4; --gtl: #134e4a; }

.journal-action-stack .chip.attachment-journal-button, .journal-mobile-actions .chip.attachment-journal-button,
.journal-action-stack .chip.certificate-journal-button, .journal-mobile-actions .chip.certificate-journal-button,
.journal-action-stack .chip.act-journal-button, .journal-mobile-actions .chip.act-journal-button { --g: 56, 189, 248; --gl: 2, 132, 199; --gt: #7dd3fc; --gtl: #075985; }

/* Эти классы задают цвета и рамку с !important — повторяем правила с тем же приоритетом. */
.journal-action-stack .chip.attachment-journal-button, .journal-mobile-actions .chip.attachment-journal-button,
.journal-action-stack .chip.certificate-journal-button, .journal-mobile-actions .chip.certificate-journal-button,
.journal-action-stack .chip.act-journal-button, .journal-mobile-actions .chip.act-journal-button,
.journal-action-stack .chip.journal-danger-action, .journal-mobile-actions .chip.journal-danger-action {
  border-color: rgba(var(--g), .5);
  background: transparent;
  color: var(--gt);
}

/* Загрузка сертификата — главное действие, если в строке нет блока «Решение» (например, у паспортиста). */
.journal-action-stack .chip:hover:not(:disabled),
.journal-mobile-actions .chip:hover:not(:disabled) { filter: none; }

.journal-action-stack .chip.attachment-journal-button:hover:not(:disabled), .journal-mobile-actions .chip.attachment-journal-button:hover:not(:disabled),
.journal-action-stack .chip.certificate-journal-button:hover:not(:disabled), .journal-mobile-actions .chip.certificate-journal-button:hover:not(:disabled),
.journal-action-stack .chip.act-journal-button:hover:not(:disabled), .journal-mobile-actions .chip.act-journal-button:hover:not(:disabled),
.journal-action-stack .chip.journal-danger-action:hover:not(:disabled), .journal-mobile-actions .chip.journal-danger-action:hover:not(:disabled) { background: rgba(var(--g), .14); border-color: rgba(var(--g), .8); }

.journal-action-stack .chip:active:not(:disabled),
.journal-mobile-actions .chip:active:not(:disabled) { transform: none; filter: none; }

html[data-theme="light"] .journal-action-stack .chip,
html[data-theme="light"] .journal-mobile-actions .chip {
  border-color: rgba(var(--gl), .55);
  color: var(--gtl);
}

html[data-theme="light"] .journal-action-stack .chip.attachment-journal-button, html[data-theme="light"] .journal-mobile-actions .chip.attachment-journal-button,
html[data-theme="light"] .journal-action-stack .chip.certificate-journal-button, html[data-theme="light"] .journal-mobile-actions .chip.certificate-journal-button,
html[data-theme="light"] .journal-action-stack .chip.act-journal-button, html[data-theme="light"] .journal-mobile-actions .chip.act-journal-button,
html[data-theme="light"] .journal-action-stack .chip.journal-danger-action, html[data-theme="light"] .journal-mobile-actions .chip.journal-danger-action {
  border-color: rgba(var(--gl), .55);
  background: rgba(255, 255, 255, .6);
  color: var(--gtl);
}

html[data-theme="light"] .journal-action-stack .chip:hover:not(:disabled),
html[data-theme="light"] .journal-mobile-actions .chip:hover:not(:disabled) { border-color: rgba(var(--gl), .85); }

html[data-theme="light"] .journal-action-stack .chip.attachment-journal-button:hover:not(:disabled), html[data-theme="light"] .journal-mobile-actions .chip.attachment-journal-button:hover:not(:disabled),
html[data-theme="light"] .journal-action-stack .chip.certificate-journal-button:hover:not(:disabled), html[data-theme="light"] .journal-mobile-actions .chip.certificate-journal-button:hover:not(:disabled),
html[data-theme="light"] .journal-action-stack .chip.act-journal-button:hover:not(:disabled), html[data-theme="light"] .journal-mobile-actions .chip.act-journal-button:hover:not(:disabled),
html[data-theme="light"] .journal-action-stack .chip.journal-danger-action:hover:not(:disabled), html[data-theme="light"] .journal-mobile-actions .chip.journal-danger-action:hover:not(:disabled) { background: linear-gradient(rgba(var(--gl), .14), rgba(var(--gl), .14)), #fff; border-color: rgba(var(--gl), .85); }

@media (min-width: 901px) {

.journal-action-stack .chip { min-height: 36px; font-size: 12px; }

}

/* ── Размер металла крупнее (журнал, карточка на телефоне, «Полные сведения», ввод накладной) ── */
.journal-size { color: #f8fafc; font-weight: 750; font-variant-numeric: tabular-nums; letter-spacing: .01em; }

.journal-table td.journal-size { font-size: 15px; }

.journal-mobile-value.journal-size { font-size: 14.5px; }

html[data-theme="light"] .journal-size { color: #172033; }

/* ── Значки в кнопках панели, вкладках и накладной ── */
.metal-tab-btn { gap: 8px; }

@media (max-width: 560px) {

/* На узких экранах подпись вкладки часто переносится на две строки — иконка, отцентрованная по вертикали
     относительно ряда «иконка + перенесённый текст», «зависает» между строк текста. Ставим иконку сверху. */
  .metal-tab-btn { flex-direction: column; gap: 3px; }

}

.tag-print-title { display: flex; align-items: center; gap: 6px; }

#metal-journal-command-center .btn-metal-small { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }

/* ── Действия журнала: равнозначные кнопки, заливка цветом ~50% (без «главной» сплошной кнопки — чтобы не нажимать машинально только на выделенную) ── */
.journal-action-stack .chip, .journal-mobile-actions .chip { background: rgba(var(--g), .18); }

.journal-action-stack .chip:hover:not(:disabled), .journal-mobile-actions .chip:hover:not(:disabled) { background: rgba(var(--g), .3); border-color: rgba(var(--g), .85); }

.journal-action-stack .chip.chip-ok, .journal-mobile-actions .chip.chip-ok,
.journal-action-stack .chip.chip-warn, .journal-mobile-actions .chip.chip-warn,
.journal-action-stack .chip.chip-danger, .journal-mobile-actions .chip.chip-danger,
.journal-action-stack .chip.chip-teal, .journal-mobile-actions .chip.chip-teal,
.journal-action-stack .chip.passport-primary-action, .journal-mobile-actions .chip.passport-primary-action { background: rgba(var(--g), .35); border-color: rgba(var(--g), .65); color: #fff; }

.journal-action-stack .chip.chip-ok:hover:not(:disabled), .journal-mobile-actions .chip.chip-ok:hover:not(:disabled),
.journal-action-stack .chip.chip-warn:hover:not(:disabled), .journal-mobile-actions .chip.chip-warn:hover:not(:disabled),
.journal-action-stack .chip.chip-danger:hover:not(:disabled), .journal-mobile-actions .chip.chip-danger:hover:not(:disabled),
.journal-action-stack .chip.chip-teal:hover:not(:disabled), .journal-mobile-actions .chip.chip-teal:hover:not(:disabled),
.journal-action-stack .chip.passport-primary-action:hover:not(:disabled), .journal-mobile-actions .chip.passport-primary-action:hover:not(:disabled) { background: rgba(var(--g), .5); border-color: rgba(var(--g), .9); }

html[data-theme="light"] .journal-action-stack .chip.chip-ok, html[data-theme="light"] .journal-mobile-actions .chip.chip-ok,
html[data-theme="light"] .journal-action-stack .chip.chip-warn, html[data-theme="light"] .journal-mobile-actions .chip.chip-warn,
html[data-theme="light"] .journal-action-stack .chip.chip-danger, html[data-theme="light"] .journal-mobile-actions .chip.chip-danger,
html[data-theme="light"] .journal-action-stack .chip.chip-teal, html[data-theme="light"] .journal-mobile-actions .chip.chip-teal,
html[data-theme="light"] .journal-action-stack .chip.passport-primary-action, html[data-theme="light"] .journal-mobile-actions .chip.passport-primary-action { border-color: rgba(var(--gl), .75); color: var(--gtl); }

html[data-theme="light"] .journal-action-stack .chip.chip-ok:hover:not(:disabled), html[data-theme="light"] .journal-mobile-actions .chip.chip-ok:hover:not(:disabled),
html[data-theme="light"] .journal-action-stack .chip.chip-warn:hover:not(:disabled), html[data-theme="light"] .journal-mobile-actions .chip.chip-warn:hover:not(:disabled),
html[data-theme="light"] .journal-action-stack .chip.chip-danger:hover:not(:disabled), html[data-theme="light"] .journal-mobile-actions .chip.chip-danger:hover:not(:disabled),
html[data-theme="light"] .journal-action-stack .chip.chip-teal:hover:not(:disabled), html[data-theme="light"] .journal-mobile-actions .chip.chip-teal:hover:not(:disabled),
html[data-theme="light"] .journal-action-stack .chip.passport-primary-action:hover:not(:disabled), html[data-theme="light"] .journal-mobile-actions .chip.passport-primary-action:hover:not(:disabled) { border-color: rgba(var(--gl), .95); }

html[data-theme="light"] .metal-subnav { background: transparent; }

/* ── Единая высота элементов управления 40px (панель журнала, поиск, фильтры, статистика); «Статус» без подписи — список во всю колонку ── */
.journal-status-filter-wrap .journal-filter-caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

#metal-journal-command-center .journal-status-filter-wrap { padding: 0; }

#metal-journal-command-center .journal-status-filter-wrap .journal-status-filter { width: 100%; min-width: 0; height: 40px; padding: 0 10px; box-sizing: border-box; }

#metal-journal-command-center .btn-export-excel { height: 40px; min-height: 40px; box-sizing: border-box; }

#metal-journal-command-center .metal-toolbar-actions .btn-metal-small { min-height: 40px; height: 40px; }

@media (min-width: 1251px) {

.aligned-inspection-tools .tag-print-panel { grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; padding: 0; align-items: center; }

.aligned-inspection-tools .tag-print-controls { display: contents; }

.aligned-inspection-tools .tag-print-label { display: none; }

.aligned-inspection-tools .tag-print-title { font-size: 10px; line-height: 1.2; }

.aligned-inspection-tools .tag-print-query, .aligned-inspection-tools .tag-print-submit { height: 40px; min-height: 40px; box-sizing: border-box; padding-top: 0; padding-bottom: 0; line-height: normal; }

.aligned-inspection-tools .tag-print-submit { min-width: 84px; padding-inline: 14px; }

}

#metal-journal-command-center .journal-status-filter-wrap .journal-status-filter { font-weight: 500; font-size: 13px; }

.aligned-inspection-tools .tag-print-query { font-size: 12px; }

.aligned-inspection-tools .tag-print-query::placeholder { font-size: 12px; }

/* ── Светлая тема: фон почти белый (мягкий серо-голубой, не слепит), диагональные линии заметнее; поиск при прокрутке полупрозрачный ── */
html[data-theme="light"] .journal-search-input { background: rgba(255, 255, 255, .68); }

html[data-theme="light"] .journal-search-sticky.is-stuck .journal-search-input { background: rgba(255, 255, 255, .62); }

.examples-wrap .chip.example-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 14px; border: 1px solid rgba(148, 163, 184, .3); border-radius: 8px; background: rgba(148, 163, 184, .1); color: #e2e8f0; font-family: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; transition: background-color .15s ease, border-color .15s ease; }

.examples-wrap .chip.example-chip .ico { width: 14px; height: 14px; opacity: .7; }

.examples-wrap .chip.example-chip:hover { border-color: rgba(56, 189, 248, .7); background: rgba(56, 189, 248, .22); }

.examples-wrap .chip.metal-catalog-toggle { min-height: 34px; padding: 0 14px; border: 1px solid rgba(56, 189, 248, .7); border-radius: 8px; background: rgba(56, 189, 248, .35); color: #fff; font-family: inherit; font-size: 13.5px; font-weight: 800; }

html[data-theme="light"] html[data-theme="light"] html[data-theme="light"] .examples-wrap .chip.example-chip { border-color: rgba(81, 113, 136, .4); background: rgba(255, 255, 255, .7); color: #172033; }

html[data-theme="light"] .examples-wrap .chip.example-chip:hover { border-color: #0284c7; background: rgba(14, 165, 233, .18); }

html[data-theme="light"] .examples-wrap .chip.metal-catalog-toggle { border-color: #0284c7; background: rgba(14, 165, 233, .3); color: #0c4a6e; }

/* Светлая тема: вкладки модуля без «каркаса» при наведении (только подчёркивание), заглушки и стрелки читаемее */
.metal-tab-btn:hover:not(.active) { border-bottom-color: rgba(148, 163, 184, .45); }

html[data-theme="light"] .metal-tab-btn:hover:not(.active) { color: #075985; background: transparent; border-bottom-color: rgba(7, 89, 133, .45); }

/* ── Светлая тема: прозрачность как в тёмной (полный проход сравнения тем, 26.09.2026). Раньше карточки светлой темы были почти сплошными. ── */
html[data-theme="light"] .journal-table tbody tr.journal-tone-waiting { background: rgba(255, 240, 199, 0.6); }

html[data-theme="light"] .journal-mobile-card.journal-tone-waiting { background: linear-gradient(110deg, rgba(255, 230, 166, 0.6), rgba(255, 247, 223, 0.45)); }

html[data-theme="light"] .journal-table tbody tr.journal-tone-senior { background: rgba(255, 227, 208, 0.6); }

html[data-theme="light"] .journal-mobile-card.journal-tone-senior { background: linear-gradient(110deg, rgba(255, 215, 189, 0.6), rgba(255, 240, 230, 0.45)); }

html[data-theme="light"] .journal-table tbody tr.journal-tone-engineer { background: rgba(220, 233, 255, 0.6); }

html[data-theme="light"] .journal-mobile-card.journal-tone-engineer { background: linear-gradient(110deg, rgba(206, 223, 255, 0.6), rgba(238, 244, 255, 0.45)); }

html[data-theme="light"] .journal-table tbody tr.journal-tone-accepted { background: rgba(217, 243, 228, 0.6); }

html[data-theme="light"] .journal-mobile-card.journal-tone-accepted { background: linear-gradient(110deg, rgba(204, 235, 217, 0.6), rgba(238, 250, 243, 0.45)); }

html[data-theme="light"] .journal-table tbody tr.journal-tone-senior-approved { background: rgba(216, 241, 238, 0.6); }

html[data-theme="light"] .journal-mobile-card.journal-tone-senior-approved { background: linear-gradient(110deg, rgba(200, 233, 229, 0.6), rgba(238, 250, 248, 0.45)); }

html[data-theme="light"] .journal-table tbody tr.journal-tone-engineer-approved { background: rgba(217, 239, 250, 0.6); }

html[data-theme="light"] .journal-mobile-card.journal-tone-engineer-approved { background: linear-gradient(110deg, rgba(202, 232, 246, 0.6), rgba(239, 249, 253, 0.45)); }

html[data-theme="light"] .journal-table tbody tr.journal-tone-rejected { background: rgba(251, 222, 222, 0.6); }

html[data-theme="light"] .journal-mobile-card.journal-tone-rejected { background: linear-gradient(110deg, rgba(248, 204, 204, 0.6), rgba(255, 240, 240, 0.45)); }

html[data-theme="light"] .journal-mobile-card { background-color: rgba(255, 255, 255, .6); }

html[data-theme="light"] .journal-action-stack .chip, html[data-theme="light"] .journal-mobile-actions .chip { background: linear-gradient(rgba(var(--gl), .1), rgba(var(--gl), .1)), rgba(255, 255, 255, .5); }

html[data-theme="light"] .journal-action-stack .chip:hover:not(:disabled), html[data-theme="light"] .journal-mobile-actions .chip:hover:not(:disabled) { background: linear-gradient(rgba(var(--gl), .2), rgba(var(--gl), .2)), rgba(255, 255, 255, .5); }

html[data-theme="light"] .journal-action-stack .chip.chip-ok, html[data-theme="light"] .journal-mobile-actions .chip.chip-ok, html[data-theme="light"] .journal-action-stack .chip.chip-warn, html[data-theme="light"] .journal-mobile-actions .chip.chip-warn, html[data-theme="light"] .journal-action-stack .chip.chip-danger, html[data-theme="light"] .journal-mobile-actions .chip.chip-danger, html[data-theme="light"] .journal-action-stack .chip.chip-teal, html[data-theme="light"] .journal-mobile-actions .chip.chip-teal, html[data-theme="light"] .journal-action-stack .chip.passport-primary-action, html[data-theme="light"] .journal-mobile-actions .chip.passport-primary-action { background: linear-gradient(rgba(var(--gl), .35), rgba(var(--gl), .35)), rgba(255, 255, 255, .5); }

html[data-theme="light"] .journal-action-stack .chip.chip-ok:hover:not(:disabled), html[data-theme="light"] .journal-mobile-actions .chip.chip-ok:hover:not(:disabled), html[data-theme="light"] .journal-action-stack .chip.chip-warn:hover:not(:disabled), html[data-theme="light"] .journal-mobile-actions .chip.chip-warn:hover:not(:disabled), html[data-theme="light"] .journal-action-stack .chip.chip-danger:hover:not(:disabled), html[data-theme="light"] .journal-mobile-actions .chip.chip-danger:hover:not(:disabled), html[data-theme="light"] .journal-action-stack .chip.chip-teal:hover:not(:disabled), html[data-theme="light"] .journal-mobile-actions .chip.chip-teal:hover:not(:disabled), html[data-theme="light"] .journal-action-stack .chip.passport-primary-action:hover:not(:disabled), html[data-theme="light"] .journal-mobile-actions .chip.passport-primary-action:hover:not(:disabled) { background: linear-gradient(rgba(var(--gl), .48), rgba(var(--gl), .48)), rgba(255, 255, 255, .5); }

/* Управление журналом: экспорт занимает третье место в верхней группе кнопок. */
#metal-view-journal #metal-journal-command-center .metal-toolbar-actions > .btn-export-excel {
  grid-area: auto;
  flex: none;
  width: 100%;
  min-width: 0;
  margin: 0;
  justify-content: center;
}

/* Во вкладке «В работе» служебный заголовок и состояние синхронизации не занимают строку. */
#metal-journal-command-center[data-journal-scope="work"] .metal-list-context,
#metal-journal-command-center[data-journal-scope="work"] .metal-sync-state,
#metal-journal-command-center[data-journal-scope="work"] .journal-result-summary-panel:not(.hidden) { display: none; }

#metal-journal-command-center[data-journal-scope="work"] .metal-toolbar-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding-block: 0;
}

#metal-journal-command-center[data-journal-scope="work"] .tag-print-controls {
  grid-template-columns: minmax(0, 1fr) 84px;
  gap: 0;
}

#metal-journal-command-center[data-journal-scope="work"] .tag-print-label { display: none; }

#metal-journal-command-center[data-journal-scope="work"] .tag-print-title {
  gap: 8px;
  font-size: 15px;
  line-height: 20px;
}

#metal-journal-command-center[data-journal-scope="work"] .tag-print-title .ico {
  width: 18px;
  height: 18px;
  flex: none;
}

#metal-journal-command-center[data-journal-scope="work"] .tag-print-query {
  height: 40px;
  min-height: 40px;
  box-sizing: border-box;
  border-right: 0;
  border-radius: 10px 0 0 10px;
}

#metal-journal-command-center[data-journal-scope="work"] .tag-print-submit {
  width: 100%;
  min-width: 0;
  height: 40px;
  min-height: 40px;
  box-sizing: border-box;
  margin: 0;
  border-radius: 0 10px 10px 0;
  box-shadow: none;
}

#metal-view-journal[data-journal-scope="work"] > .journal-search-sticky { position: static; }

@media (min-width: 901px) {

#metal-view-journal[data-journal-scope="work"]:not(.hidden) {
    padding-inline: 0;
    row-gap: 20px;
  }

#metal-view-journal[data-journal-scope="work"]:not(.hidden) > :not(.journal-command-center):not(.journal-search-sticky):not(.metal-journal-pagination) {
    margin-inline: 0;
  }

}

@media (min-width: 1201px) {

/* В работе: все элементы управления занимают одну строку 40px. */
  #metal-view-journal.aligned-inspection-layout[data-journal-scope="work"]:not(.hidden) { grid-template-rows: 40px; }

#metal-view-journal.aligned-inspection-layout[data-journal-scope="work"] .tag-print-panel {
    grid-area: 1 / 1 / 2 / 2;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 84px;
    gap: 0;
    padding: 0;
  }

#metal-view-journal.aligned-inspection-layout[data-journal-scope="work"] .tag-print-title {
    justify-content: flex-end;
    padding-right: 8px;
  }

#metal-view-journal.aligned-inspection-layout[data-journal-scope="work"] .tag-print-controls { display: contents; }

#metal-view-journal.aligned-inspection-layout[data-journal-scope="work"] .tag-print-label { display: none; }

#metal-view-journal.aligned-inspection-layout[data-journal-scope="work"] .tag-print-query,
  #metal-view-journal.aligned-inspection-layout[data-journal-scope="work"] .tag-print-submit {
    height: 40px;
    min-height: 40px;
    box-sizing: border-box;
  }

#metal-view-journal.aligned-inspection-layout[data-journal-scope="work"] > .journal-search-sticky {
    grid-area: 1 / 2 / 2 / 3;
    align-self: stretch;
  }

#metal-view-journal.aligned-inspection-layout[data-journal-scope="work"] .metal-toolbar-actions { grid-area: 1 / 3 / 2 / 5; }

/* Журнал: фильтр статуса заполняет место прежней кнопки Excel. */
  #metal-view-journal.aligned-inspection-layout[data-journal-scope="journal"] #metal-journal-status-filter-wrap { grid-area: 3 / 3 / 4 / 5; }

#metal-view-journal.standard-journal-layout[data-journal-scope="journal"] #metal-journal-status-filter-wrap { grid-area: 2 / 3 / 3 / 5; }

}

@media (min-width: 901px) {

/* Для ролей без печати бирок поиск заполняет место перед кнопками. */
  #metal-view-journal.standard-journal-layout[data-journal-scope="work"]:not(.hidden) {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 430px);
    grid-template-rows: 40px;
  }

#metal-view-journal.standard-journal-layout[data-journal-scope="work"] .journal-overview-bar { display: contents; }

#metal-view-journal.standard-journal-layout[data-journal-scope="work"] .metal-toolbar-actions { grid-area: 1 / 2 / 2 / 3; }

#metal-view-journal.standard-journal-layout[data-journal-scope="work"] > .journal-search-sticky { grid-area: 1 / 1 / 2 / 2; align-self: stretch; }

#metal-view-journal.standard-journal-layout[data-journal-scope="work"] .journal-result-summary-panel:not(.hidden) { display: none; }

}

@media (max-width: 900px) {

#metal-journal-command-center[data-journal-scope="work"] { border: 0; background: transparent; box-shadow: none; }

#metal-journal-command-center[data-journal-scope="work"] .journal-overview-bar { grid-template-rows: auto; }

#metal-journal-command-center[data-journal-scope="work"] .metal-toolbar-actions { grid-area: 1 / 1 / 2 / 2; }

#metal-journal-command-center[data-journal-scope="work"] .journal-toolbar,
  #metal-journal-command-center[data-journal-scope="work"] .journal-workbench.without-tag-print { display: none; }

}

@media (min-width: 901px) and (max-width: 1200px) {

#metal-view-journal.standard-journal-layout[data-journal-scope="journal"] #metal-journal-status-filter-wrap { grid-column: 2 / 4; }

#metal-view-journal.standard-journal-layout[data-journal-scope="journal"][data-user-role="passport"]:not(.hidden) {
    grid-template-columns: minmax(200px, 1fr) minmax(180px, 1fr) minmax(180px, 1fr) 164px;
  }

#metal-view-journal.standard-journal-layout[data-journal-scope="journal"][data-user-role="passport"] #metal-journal-status-filter-wrap { grid-column: 2 / 4; }

#metal-view-journal.standard-journal-layout[data-journal-scope="journal"][data-user-role="passport"] #metal-passport-action-filter-wrap { grid-column: 4 / 5; }

}

/* Одна высота команд: 40px на десктопе, 42px в компактной раскладке. */
#metal-view-journal { --metal-command-height: 42px; }

@media (min-width: 901px) {
  #metal-view-journal { --metal-command-height: 40px; }
}

/* «В работе»: поиск и обновление занимают одну строку между вкладками и журналом. */
.metal-subnav:has(#metal-mtab-work.active),
.metal-subnav:has(#metal-mtab-journal.active) { margin-bottom: 12px; }

#metal-screen #metal-view-journal[data-journal-scope="work"]:not(.hidden) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 140px;
  grid-template-rows: var(--metal-command-height);
  column-gap: 6px;
  row-gap: 16px;
  padding-top: 0;
  padding-inline: 0;
}

#metal-screen #metal-journal-command-center[data-journal-scope="work"] .journal-workbench,
#metal-screen #metal-journal-command-center[data-journal-scope="work"] .quality-mini,
#metal-screen #metal-journal-command-center[data-journal-scope="work"] .metal-toolbar-actions > .metal-journal-spreadsheet,
#metal-screen #metal-journal-command-center[data-journal-scope="work"] .metal-toolbar-actions > .btn-export-excel { display: none; }

#metal-screen #metal-journal-command-center[data-journal-scope="work"],
#metal-screen #metal-journal-command-center[data-journal-scope="work"] .journal-overview-bar,
#metal-screen #metal-journal-command-center[data-journal-scope="work"] .metal-sync-bar,
#metal-screen #metal-journal-command-center[data-journal-scope="work"] .metal-toolbar-actions { display: contents; }

#metal-screen #metal-view-journal[data-journal-scope="work"] > .journal-search-sticky {
  grid-area: 1 / 1;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  align-self: stretch;
}

#metal-screen #metal-view-journal[data-journal-scope="work"] > .journal-search-sticky .journal-search-input { height: var(--metal-command-height); }

#metal-screen #metal-journal-command-center[data-journal-scope="work"] .metal-toolbar-actions > .metal-journal-refresh {
  grid-area: 1 / 2;
  width: 100%;
  min-width: 0;
  margin: 0;
}

#metal-screen #metal-view-journal[data-journal-scope="work"] > :not(.journal-command-center):not(.journal-search-sticky) {
  grid-column: 1 / -1;
  margin-inline: 0;
}

#metal-screen #metal-view-journal[data-journal-scope="work"] .journal-mobile-list { margin-top: 0; }
#metal-screen #metal-view-journal[data-journal-scope="work"] > .table-container { margin-top: 0; }

@media (min-width: 1100px) {
  #metal-screen #metal-view-journal[data-journal-scope="work"]:not(.hidden) {
    grid-template-columns: calc((100% - 700px) / 2) 700px 146px minmax(0, 1fr);
    column-gap: 0;
  }

  #metal-screen #metal-view-journal[data-journal-scope="work"] > .journal-search-sticky { grid-area: 1 / 2; }

  #metal-screen #metal-journal-command-center[data-journal-scope="work"] .metal-toolbar-actions > .metal-journal-refresh {
    grid-area: 1 / 3;
    width: 140px;
    margin-left: 6px;
  }
}

@media (max-width: 600px) {
  #metal-screen #metal-view-journal[data-journal-scope="work"]:not(.hidden) { grid-template-columns: minmax(0, 1fr) 112px; }
}

/* Заголовок и три вкладки приёмки металла читаются чуть крупнее на всех экранах. */
#metal-screen > .card > .title-h1 { font-size: 17px; }
#metal-screen .metal-tab-btn { font-size: 14px; }

@media (max-width: 560px) {
  #metal-screen .metal-tab-btn { font-size: 12px; }
}

/* Полный журнал без общей подложки; внешние интервалы равны вкладке «В работе». */
#metal-screen #metal-view-journal[data-journal-scope="journal"]:not(.hidden) { padding-top: 0; }

#metal-screen #metal-journal-command-center[data-journal-scope="journal"] {
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

#metal-screen #metal-view-journal[data-journal-scope="journal"] > .table-container { margin-top: 10px; }

@media (max-width: 900px) {
  #metal-screen #metal-view-journal[data-journal-scope="journal"] .journal-mobile-list { margin-top: 16px; }
}

/* На телефоне оставляем рабочую область журнала компактной: печать бирок и мини-статистика открываются на десктопе. */
@media (max-width: 600px) {
  #metal-screen #metal-journal-command-center .tag-print-panel,
  #metal-screen #metal-journal-command-center .quality-mini { display: none; }
}

/* Команды журнала выровнены по общей ширине таблицы и имеют одну высоту. */
#metal-screen #metal-journal-command-center .metal-toolbar-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding-inline: 0;
}

#metal-screen #metal-journal-command-center .metal-toolbar-actions > button {
  height: var(--metal-command-height);
  min-height: var(--metal-command-height);
}

@media (max-width: 600px) {
  #metal-screen #metal-journal-command-center[data-journal-scope="journal"] .metal-toolbar-actions {
    width: 100%;
    gap: 6px;
    padding: 0;
  }

  #metal-screen #metal-journal-command-center[data-journal-scope="journal"] .journal-workbench {
    border-top: 0;
    padding-top: 0;
  }

  #metal-screen #metal-journal-command-center[data-journal-scope="journal"] .journal-status-filter-wrap,
  #metal-screen #metal-journal-command-center[data-journal-scope="journal"] .journal-status-filter,
  #metal-screen #metal-view-journal[data-journal-scope="journal"] > .journal-search-sticky,
  #metal-screen #metal-view-journal[data-journal-scope="journal"] > .journal-search-sticky .journal-search-input {
    width: 100%;
    min-width: 0;
  }

  #metal-screen #metal-journal-command-center[data-journal-scope="journal"] .journal-status-filter-wrap {
    grid-template-columns: minmax(0, 1fr);
  }

  #metal-screen #metal-journal-command-center[data-journal-scope="journal"] .journal-status-filter {
    grid-column: 1;
  }

  #metal-screen #metal-view-journal[data-journal-scope="journal"] > .journal-search-sticky .journal-search-input,
  #metal-screen #metal-journal-command-center[data-journal-scope="journal"] .journal-status-filter {
    height: var(--metal-command-height);
    min-height: var(--metal-command-height);
    box-sizing: border-box;
  }
}

/* Полный журнал: панель управления и таблица имеют одну линию края на десктопе. */
@media (min-width: 901px) {
  #metal-screen #metal-view-journal[data-journal-scope="journal"]:not(.hidden) { padding-inline: 0; }

  #metal-screen #metal-view-journal[data-journal-scope="journal"]:not(.hidden) > :not(.journal-command-center):not(.journal-search-sticky):not(.metal-journal-pagination) {
    margin-inline: 0;
  }
}

/* ==== _dev_materials/css-sources/04-metal-invoice.css ==== */
/* Быстрые чипы */
    

    /* Переключатель статуса ОТК */
    
    
    
    

    /* Кнопка отправки */
    .btn-submit-metal {
      color: #fff;
      border: none;
      padding: 14px;
      border-radius: 12px;
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
      width: 100%;
      margin-top: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

.btn-submit-metal:active { background: #0369a1; transform: scale(0.98); }

@media (min-width: 992px) {

.custom-table {
    width: 100%;
    table-layout: fixed;
  }

.custom-table th, .custom-table td {
    padding: 8px 10px;
    font-size: 13px;
    white-space: normal;
  }

.invoice-header-grid {
    display: grid;
    grid-template-columns: 1.35fr 1fr 0.8fr 0.8fr 1fr;
    gap: 14px;
  }

}

@media (max-width: 991px) {

.invoice-header-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    }

.invoice-header-grid,
    .invoice-header-grid > div {
      width: 100%;
      min-width: 0;
      max-width: 100%;
      box-sizing: border-box;
    }

.invoice-header-grid .auth-input {
      display: block;
      width: 100%;
      min-width: 0;
      max-width: 100%;
      box-sizing: border-box;
    }

.invoice-date-field {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      width: 100%;
      min-width: 0;
      max-width: 100%;
    }

/* Grid растягивает поле по колонке без width:100%, которое iOS неверно считает с padding (WebKit 301648). */
.invoice-header-grid input[type="date"] {
      width: auto;
      justify-self: stretch;
    }

.custom-table th, .custom-table td {
    white-space: nowrap; /* На мобилке компактно в строку */
    font-size: 12px;
    }

}

.batch-table-input {
  width: 100%;
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 6px;
  padding: 6px 8px;
  color: #f8fafc;
  font-size: 13px;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.batch-table-input:focus {
  border-color: #38bdf8;
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.25);
}

.batch-table-input::-webkit-calendar-picker-indicator {
  cursor: pointer;
  filter: invert(0.8) sepia(100%) saturate(300%) hue-rotate(165deg);
  opacity: 0.75;
  transition: opacity 0.15s ease;
}

.batch-table-input::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

.batch-select {
  appearance: auto;
  cursor: pointer;
}

.batch-custom-input {
  margin-top: 5px;
}

.batch-row-id {
  font-weight: 800;
  color: #38bdf8;
  font-size: 14px;
  text-align: center;
}

/* Заголовок/подпись и подписи полей карточки накладной - раньше были инлайн-стилем в разметке (перебивал !important
   в светлой теме); вынесены в классы, чтобы обычная светлая тема побеждала обычной специфичностью. */
.invoice-entry-title { margin: 0; font-size: 17px; color: #f8fafc; }

.invoice-entry-subtitle { margin: 3px 0 0; font-size: 12px; color: #94a3b8; }

.invoice-header-card {
  --form-tone: 56, 189, 248;
  background: linear-gradient(145deg, rgba(var(--form-tone), .14) 0%, rgba(23, 32, 51, .5) 20%, rgba(17, 27, 45, .5) 100%);
  border: 1px solid rgba(var(--form-tone), .4);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: inset 4px 0 0 rgba(var(--form-tone), .6), 0 18px 46px rgba(0, 0, 0, .4), 0 0 24px rgba(var(--form-tone), .1);
}

@media (max-width: 600px) {
  .invoice-header-card { padding-inline: 8px; }

}

.invoice-header-card .table-responsive-box {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(var(--form-tone), .22);
}

:is(#metal-view-form, #tmc-view-form) .custom-table { background: transparent; }

.file-picker-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid #0ea5e9;
  border-radius: 9px;
  background: rgba(14, 165, 233, 0.12);
  color: #7dd3fc;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.visually-hidden-file { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }

.invoice-form-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, auto); gap: 10px; align-items: stretch; }

.btn-portal.invoice-add-row-button,
.invoice-save-button { min-height: 42px; height: 42px; margin: 0; padding: 7px 18px; font-size: 13px; box-sizing: border-box; }

.btn-portal.invoice-add-row-button { width: 100%; justify-content: center; text-align: center; }

.invoice-save-button { width: auto; min-width: 300px; }

.steel-grade-button {
  border: 0;
  padding: 0;
  background: transparent;
  color: #7dd3fc;
  font: inherit;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
}

.steel-color-dot { display: inline-block; margin-left: 4px; font-size: 13px; text-decoration: none; }

.metal-grade-card { width: min(760px, 100%); }

.metal-grade-card[data-steel-tone] { border-color: var(--steel-border); border-left: 5px solid var(--steel-accent); background: var(--steel-surface); box-shadow: 0 24px 60px rgba(0,0,0,.6), 0 0 24px var(--steel-glow); }

.metal-grade-card[data-steel-tone="blue"] { --steel-accent: #3b82f6; --steel-border: #416fbd; --steel-surface: #12213b; --steel-glow: rgba(59,130,246,.16); }

.metal-grade-card[data-steel-tone="red"] { --steel-accent: #ef4444; --steel-border: #a74653; --steel-surface: #2b1b28; --steel-glow: rgba(239,68,68,.13); }

.metal-grade-card[data-steel-tone="yellow"] { --steel-accent: #facc15; --steel-border: #9b833a; --steel-surface: #27251c; --steel-glow: rgba(250,204,21,.12); }

.metal-grade-card[data-steel-tone="black"] { --steel-accent: #000; --steel-border: #47515e; --steel-surface: #090c12; --steel-glow: rgba(0,0,0,.6); }

.metal-grade-card[data-steel-tone="gray"] { --steel-accent: #9ca3af; --steel-border: #6b7280; --steel-surface: #232831; --steel-glow: rgba(156,163,175,.12); }

.metal-grade-card[data-steel-tone="green"] { --steel-accent: #10b981; --steel-border: #2f9e73; --steel-surface: #12261f; --steel-glow: rgba(16,185,129,.16); }

.supplier-combobox { position: relative; min-width: 0; }

.supplier-combobox::after { content: '▾'; position: absolute; right: 13px; top: 31px; color: #7dd3fc; pointer-events: none; font-size: 13px; }

.supplier-suggestions { position: absolute; top: calc(100% + 5px); left: 0; right: 0; z-index: 40; max-height: min(260px, 35vh); overflow-y: auto; overscroll-behavior: contain; border: 1px solid #31566e; border-radius: 10px; padding: 5px; background: #122033; box-shadow: 0 12px 30px rgba(0,0,0,.45); scrollbar-color: #38516a #122033; }

.metal-composition-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(115px, 1fr));
  gap: 8px;
  margin-top: 16px;
}

.metal-composition-item { padding: 10px; border: 1px solid #334155; border-radius: 9px; background: #0f172a; }

.metal-composition-label { color: #7dd3fc; font-size: 11px; font-weight: 850; }

.metal-composition-value { margin-top: 4px; color: #f8fafc; font-size: 14px; font-weight: 750; }

.certificate-file-row { display: inline-flex; min-width: 0; gap: 5px; align-items: stretch; }

.history-entry-comment { margin-top: 6px; color: #cbd5e1; font-size: 11px; line-height: 1.35; white-space: pre-wrap; overflow-wrap: anywhere; }

.history-list { display: grid; gap: 8px; }

.history-entry { padding: 8px 10px; border-left: 3px solid #0ea5e9; border-radius: 0 7px 7px 0; background: #0f172a; }

.history-entry-title { color: #e2e8f0; font-size: 11px; font-weight: 750; }

.history-entry-meta { margin-top: 3px; color: #64748b; font-size: 10px; }

.record-workflow-route {
  flex: 1 1 520px;
  min-width: 460px;
  max-width: 700px;
  margin-left: auto;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: start;
}

@keyframes recordRouteFlow { to { background-position: -200% 0; } }

@keyframes recordRoutePulse { 70%, 100% { box-shadow: 0 0 0 7px rgba(var(--record-detail-tone), 0); } }

.certificate-warning { margin-top: 4px; color: #fbbf24; font-size: 10px; font-weight: 750; }

@media (max-width: 900px) {

.file-picker-button { width: 100%; box-sizing: border-box; }

.invoice-form-actions { grid-template-columns: 1fr; }

.invoice-save-button { width: 100%; min-width: 0; }

.record-workflow-route { flex-basis: 100%; min-width: 0; max-width: none; width: 100%; margin: 2px 0 0; }

}

@media (max-width: 560px) {

.user-management-heading { padding: 13px 14px 11px; }

.user-management-layout { display: block; overflow-y: auto; }

.user-editor { width: 100%; height: auto; overflow: visible; padding: 13px; }

}

:is(#metal-view-form, #tmc-view-form) [aria-invalid="true"] { border: 2px solid #ef4444; outline: 1px solid #ef4444; }

.batch-field-error { color: #f87171; font-size: 12px; line-height: 1.35; margin-top: 4px; }

[data-theme="light"] .batch-field-error { color: #b91c1c; }

html[data-theme="light"] .batch-table-input::-webkit-calendar-picker-indicator { filter: none; opacity: .72; }

html[data-theme="light"] .metal-grade-card[data-steel-tone="blue"] { --steel-border: #3f78c5; --steel-surface: #dceaff; --steel-glow: rgba(59,130,246,.22); }

html[data-theme="light"] .metal-grade-card[data-steel-tone="red"] { --steel-border: #c64f5d; --steel-surface: #ffe0e4; --steel-glow: rgba(239,68,68,.2); }

html[data-theme="light"] .metal-grade-card[data-steel-tone="yellow"] { --steel-border: #b58a00; --steel-surface: #fff3b8; --steel-glow: rgba(202,138,4,.2); }

html[data-theme="light"] .metal-grade-card[data-steel-tone="black"] { --steel-border: #334155; --steel-surface: #d7dee6; --steel-glow: rgba(15,23,42,.2); }

html[data-theme="light"] .metal-grade-card[data-steel-tone="gray"] { --steel-border: #64748b; --steel-surface: #e1e5ea; --steel-glow: rgba(100,116,139,.18); }

html[data-theme="light"] .metal-grade-card[data-steel-tone="green"] { --steel-border: #258c66; --steel-surface: #d5f2e3; --steel-glow: rgba(16,185,129,.2); }

html[data-theme="light"] .metal-grade-card[data-steel-tone] .metal-composition-item {
  border-color: var(--steel-border);
  background: rgba(255, 255, 255, .72);
}

/* Light-theme contrast corrections for data-heavy screens. */
html[data-theme="light"] .invoice-entry-title { color: #172033; }

html[data-theme="light"] .invoice-entry-subtitle { color: #34495e; }

html[data-theme="light"] .invoice-header-card {
  border-color: #b8cad9;
  box-shadow: 0 5px 16px rgba(30, 64, 92, .07);
}

html[data-theme="light"] .invoice-header-card label { color: #2f4256; }

html[data-theme="light"] .custom-table { color: #172033; }

html[data-theme="light"] .custom-table thead tr {
  border-bottom-color: #aebfce;
}

html[data-theme="light"] .custom-table th { color: #34495e; }

html[data-theme="light"] .custom-table tbody tr { border-bottom-color: #d5e0e9; }

html[data-theme="light"] .steel-grade-button {
  color: #075985;
  text-decoration-color: rgba(3, 105, 161, .7);
  text-decoration-thickness: 1.5px;
}

html[data-theme="light"] .steel-grade-button:hover,
html[data-theme="light"] .steel-grade-button:focus-visible { color: #0c4a6e; }

.btn-submit-metal,
.btn-search,
.btn-auth-submit {
  background: #0284c7;
  box-shadow: 0 6px 16px rgba(2, 132, 199, .28);
  text-shadow: none;
  transition: background-color .15s ease, box-shadow .15s ease;
}

.btn-submit-metal:hover:not(:disabled),
.btn-search:hover:not(:disabled),
.btn-auth-submit:hover:not(:disabled) {
  background: #0ea5e9;
  filter: none;
  transform: none;
  box-shadow: 0 8px 20px rgba(2, 132, 199, .36);
}

.btn-submit-metal:active:not(:disabled),
.btn-search:active:not(:disabled),
.btn-auth-submit:active:not(:disabled) { background: #0369a1; filter: none; transform: none; }

.batch-size-input { font-size: 14.5px; }

.batch-size-input::placeholder { font-size: 13px; }

.file-picker-button { gap: 7px; }

/* ── Окно накладной в тёмной теме — спокойное, как панель журнала: нейтральная рамка, без цветной боковой полосы ── */
html:not([data-theme="light"]) .invoice-header-card {
  --form-tone: 148, 163, 184;
  background: linear-gradient(180deg, rgba(148, 163, 184, .09) 0%, rgba(23, 32, 51, .5) 34%, rgba(17, 27, 45, .5) 100%);
  border: 1px solid rgba(148, 163, 184, .22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 14px 34px rgba(0, 0, 0, .3);
}

/* «Добавить строку» — второстепенное действие: пунктирный контур вместо карточки с тенью. */
.btn-portal.invoice-add-row-button {
  gap: 8px;
  border: 1px dashed rgba(56, 189, 248, .5);
  background: rgba(56, 189, 248, .06);
  color: #7dd3fc;
  box-shadow: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.btn-portal.invoice-add-row-button:hover:not(.btn-disabled) { border-color: rgba(56, 189, 248, .85); background: rgba(56, 189, 248, .14); color: #e0f2fe; transform: none; box-shadow: none; }

html[data-theme="light"] .btn-portal.invoice-add-row-button { border-color: rgba(2, 132, 199, .55); color: #075985; box-shadow: none; }

html[data-theme="light"] .btn-portal.invoice-add-row-button:hover:not(.btn-disabled) { border-color: rgba(2, 132, 199, .9); background: rgba(14, 165, 233, .16); color: #0c4a6e; box-shadow: none; }

@media (pointer: fine) {

@supports (appearance: base-select) {

select:is(select, .batch-select), select:is(select, .batch-select)::picker(select) { appearance: base-select; }

}

}

.batch-custom-wrap:has(> .batch-custom-input.hidden) { display: none; }

td:has(.batch-custom-wrap > .batch-custom-input:not(.hidden)) > select { display: none; }

select:is(select, .batch-select) { align-items: center; }

/* ── Позиции накладной: собственная рамка (шапка таблицы + строки + «Добавить строку»), нейтральная, без цветного фона ── */
.invoice-header-card .invoice-items-frame { margin-top: 16px; container-type: inline-size; }

.invoice-header-card .invoice-items-frame .table-responsive-box { margin-top: 0; padding-top: 0; border-top: 0; }

:is(#metal-view-form, #tmc-view-form) .custom-table thead tr { background: transparent; border-bottom: 1px solid rgba(148, 163, 184, .26); }

:is(#metal-view-form, #tmc-view-form) .custom-table thead th { background: rgba(148, 163, 184, .1); }

:is(#metal-view-form, #tmc-view-form) .custom-table thead th:first-child { border-top-left-radius: 8px; }

:is(#metal-view-form, #tmc-view-form) .custom-table thead th:last-child { border-top-right-radius: 8px; }

:is(#metal-view-form, #tmc-view-form) .custom-table th { color: #94a3b8; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

.invoice-req { color: #f87171; opacity: .85; }

html[data-theme="light"] :is(#metal-view-form, #tmc-view-form) .custom-table thead tr { background: transparent; border-bottom: 1px solid rgba(81, 113, 136, .3); }

html[data-theme="light"] :is(#metal-view-form, #tmc-view-form) .custom-table thead th { background: rgba(81, 113, 136, .1); }

html[data-theme="light"] :is(#metal-view-form, #tmc-view-form) .custom-table th { color: #34495e; }

/* ID выше специфичности голого .custom-table ниже по файлу - без этой строки таблица накладной в светлой теме
   осталась бы прозрачной вместо полупрозрачной подложки (тот же 26.09.2026 проход, что и у остальных карточек). */
html[data-theme="light"] :is(#metal-view-form, #tmc-view-form) .custom-table { background: rgba(255, 255, 255, .4); }

html[data-theme="light"] .invoice-req { color: #dc2626; }

.invoice-items-frame .invoice-form-actions { margin-top: 10px; }

@container (min-width: 1500px) {

.invoice-items-frame .invoice-form-actions { grid-template-columns: 865fr 210fr; gap: 0; }

.invoice-items-frame .invoice-add-row-button { margin-right: 10px; width: auto; }

.invoice-items-frame .invoice-save-button { margin-left: 10px; width: auto; min-width: 0; padding-inline: 12px; white-space: nowrap; }

}

.metric-card { background: rgba(148, 163, 184, .08); border-color: rgba(148, 163, 184, .24); border-radius: 8px; }

@media (min-width: 900px) {

.metrics-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }

.metric-card { padding: 10px 8px; }

.metric-param { font-size: 14px; }

.metric-val { font-size: 18px; }

.tol-sign { font-size: 17px; }

}

html[data-theme="light"] .btn-portal.invoice-add-row-button { background: rgba(14, 165, 233, .07); }

html[data-theme="light"] .badge-dev { background: rgba(226, 232, 240, .7); }

html[data-theme="light"] .table-container { background: rgba(255, 255, 255, .6); }

html[data-theme="light"] .metric-card.fe-card { background: rgba(238, 244, 255, .6); }

html[data-theme="light"] .invoice-header-card { background: rgba(255, 255, 255, .5); }

html[data-theme="light"] .custom-table { background: rgba(255, 255, 255, .4); }

html[data-theme="light"] .custom-table thead tr { background: transparent; }

/* Светлая тема: общий фон чуть темнее, чтобы блоки и текст не сливались с ним */
html[data-theme="light"] { background-color: #dde3eb; }

html[data-theme="light"] body { background: #dde3eb; }

html[data-theme="light"] body::after {
  background:
    radial-gradient(ellipse 760px 520px at -5% -4%, rgba(225, 29, 72, .1), transparent 70%),
    radial-gradient(ellipse 760px 520px at 105% 104%, rgba(2, 132, 199, .13), transparent 70%),
    repeating-linear-gradient(118deg, rgba(15, 23, 42, .09) 0 1px, transparent 1px 88px),
    linear-gradient(145deg, #e8edf3 0%, #dde3eb 52%, #d0d9e4 100%);
}

/* ── Заголовок накладной: справа кнопка «Очистить накладную» — мягкая, при наведении красная (как «Выйти») ── */
.invoice-entry-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 16px; margin-bottom: 16px; }

.invoice-entry-heading { flex: 1 1 280px; min-width: 0; }

.btn-invoice-clear {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid rgba(148, 163, 184, .28);
  border-radius: 10px;
  background: rgba(148, 163, 184, .1);
  color: #dbe8f6;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.btn-invoice-clear:hover:not(:disabled),
.btn-invoice-clear:focus-visible { border-color: rgba(248, 113, 113, .6); background: rgba(239, 68, 68, .2); color: #fecaca; }

.btn-invoice-clear:disabled { opacity: .5; cursor: default; }

html[data-theme="light"] .btn-invoice-clear { border-color: rgba(15, 23, 42, .18); background: rgba(15, 23, 42, .05); color: #334155; }

html[data-theme="light"] .btn-invoice-clear:hover:not(:disabled),
html[data-theme="light"] .btn-invoice-clear:focus-visible { border-color: rgba(185, 28, 28, .55); background: rgba(239, 68, 68, .14); color: #7f1d1d; }
/* ==== _dev_materials/css-sources/06-backup.css ==== */
/* Backup management */
.backup-management-backdrop { z-index: 100004; }

.backup-management-card { width: min(1160px, 100%); max-height: min(940px, calc(100dvh - 32px)); overflow: hidden; display: grid; grid-template-rows: auto minmax(0, 1fr); padding: 0; }

.backup-management-heading { padding: 18px 20px 14px; border-bottom: 1px solid #334155; }

.backup-management-content { min-height: 0; overflow-y: auto; padding: 16px; }

.backup-management-message { margin-bottom: 12px; padding: 10px 12px; border: 1px solid rgba(248,113,113,.5); border-radius: 9px; background: rgba(127,29,29,.22); color: #fecaca; font-size: 12px; line-height: 1.45; }

.backup-overview-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }

.backup-overview-card { min-width: 0; padding: 13px; border: 1px solid #2b4058; border-radius: 10px; background: #111c2d; }

.backup-overview-card > span { display: block; color: #8fa6bc; font-size: 9px; font-weight: 850; letter-spacing: .045em; text-transform: uppercase; }

.backup-overview-card strong { display: block; margin-top: 7px; color: #e9f4ff; font-size: 14px; line-height: 1.25; }

.backup-overview-card small { display: block; margin-top: 5px; color: #748ba3; font-size: 10px; line-height: 1.35; }

.backup-job-panel { margin-top: 12px; padding: 13px; border: 1px solid rgba(56,189,248,.45); border-radius: 10px; background: rgba(3,105,161,.12); }

.backup-job-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #e0f2fe; font-size: 12px; }

.backup-job-line span { color: #7dd3fc; font-weight: 900; }

.backup-progress { height: 8px; margin-top: 10px; overflow: hidden; border-radius: 99px; background: #091220; }

.backup-progress span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#0ea5e9,#34d399); transition: width .25s ease; }

.backup-job-meta { margin-top: 7px; color: #8ea5bb; font-size: 10px; line-height: 1.4; }

.backup-actions-panel { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 12px; padding: 14px; border: 1px solid #2b4058; border-radius: 10px; background: rgba(15,23,42,.52); }

.backup-actions-copy { min-width: 0; }

.backup-actions-copy strong { display: block; color: #eef7ff; font-size: 13px; }

.backup-actions-copy span { display: block; margin-top: 4px; color: #8399af; font-size: 10px; line-height: 1.4; }

.backup-actions { flex: 0 0 auto; display: flex; gap: 7px; }

.backup-action-button { min-height: 39px; padding: 8px 12px; border: 1px solid rgba(56,189,248,.55); border-radius: 8px; background: rgba(2,132,199,.18); color: #bae6fd; font-size: 11px; font-weight: 850; cursor: pointer; }

.backup-action-button.is-primary { border-color: rgba(52,211,153,.62); background: #047857; color: #fff; }

.backup-action-button.is-muted { border-color: #45586c; background: #263549; color: #d5e1ec; }

.backup-action-button:disabled { opacity: .42; cursor: wait; }

.backup-links-panel { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; margin-top: 12px; }

.backup-link-button { min-width: 0; min-height: 67px; padding: 11px; border: 1px solid #2b4058; border-radius: 9px; background: #101b2b; color: #dff3ff; text-align: left; cursor: pointer; }

.backup-link-button span { display: block; font-size: 11px; font-weight: 850; }

.backup-link-button small { display: block; margin-top: 4px; color: #7890a7; font-size: 9px; line-height: 1.3; }

.backup-link-button:not(:disabled):hover { border-color: #38bdf8; background: #12263b; }

.backup-link-button:disabled { opacity: .38; cursor: default; }

.backup-source-panel { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px 14px; border: 1px solid #2b4058; border-radius: 10px; background: #111c2d; }

.backup-source-copy { min-width: 0; flex: 1; }

.backup-source-copy strong { display: block; color: #f1f5f9; font-size: 12px; }

.backup-source-copy span { display: block; margin-top: 4px; color: #8da2b7; font-size: 10px; overflow-wrap: anywhere; }

.backup-source-upload { flex: 0 0 auto; min-height: 38px; display: inline-flex; align-items: center; padding: 8px 11px; border: 1px solid rgba(167,139,250,.58); border-radius: 8px; background: rgba(109,40,217,.18); color: #ddd6fe; font-size: 10px; font-weight: 850; cursor: pointer; }

.backup-retention-note { margin: 12px 2px 0; color: #71879d; font-size: 10px; line-height: 1.45; }

html[data-theme="light"] .backup-management-heading { border-color: #cbd8e3; }

html[data-theme="light"] .backup-overview-card,
html[data-theme="light"] .backup-actions-panel,
html[data-theme="light"] .backup-link-button,
html[data-theme="light"] .backup-source-panel { border-color: #c4d3df; background: #fff; }

html[data-theme="light"] .backup-overview-card strong,
html[data-theme="light"] .backup-actions-copy strong,
html[data-theme="light"] .backup-source-copy strong { color: #1e334a; }

html[data-theme="light"] .backup-overview-card > span,
html[data-theme="light"] .backup-overview-card small,
html[data-theme="light"] .backup-actions-copy span,
html[data-theme="light"] .backup-link-button small,
html[data-theme="light"] .backup-source-copy span,
html[data-theme="light"] .backup-retention-note { color: #61778d; }

html[data-theme="light"] .backup-link-button { color: #075985; }

@media (max-width: 760px) {

.backup-management-backdrop { padding: 0; align-items: stretch; }

.backup-management-card { width: 100%; height: 100dvh; max-height: none; border: 0; border-radius: 0; }

.backup-overview-grid { grid-template-columns: 1fr; }

.backup-actions-panel { align-items: stretch; flex-direction: column; }

.backup-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }

.backup-action-button.is-muted { grid-column: 1/-1; }

.backup-links-panel { grid-template-columns: 1fr; }

}

@media (max-width: 480px) {

.backup-management-heading { padding: 13px 14px 11px; }

.backup-management-content { padding: 11px; }

.backup-source-panel { align-items: stretch; flex-direction: column; }

.backup-source-upload { justify-content: center; }

}

/* ── Кнопки: одна гарнитура сайта; действия журнала — иерархия: главное действие (chip-primary) сплошной заливкой,
   остальные — контур с цветным текстом и значком. Без градиентов, бликов и теней. Оттенок задают --g (тёмная тема)
   и --gl (светлая), сплошная заливка — --gs, цвет текста — --gt / --gtl. ── */
button { font-family: inherit; }

.ico { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.file-picker-button,
.print-preview-button,
.btn-copy,
.site-dialog-button,
.backup-action-button,
.managed-user-add-button { transition: filter .15s ease, transform .15s ease, border-color .15s ease, background-color .15s ease; }

.file-picker-button:hover:not(:disabled),
.print-preview-button:hover:not(:disabled),
.btn-copy:hover:not(:disabled),
.site-dialog-button:hover:not(:disabled),
.backup-action-button:hover:not(:disabled),
.managed-user-add-button:hover:not(:disabled) { filter: brightness(1.1); }

html[data-theme="light"] .backup-management-message { border-color: #e7a5a5; background: #fee2e2; color: #7f1d1d; }

html[data-theme="light"] .backup-action-button { border-color: #7cb9d8; background: #e0f2fe; color: #075985; }

html[data-theme="light"] .backup-action-button.is-primary { border-color: #059669; background: #047857; color: #fff; }

html[data-theme="light"] .backup-action-button.is-muted { border-color: #b7c8d6; background: #e8eff5; color: #334155; }

html[data-theme="light"] .backup-action-button:disabled { opacity: .6; }

html[data-theme="light"] .backup-source-upload { border-color: #a78bfa; background: #ede9fe; color: #5b21b6; }

body.metal-modal-open .ambient-sheen { animation-play-state: paused; }

/* ── Размытие и на остальных окнах поверх страницы (решение владельца, 25.09.2026): окно рисует один размытый слой под собой, пока открыто (скрытое окно display:none — размытие ничего не стоит).
   Просмотр вложений и печать — без размытия (тяжёлые: масштаб/панорама). Постоянные панели не размывать. ── */
#metal-workflow-dialog, #core-user-management-dialog, #metal-backup-management-dialog, #core-site-dialog { background: rgba(2, 6, 23, .55); }

#metal-backup-management-dialog .workflow-card { background: rgba(23, 32, 51, .62); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }

#metal-backup-management-dialog .backup-overview-card, #metal-backup-management-dialog .backup-source-panel, #metal-backup-management-dialog .backup-link-button { background: rgba(17, 28, 45, .5); }

html[data-theme="light"] #metal-workflow-dialog, html[data-theme="light"] #core-user-management-dialog, html[data-theme="light"] #metal-backup-management-dialog, html[data-theme="light"] #core-site-dialog { background: rgba(30, 50, 72, .35); }

html[data-theme="light"] #metal-workflow-dialog .workflow-card, html[data-theme="light"] #core-user-management-dialog .workflow-card, html[data-theme="light"] #metal-backup-management-dialog .workflow-card { background: rgba(249, 251, 253, .72); }

html[data-theme="light"] #metal-backup-management-dialog .backup-overview-card, html[data-theme="light"] #metal-backup-management-dialog .backup-source-panel, html[data-theme="light"] #metal-backup-management-dialog .backup-link-button { background: rgba(255, 255, 255, .7); }

@media (prefers-reduced-transparency: reduce) {

#metal-workflow-dialog .workflow-card, #core-user-management-dialog .workflow-card, #metal-backup-management-dialog .workflow-card, #core-site-dialog .site-dialog-card { -webkit-backdrop-filter: none; backdrop-filter: none; background: #172033; }

html[data-theme="light"] #metal-workflow-dialog .workflow-card, html[data-theme="light"] #core-user-management-dialog .workflow-card, html[data-theme="light"] #metal-backup-management-dialog .workflow-card, html[data-theme="light"] #core-site-dialog .site-dialog-card { background: #f9fbfd; }

}

/* Справка — одна строка: слева период/год/сброс, по центру название (строго по центру окна: боковые группы равной ширины), справа «К диаграммам» и «Excel».
   В режиме диаграмм группы «прозрачные» (display: contents) — сетка фильтров работает как раньше. */
.quality-filters-main, .quality-filters-actions { display: contents; }

.quality-filters.is-report { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; margin-bottom: 14px; }

.quality-filters.is-report .quality-filters-main, .quality-filters.is-report .quality-filters-actions { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }

.quality-filters.is-report .quality-filters-main { order: 1; }

.quality-filters.is-report .quality-filters-actions { order: 2; margin-left: auto; justify-content: flex-end; }

.quality-filters.is-report .quality-filters-main > label { flex: 0 0 132px; min-width: 0; }

.quality-filters.is-report .quality-filters-main > label[data-quality-year] { flex-basis: 84px; }

.quality-filters.is-report .quality-filters-main > label[data-quality-custom] { flex-basis: 150px; }

.quality-filters.is-report .quality-reset-button { padding: 8px 11px; }

.quality-filters.is-report .quality-filters-main > .quality-reset-button { order: 3; }

.quality-filters.is-report.is-custom .quality-filters-main > label:not([data-quality-custom]) { flex-basis: 104px; }

.quality-filters.is-report.is-custom .quality-filters-main > label[data-quality-custom] { flex-basis: 100px; }

.quality-filters.is-report .quality-filters-main > label[data-quality-custom] { order: 2; }

.quality-filters.is-report .quality-reset-text { display: none; }

@media (min-width: 641px) {

.quality-filters:not(.is-report) { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; }

.quality-filters:not(.is-report) label, .quality-filters:not(.is-report) .quality-reset-button, .quality-filters:not(.is-report) .quality-reference-button { grid-column: span 2; }

.quality-filters.is-custom:not(.is-report) .quality-reset-button, .quality-filters.is-custom:not(.is-report) .quality-reference-button { grid-column: span 1; }

}

@media (min-width: 1300px) {

.quality-filters.is-report { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; }

.quality-filters.is-report .quality-filters-main { order: 0; justify-self: start; flex-wrap: wrap; min-width: 0; max-width: 100%; }

.quality-filters.is-report .quality-filters-actions { order: 0; margin-left: 0; justify-self: end; flex-wrap: nowrap; }

}

@media (max-width: 640px) {

.quality-filters.is-report .quality-filters-main, .quality-filters.is-report .quality-filters-actions { flex: 1 1 100%; margin-left: 0; }

.quality-filters.is-report .quality-filters-main > label { flex: 1 1 40%; }

.quality-filters.is-report .quality-filters-actions > button { flex: 1 1 100%; }

.quality-filters.is-report .quality-reset-text { display: inline; }

}

@media (min-width: 761px) {

#metal-backup-management-dialog .backup-management-content { padding: 18px 22px; }

#metal-backup-management-dialog .backup-overview-card strong { font-size: 16px; }

#metal-backup-management-dialog .backup-overview-card { padding: 16px; }

#metal-backup-management-dialog .backup-actions-panel, #metal-backup-management-dialog .backup-source-panel { padding: 18px; }

#metal-backup-management-dialog .backup-action-button { min-height: 42px; padding-inline: 16px; font-size: 12px; }

}

.admin-backups-menu-button { margin-top: 6px; border-color: rgba(52, 211, 153, .55); background: rgba(52, 211, 153, .16); color: #d1fae5; }

.admin-backups-menu-button:hover { border-color: rgba(52, 211, 153, .85); background: rgba(52, 211, 153, .3); }

html[data-theme="light"] .admin-backups-menu-button { background: rgba(16, 185, 129, .14); border-color: rgba(5, 150, 105, .55); color: #065f46; }

html[data-theme="light"] .admin-backups-menu-button:hover { background: rgba(16, 185, 129, .26); border-color: #059669; }
/* ==== _dev_materials/css-sources/07-shared-controls.css ==== */
/* Поля формы приемки */
    
    
    
    .form-input {
      background: rgba(22, 31, 46, 0.7);
      border: 1px solid rgba(56, 189, 248, 0.2);
      border-radius: 10px;
      padding: 10px 12px;
      color: #fff;
      font-size: 14px;
      outline: none;
      user-select: auto;
    }

.form-input:focus {
      border-color: #38bdf8;
    }

.btn-portal {
      background: rgba(22, 31, 46, 0.68);
      border: 1px solid rgba(56, 189, 248, 0.18);
      color: #f1f5f9;
      min-height: 108px;
      padding: 20px 18px;
      border-radius: 14px;
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      transition: background-color .28s ease, border-color .28s ease, box-shadow .28s ease, transform .28s ease;
      position: relative;
      overflow: hidden;
    }

.btn-portal:active {
      background: #23354d;
      transform: scale(0.98);
    }

.btn-portal:hover:not(.btn-disabled) {
      background: rgba(27, 40, 60, 0.78);
    }

.btn-portal-content {
      display: flex;
      align-items: center;
      gap: 12px;
    }

.btn-portal-icon {
      width: 46px;
      height: 46px;
      display: grid;
      place-items: center;
      flex: none;
      border-radius: 12px;
      background: rgba(56, 189, 248, .09);
      font-size: 25px;
      transition: background-color .28s ease, box-shadow .28s ease;
    }

.btn-portal:hover:not(.btn-disabled) .btn-portal-icon {
      background: rgba(56, 189, 248, .15);
      box-shadow: 0 0 23px rgba(56, 189, 248, .13);
    }

.btn-portal-desc {
      font-size: 11px;
      color: #64748b;
      font-weight: 500;
      margin-top: 2px;
    }

/* Неактивные кнопки (В разработке) */
    .btn-disabled {
      opacity: 0.55;
      border-color: rgba(255, 255, 255, 0.08);
      cursor: not-allowed;
    }

.btn-disabled:active {
      transform: none;
      background: rgba(22, 31, 46, 0.85);
    }

input, select, textarea, button {
      user-select: auto !important;
      -webkit-user-select: auto !important;
      pointer-events: auto !important;
    }

.btn-del-row {
  background: transparent;
  border: 1px solid #ef4444;
  color: #ef4444;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
}

.btn-del-row:hover {
  background: #ef4444;
  color: #fff;
}

.btn-text {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: normal;
      display: block;
    }

@media (max-width: 699px) {

.btn-portal { min-height: 96px; padding: 14px; }

}

.input-query {
      width: 100%;
      background: rgba(22, 31, 46, 0.7);
      border: 1px solid rgba(56, 189, 248, 0.18);
      border-radius: 12px;
      padding: 12px 36px 12px 14px;
      font-size: 15px;
      color: #fff;
      outline: none;
      user-select: auto;
      transition: border-color 0.15s ease;
    }

.input-query:focus { border-color: #38bdf8; }

.btn-clear {
      position: absolute;
      right: 10px;
      background: #334155;
      border: none;
      color: #94a3b8;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      font-size: 12px;
      display: none;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }

.btn-clear:active { background: #64748b; color: #fff; }

.btn-search {
      border: none;
      color: #fff;
      padding: 0 18px;
      border-radius: 12px;
      font-weight: 600;
      font-size: 14px;
      cursor: pointer;
    }

.btn-search:active { background: #0369a1; transform: scale(0.97); }

.btn-copy {
      background: rgba(30, 41, 59, 0.7);
      border: 1px solid rgba(255, 255, 255, 0.08);
      color: #94a3b8;
      width: 100%;
      padding: 12px;
      border-radius: 10px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      margin-top: 4px;
    }

.btn-copy:active { background: #334155; color: #fff; }

.hidden { display: none !important; }

.btn-auth-submit {
  width: 100%;
  color: #fff;
  border: none;
  padding: 12px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.btn-auth-submit:hover {
  background: #0369a1;
}

.btn-auth-submit:disabled {
  opacity: .65;
  cursor: wait;
}

.btn-metal-small {
  border: 1px solid #334155;
  background: #0f172a;
  color: #cbd5e1;
  border-radius: 7px;
  padding: 6px 9px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.core-toast-stack {
  position: fixed;
  right: 14px;
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 100000;
  width: min(360px, calc(100vw - 28px));
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.core-toast {
  background: #172033;
  border: 1px solid rgba(56, 189, 248, 0.35);
  color: #e2e8f0;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.35;
  box-shadow: 0 10px 28px rgba(0,0,0,0.4);
}

.core-toast.is-error { border-color: rgba(248, 113, 113, 0.7); }

.site-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100004;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(2, 6, 23, .84);
}

.site-dialog-card {
  position: relative;
  width: min(430px, 100%);
  padding: 22px;
  border: 1px solid rgba(56, 189, 248, .42);
  border-radius: 16px;
  background: linear-gradient(145deg, #172033, #111827);
  box-shadow: 0 26px 70px rgba(0, 0, 0, .62), 0 0 0 1px rgba(255, 255, 255, .025) inset;
  text-align: center;
}

.site-dialog-card.tone-danger { border-color: rgba(248, 113, 113, .72); }

.site-dialog-card.tone-warning { border-color: rgba(250, 204, 21, .62); }

.site-dialog-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #64748b;
  font-size: 15px;
  cursor: pointer;
}

.site-dialog-close:hover { background: rgba(148, 163, 184, .12); color: #e2e8f0; }

.site-dialog-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0 auto 12px;
  border: 1px solid rgba(56, 189, 248, .45);
  border-radius: 50%;
  background: rgba(2, 132, 199, .16);
  color: #7dd3fc;
  font-size: 21px;
  font-weight: 900;
}

.tone-danger .site-dialog-icon { border-color: rgba(248, 113, 113, .55); background: rgba(127, 29, 29, .2); color: #fca5a5; }

.tone-warning .site-dialog-icon { border-color: rgba(250, 204, 21, .5); background: rgba(113, 63, 18, .2); color: #fde047; }

.site-dialog-title { color: #f8fafc; font-size: 18px; font-weight: 850; line-height: 1.25; }

.site-dialog-message { margin-top: 9px; color: #cbd5e1; font-size: 13px; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }

.site-dialog-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 20px; }

.site-dialog-actions.single-action { grid-template-columns: minmax(140px, 220px); justify-content: center; }

.site-dialog-button { min-height: 42px; padding: 10px 14px; border: 0; border-radius: 9px; color: #fff; font-size: 13px; font-weight: 800; cursor: pointer; }

.site-dialog-cancel { background: #334155; }

.site-dialog-confirm { background: #0284c7; }

.tone-danger .site-dialog-confirm { background: #dc2626; }

.tone-warning .site-dialog-confirm { background: #ca8a04; }

.site-dialog-button:hover { filter: brightness(1.12); }

.site-dialog-button:focus-visible { outline: 2px solid #7dd3fc; outline-offset: 2px; }

.quality-filters select, .quality-filters input { width: 100%; min-width: 0; box-sizing: border-box; border: 1px solid #334c61; border-radius: 8px; background: #122133; color: #e2e8f0; padding: 9px; height: 40px; font: inherit; font-size: 14px; color-scheme: dark; }

.field-label { display: block; font-size: 11px; color: #94a3b8; font-weight: 700; margin-bottom: 4px; }

.supplier-option { padding: 10px 12px; min-height: 40px; box-sizing: border-box; border-radius: 6px; font-size: 14px; line-height: 1.4; color: #e2e8f0; overflow-wrap: anywhere; cursor: pointer; }

.supplier-option:hover, .supplier-option[aria-selected="true"] { color: #e0f2fe; background: #164263; }

html[data-theme="light"] .btn-disabled,
html[data-theme="light"] .btn-disabled:active { background: rgba(226, 232, 240, .72); color: #3f5165; }

html[data-theme="light"] .form-input,
html[data-theme="light"] .auth-input,
html[data-theme="light"] .input-query,
html[data-theme="light"] .batch-table-input,
html[data-theme="light"] .journal-search-input,
html[data-theme="light"] .journal-status-filter,
html[data-theme="light"] .quality-filters select,
html[data-theme="light"] .quality-filters input,
html[data-theme="light"] .workflow-field textarea,
html[data-theme="light"] select,
html[data-theme="light"] textarea {
  border-color: #bdcddd;
  background: rgba(255, 255, 255, .94);
  color: #172033;
  color-scheme: light;
}

html[data-theme="light"] .form-input:focus,
html[data-theme="light"] .auth-input:focus,
html[data-theme="light"] .input-query:focus,
html[data-theme="light"] .batch-table-input:focus { border-color: #0284c7; box-shadow: 0 0 0 3px rgba(2, 132, 199, .11); }

html[data-theme="light"] .btn-clear { background: #dbe5ee; color: #34495e; }

html[data-theme="light"] .site-dialog-title { color: #172033; }

html[data-theme="light"] .site-dialog-close:hover { background: #e8eff5; color: #172033; }

html[data-theme="light"] .core-toast {
  border-color: #8fc8e7;
  background: #fff;
  color: #1e293b;
  box-shadow: 0 10px 28px rgba(30, 64, 92, .18);
}

html[data-theme="light"] .supplier-option { color: #26384b; }

html[data-theme="light"] .supplier-option:hover,
html[data-theme="light"] .supplier-option[aria-selected="true"] { color: #075985; background: #dff3fd; }

.btn-auth-submit { border-radius: 10px; }

#core-site-dialog .site-dialog-card { background: linear-gradient(145deg, rgba(23, 32, 51, .68), rgba(17, 24, 39, .62)); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }

html[data-theme="light"] #core-site-dialog .site-dialog-card { background: rgba(249, 251, 253, .74); }

.quality-filters.is-report select, .quality-filters.is-report input, .quality-filters.is-report .btn-metal-small { height: 40px; min-height: 40px; box-sizing: border-box; }

.quality-filters.is-report.is-custom input, .quality-filters.is-report.is-custom select { font-size: 12px; padding-left: 6px; padding-right: 4px; }

.quality-filters.is-report .btn-metal-small { padding-top: 0; padding-bottom: 0; }

/* ── Выпадающие списки в стиле сайта (только при мыши/тачпаде; на сенсорных экранах остаётся родной выбор телефона). Где браузер умеет (Chrome/Edge 135+, `appearance: base-select`), рисуем весь список сами:
   тёмная/светлая панель, скругления, подсветка выбранного. Где нет — остаётся системный список (только цвета). ── */
select option { background: #101a2c; color: #e2e8f0; }

html[data-theme="light"] select option { background: #fff; color: #172033; }

@media (pointer: fine) {

@supports (appearance: base-select) {

select::picker-icon { color: #7dd3fc; transition: transform .15s ease; }

select:open::picker-icon { transform: rotate(180deg); }

select::picker(select) {
    box-sizing: border-box;
    margin-top: 4px;
    padding: 5px;
    border: 1px solid rgba(148, 163, 184, .3);
    border-radius: 10px;
    background: rgba(16, 26, 44, .97);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .5);
    max-height: min(340px, 50vh);
    position-try-order: normal;
    position-try-fallbacks: --pick-below-shrunk, flip-block;
  }

@position-try --pick-below-shrunk { max-height: stretch; min-height: 150px; }

select option { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 7px; font-size: 13px; line-height: 1.3; background: transparent; color: #e2e8f0; cursor: pointer; }

select option::checkmark { order: 2; margin-left: auto; color: #38bdf8; }

select option:hover, select option:focus-visible { background: rgba(56, 189, 248, .16); color: #fff; outline: none; }

select option:checked { background: rgba(56, 189, 248, .22); color: #e0f2fe; }

select option:disabled { opacity: .45; }

html[data-theme="light"] select::picker-icon { color: #075985; }

html[data-theme="light"] select::picker(select) { background: rgba(255, 255, 255, .98); border-color: rgba(71, 85, 105, .28); box-shadow: 0 16px 40px rgba(30, 64, 92, .22); }

html[data-theme="light"] select option { background: transparent; color: #172033; }

html[data-theme="light"] select option:hover, html[data-theme="light"] select option:focus-visible { background: rgba(14, 165, 233, .14); color: #075985; }

html[data-theme="light"] select option:checked { background: rgba(14, 165, 233, .2); color: #075985; }

}

}

/* Пустой пункт-подсказка (hidden) не показываем в открытом списке: собственные стили option перебивали атрибут hidden. */
select option[hidden] { display: none; }

.idle-halo { position: absolute; left: 12%; right: 12%; pointer-events: none; z-index: -1; opacity: 0; }

.idle-halo-red { top: 6%; height: 36%; background: radial-gradient(closest-side, rgba(239, 68, 68, .2), transparent); animation: idleHaloRed 14s ease-in-out infinite; }

.idle-logo-track { position: relative; width: min(60vw, 680px); }

.idle-logo { display: block; width: 100%; height: auto; overflow: visible; }

.idle-img-light { display: none; }

html[data-theme="light"] .idle-img-dark { display: none; }

html[data-theme="light"] .idle-img-light { display: inline; }

.idle-piece { transform-box: fill-box; }

.idle-bracket-red .idle-piece { fill: #de0010; }

.idle-bracket-gray .idle-piece { fill: #868484; }

html[data-theme="light"] .idle-bracket-red .idle-piece { fill: #d8010e; }

html[data-theme="light"] .idle-bracket-gray .idle-piece { fill: #75726e; }

.idle-leg-a { transform-origin: 50% 100%; animation: idleLegA 14s linear infinite; }

.idle-bar { transform-origin: 0 50%; animation: idleBar 14s linear infinite; }

.idle-leg-b { transform-origin: 50% 0; animation: idleLegB 14s linear infinite; }

.idle-bracket-gray .idle-leg-a { transform-origin: 50% 0; animation-name: idleLegAg; }

.idle-bracket-gray .idle-leg-b { transform-origin: 50% 100%; animation-name: idleLegBg; }

.idle-bracket-gray, .idle-bracket-gray .idle-piece { animation-delay: .28s; }

.idle-bracket, .idle-piece { animation-fill-mode: backwards; }

.idle-bracket { animation: idleBracketFade 14s linear infinite; }

.idle-text { animation: idleText 14s linear infinite; }

.idle-reveal { animation: idleReveal 14s linear infinite; }

.idle-breath { animation: idleBreath 5.6s ease-in-out infinite; }

.idle-glint { animation: idleGlint 14s ease-in-out infinite; }

@keyframes idleBracketFade { 0% { opacity: 0; } 0.4%, 88% { opacity: 1; } 96%, 100% { opacity: 0; } }

@keyframes idleLegA { 0% { transform: scaleY(0); } 2.4%, 96% { transform: scaleY(1); } 96.1%, 100% { transform: scaleY(0); } }

@keyframes idleBar { 0%, 2.4% { transform: scaleX(0); } 16.4%, 96% { transform: scaleX(1); } 96.1%, 100% { transform: scaleX(0); } }

@keyframes idleLegB { 0%, 16.4% { transform: scaleY(0); } 17.6%, 96% { transform: scaleY(1); } 96.1%, 100% { transform: scaleY(0); } }

@keyframes idleLegAg { 0% { transform: scaleY(0); } 2.4%, 96% { transform: scaleY(1); } 96.1%, 100% { transform: scaleY(0); } }

@keyframes idleLegBg { 0%, 16.4% { transform: scaleY(0); } 17.6%, 96% { transform: scaleY(1); } 96.1%, 100% { transform: scaleY(0); } }

@keyframes idleText { 0%, 88% { opacity: 1; } 96%, 100% { opacity: 0; } }

@keyframes idleReveal { 0%, 2.4% { transform: translateX(-260px); } 16.4%, 96% { transform: translateX(1600px); } 96.1%, 100% { transform: translateX(-260px); } }

@keyframes idleBreath { 0%, 100% { opacity: .88; transform: scale(1); } 50% { opacity: 1; transform: scale(1.014); } }

@keyframes idleGlint { 0%, 38% { transform: translateX(0); } 52%, 100% { transform: translateX(2300px); } }

@keyframes idleHaloRed { 0%, 27% { opacity: 0; transform: scale(.85); } 36% { opacity: .95; transform: scale(1); } 56% { opacity: .7; transform: scale(.97); } 74% { opacity: .95; transform: scale(1.03); } 87.5% { opacity: .85; transform: scale(1); } 90.5%, 100% { opacity: 0; transform: scale(.92); } }

@keyframes supplierChartGrow { from { clip-path: inset(100% -14px 0 -14px); } to { clip-path: inset(-14px -14px 0 -14px); } }

.btn-portal { box-shadow: none; }

.btn-portal-arrow { color: #38bdf8; transition: transform .28s ease, filter .28s ease; }

.btn-portal:hover:not(.btn-disabled) { box-shadow: none; }

.btn-portal:hover:not(.btn-disabled) .btn-portal-arrow { transform: translateX(4px); filter: brightness(1.2); }

html[data-theme="light"] .btn-disabled { opacity: .92; }

html[data-theme="light"] .btn-disabled .btn-portal-desc { color: #3f5165; }

html[data-theme="light"] .btn-portal-arrow { color: #0369a1; }

html[data-theme="light"] .form-input, html[data-theme="light"] .auth-input, html[data-theme="light"] .input-query, html[data-theme="light"] .tag-print-query, html[data-theme="light"] .journal-status-filter { background-color: rgba(255, 255, 255, .78); }
/* ==== _dev_materials/css-sources/08-record-details.css ==== */
.record-detail-card { width: min(760px, 100%); }

.record-detail-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }

.record-detail-close {
      border: 1px solid #475569;
      border-radius: 8px;
      background: #0f172a;
      color: #cbd5e1;
      padding: 7px 10px;
      cursor: pointer;
    }

.record-detail-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1px;
      margin-top: 14px;
      overflow: hidden;
      border: 1px solid #334155;
      border-radius: 10px;
      background: #334155;
    }

.record-detail-item { min-width: 0; padding: 10px 12px; background: #111827; }

.record-detail-item.is-wide { grid-column: 1 / -1; }

.record-detail-label { color: #7dd3fc; font-size: 10px; font-weight: 800; text-transform: uppercase; }

.record-detail-value { margin-top: 4px; color: #e2e8f0; font-size: 13px; overflow-wrap: anywhere; white-space: pre-wrap; }

@media (max-width: 900px) {

.record-detail-grid { grid-template-columns: 1fr; }

.record-detail-item.is-wide { grid-column: auto; }

}

.workflow-backdrop.print-preview-backdrop { z-index: 100010; padding: 8px; }

.workflow-card.print-preview-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(1100px, 100%);
  height: min(94vh, 920px);
  max-height: none;
  overflow: hidden;
  padding: 10px;
}

.print-preview-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 2px 2px 10px; }

.print-preview-actions { display: flex; gap: 8px; }

.print-preview-button { min-height: 40px; padding: 9px 13px; border: 1px solid #475569; border-radius: 9px; background: #243147; color: #e2e8f0; font-weight: 800; cursor: pointer; }

.print-preview-button.is-print { border-color: rgba(14,165,233,.7); background: #0369a1; color: #fff; }

.print-preview-frame { width: 100%; height: 100%; min-height: 0; border: 1px solid #334155; border-radius: 8px; background: #fff; }

.user-editor-actions .workflow-confirm,
.user-editor-actions .workflow-cancel { margin: 0; }

.workflow-title {
  color: #f8fafc;
  font-size: 17px;
  font-weight: 800;
}

.workflow-description {
  margin-top: 5px;
  color: #94a3b8;
  font-size: 12px;
  line-height: 1.4;
}

.workflow-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}

.workflow-field label {
  display: block;
  margin-bottom: 5px;
  color: #cbd5e1;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.workflow-field textarea {
  min-height: 82px;
  resize: vertical;
}

.workflow-confirm-check {
  display: flex !important;
  align-items: flex-start;
  gap: 9px;
  margin: 0 !important;
  padding: 11px;
  border: 1px solid rgba(248, 113, 113, 0.5);
  border-radius: 9px;
  background: rgba(127, 29, 29, 0.16);
  color: #fecaca !important;
  font-size: 12px !important;
  line-height: 1.35;
  text-transform: none !important;
  cursor: pointer;
}

.workflow-confirm-check input { width: 18px; height: 18px; margin: 0; flex: 0 0 auto; accent-color: #dc2626; }

.workflow-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 18px;
}

.workflow-cancel,
.workflow-confirm {
  border: 0;
  border-radius: 9px;
  padding: 11px 12px;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.workflow-cancel { background: #334155; }

.workflow-confirm { background: #0284c7; }

.workflow-error {
  min-height: 18px;
  margin-top: 10px;
  color: #f87171;
  font-size: 12px;
  font-weight: 700;
}

.quality-backdrop {
  z-index: 100002;
  align-items: center;
  overflow: hidden;
  padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
}

.quality-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }

.quality-heading h2 { font-size: 25px; margin: 5px 0 22px; color: #f1f5f9; }

.quality-eyebrow { font-size: 10px; letter-spacing: .12em; font-weight: 700; color: #7dd3fc; }

@media (max-width: 640px) {

.quality-heading h2 { font-size: 22px; }

}

.invoice-attachment-row {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(340px, auto);
  gap: 18px;
  align-items: center;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #263449;
}

.invoice-attachment-copy { min-width: 0; }

.invoice-attachment-control { display: flex; align-items: center; justify-content: flex-end; gap: 12px; min-width: 0; }

.invoice-attachment-label { color: #cbd5e1; font-size: 11px; font-weight: 800; }

.attachment-selection-summary { min-width: 0; color: #94a3b8; font-size: 11px; overflow-wrap: anywhere; }

.workflow-file-input {
  width: 100%;
  padding: 9px;
  border: 1px dashed #475569;
  border-radius: 9px;
  background: #0f172a;
  color: #cbd5e1;
  font-size: 12px;
  box-sizing: border-box;
}

.record-detail-section-title { grid-column: 1 / -1; padding: 10px 12px; background: #0b1220; color: #7dd3fc; font-size: 11px; font-weight: 850; text-transform: uppercase; }

.attachment-list { display: flex; flex-wrap: wrap; gap: 7px; }

.certificate-file-row .attachment-button { min-width: 0; }

.attachment-button {
  border: 1px solid #334155;
  border-radius: 8px;
  padding: 7px 9px;
  background: #172033;
  color: #7dd3fc;
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
}

/* Голые классы без .chip - см. комментарий у .certificate-journal-button в 03-metal-journal-grid.css. */
.attachment-journal-button {
  border-color: #0284c7;
  background: rgba(2, 132, 199, 0.18);
  color: #7dd3fc;
  font-weight: 850;
}

.attachment-quick-list { width: 100%; display: grid; gap: 8px; }

.attachment-quick-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 7px; align-items: stretch; }

.attachment-quick-item {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  padding: 11px 12px;
  border: 1px solid #334155;
  border-radius: 9px;
  background: #0f172a;
  color: #e2e8f0;
  font-size: 12px;
  font-weight: 750;
  text-align: left;
  overflow-wrap: anywhere;
  cursor: pointer;
}

/* ── «Полные сведения»: скачивание и удаление вложений — те же мягкие плоские кнопки-значки, что в окне просмотра ── */
.attachment-delete-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 40px;
  border: 1px solid rgba(248, 113, 113, .5);
  border-radius: 10px;
  padding: 8px 11px;
  background: rgba(248, 113, 113, .14);
  color: #fca5a5;
  font-size: 13px;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.attachment-delete-button:hover { border-color: rgba(248, 113, 113, .8); background: rgba(239, 68, 68, .26); color: #fff; }

.attachment-download-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  border: 1px solid rgba(148, 163, 184, .28);
  border-radius: 10px;
  padding: 8px 10px;
  background: rgba(148, 163, 184, .1);
  color: #dbe8f6;
  font-size: 14px;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.attachment-download-button:hover { border-color: rgba(56, 189, 248, .55); background: rgba(56, 189, 248, .17); color: #fff; }

/* ── Окно просмотра вложения: инструменты — мягкие плоские кнопки, как остальной сайт (синий/зелёный только на интерактиве) ── */
.attachment-preview-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  border: 1px solid rgba(148, 163, 184, .28);
  border-radius: 10px;
  padding: 8px 10px;
  background: rgba(148, 163, 184, .1);
  color: #dbe8f6;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.attachment-preview-action:hover:not(:disabled),
.attachment-preview-action:focus-visible { border-color: rgba(56, 189, 248, .55); background: rgba(56, 189, 248, .17); color: #fff; }

.attachment-preview-action:disabled { opacity: .34; cursor: not-allowed; }

.attachment-preview-actions { display: flex; align-items: center; gap: 7px; }

.attachment-preview-zoom-value { min-width: 58px; font-size: 12px; font-variant-numeric: tabular-nums; }

.attachment-preview-action.is-download { border-color: rgba(52, 211, 153, .5); background: rgba(52, 211, 153, .14); color: #a7f3d0; }

.attachment-preview-action.is-download:hover:not(:disabled),
.attachment-preview-action.is-download:focus-visible { border-color: rgba(52, 211, 153, .8); background: rgba(52, 211, 153, .26); color: #fff; }

#metal-record-detail-dialog {
  align-items: center;
  overflow: hidden;
  padding: 8px;
  block-size: 100vh;
  block-size: 100dvh;
  box-sizing: border-box;
  padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
}

#metal-record-detail-dialog .record-detail-card {
  --record-detail-tone: 56, 189, 248;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  box-sizing: border-box;
  width: min(1680px, calc(100vw - 12px));
  max-height: 100%;
  overflow: hidden;
  padding: 15px;
  border-color: rgba(var(--record-detail-tone), .62);
}

#metal-record-detail-dialog .record-detail-card.journal-tone-waiting { --record-detail-tone: 245, 158, 11; }

#metal-record-detail-dialog .record-detail-card.journal-tone-senior { --record-detail-tone: 249, 115, 22; }

#metal-record-detail-dialog .record-detail-card.journal-tone-engineer { --record-detail-tone: 59, 130, 246; }

#metal-record-detail-dialog .record-detail-card.journal-tone-accepted { --record-detail-tone: 34, 197, 94; }

#metal-record-detail-dialog .record-detail-card.journal-tone-senior-approved { --record-detail-tone: 20, 184, 166; }

#metal-record-detail-dialog .record-detail-card.journal-tone-engineer-approved { --record-detail-tone: 14, 165, 233; }

#metal-record-detail-dialog .record-detail-card.journal-tone-rejected { --record-detail-tone: 239, 68, 68; }

#metal-record-detail-dialog .record-detail-heading { min-width: 0; align-items: center; }

#metal-record-detail-dialog .record-detail-heading > div:first-child,
.attachment-preview-card .record-detail-heading > div:first-child { min-width: 0; }

#metal-record-detail-dialog .record-detail-close,
.attachment-preview-card .record-detail-close { flex: 0 0 auto; min-width: 44px; min-height: 44px; }

#metal-record-detail-dialog .workflow-title { font-size: 21px; }

#metal-record-detail-dialog .workflow-description { margin-top: 3px; font-size: 13px; }

#metal-record-detail-dialog .record-detail-grid {
  display: block;
  min-height: 0;
  margin-top: 10px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  border: 0;
  border-radius: 0;
  background: transparent;
}

#metal-record-detail-dialog .record-detail-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 8px 11px;
  border: 1px solid rgba(56,189,248,.25);
  border-radius: 10px;
  background: rgba(2,132,199,.08);
  color: #cbd5e1;
  font-size: 13px;
}

.record-route-step {
  position: relative;
  z-index: 0;
  display: grid;
  justify-items: center;
  gap: 3px;
  min-width: 0;
  color: #64748b;
}

.record-route-step:not(:last-child)::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 10px;
  left: calc(50% + 10px);
  width: calc(100% - 20px);
  height: 2px;
  background: #334155;
}

.record-route-step.is-done:not(:last-child)::after {
  background: linear-gradient(90deg, rgba(var(--record-detail-tone), .45), rgba(var(--record-detail-tone), 1), rgba(var(--record-detail-tone), .45));
  background-size: 200% 100%;
  animation: recordRouteFlow 2.2s linear infinite;
}

.record-route-dot {
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border: 1px solid #475569;
  border-radius: 50%;
  background: #111827;
  color: #64748b;
  font-size: 9px;
  font-weight: 900;
}

.record-route-step.is-done .record-route-dot {
  border-color: rgba(var(--record-detail-tone), .85);
  background: rgba(var(--record-detail-tone), .22);
  color: rgb(var(--record-detail-tone));
}

.record-route-step.is-active .record-route-dot {
  border-color: rgb(var(--record-detail-tone));
  color: #fff;
  box-shadow: 0 0 0 0 rgba(var(--record-detail-tone), .55);
  animation: recordRoutePulse 1.8s ease-out infinite;
}

.record-route-step.is-done .record-route-label,
.record-route-step.is-active .record-route-label { color: #dbeafe; }

.record-route-label { max-width: 100%; font-size: 9px; font-weight: 800; line-height: 1.1; text-align: center; overflow-wrap: anywhere; }

.record-detail-number { color: #f8fafc; font-size: 17px; font-weight: 900; }

.record-detail-status { padding: 5px 9px; border-radius: 999px; background: rgba(51,65,85,.75); color: #e2e8f0; font-weight: 800; }

.record-detail-status.journal-tone-accepted,
.record-detail-status.journal-tone-senior-approved,
.record-detail-status.journal-tone-engineer-approved { background: rgba(21,74,49,.78); color: #86efac; }

.record-detail-status.journal-tone-rejected { background: rgba(80,24,24,.78); color: #fca5a5; }

.record-detail-status.journal-tone-senior,
.record-detail-status.journal-tone-waiting { background: rgba(87,55,8,.8); color: #fcd34d; }

.record-detail-status.journal-tone-engineer { background: rgba(23,55,95,.78); color: #93c5fd; }

#metal-record-detail-dialog .record-detail-section-title {
  padding: 7px 10px;
  border-bottom: 1px solid rgba(56,189,248,.22);
  border-radius: 9px 9px 0 0;
  background: rgba(2,6,23,.38);
  font-size: 10.5px;
  letter-spacing: .06em;
}

#metal-record-detail-dialog .record-detail-main {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: 9px;
  margin-top: 9px;
}

#metal-record-detail-dialog .record-detail-lower {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 9px;
  margin-top: 9px;
}

#metal-record-detail-dialog .record-detail-panel {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(51,65,85,.82);
  border-radius: 10px;
}

#metal-record-detail-dialog .record-detail-fields {
  display: grid;
  gap: 5px;
  padding: 6px;
}

#metal-record-detail-dialog .record-detail-supply-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }

#metal-record-detail-dialog .record-detail-control-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }

#metal-record-detail-dialog .record-detail-item,
#metal-record-detail-dialog .record-detail-document-card {
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid rgba(51,65,85,.8);
  border-radius: 8px;
}

#metal-record-detail-dialog .record-detail-item.is-wide { grid-column: span 2; }

#metal-record-detail-dialog .record-detail-label { font-size: 9.5px; }

#metal-record-detail-dialog .record-detail-value { margin-top: 3px; font-size: 13.5px; line-height: 1.3; }

#metal-record-detail-dialog .record-detail-documents-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  padding: 6px;
}

#metal-record-detail-dialog .attachment-list { gap: 5px; margin-top: 5px; }

#metal-record-detail-dialog .attachment-button { padding: 6px 8px; font-size: 10.5px; }

#metal-record-detail-dialog .record-detail-history-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  padding: 6px;
}

#metal-record-detail-dialog .record-detail-history-toggle {
  display: block;
  width: calc(100% - 12px);
  box-sizing: border-box;
  min-height: 40px;
  margin: 0 6px 6px;
  border: 1px solid rgba(56,189,248,.5);
  border-radius: 8px;
  background: rgba(3,105,161,.24);
  color: #bae6fd;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

#metal-record-detail-dialog .record-detail-history-toggle:hover { border-color: #38bdf8; background: rgba(3,105,161,.4); color: #fff; }

#metal-record-detail-dialog .history-entry { padding: 6px 8px; }

#metal-record-detail-dialog .history-entry-title { font-size: 11.5px; }

#metal-record-detail-dialog .history-entry-meta { margin-top: 3px; font-size: 10.5px; }

#metal-attachment-preview-dialog {
  overflow: hidden;
  block-size: 100vh;
  block-size: 100dvh;
  box-sizing: border-box;
  padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
}

.attachment-preview-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  box-sizing: border-box;
  width: min(960px, 100%);
  height: min(920px, 100%);
  max-height: 100%;
  overflow: hidden;
}

.attachment-preview-content { min-height: 0; margin-top: 14px; display: grid; place-items: center; overflow: hidden; }

.attachment-preview-image-stage { position: relative; width: 100%; height: 100%; min-height: 160px; overflow: hidden; box-sizing: border-box; overscroll-behavior: contain; cursor: grab; touch-action: none; user-select: none; }

.attachment-preview-image-stage.is-dragging { cursor: grabbing; }

/* inset: 0, а не top/left: 50% + width/height: 100% + компенсирующий translate(-50%,-50%): при position: absolute
   процентная высота резолвится только если у предка есть явная (не «auto» через grid place-items) высота — тут её
   не было, и height: 100% сваливался в auto, из-за чего и высота вложенной картинки (см. ниже) считалась неверно. */
.attachment-preview-pan-layer { position: absolute; inset: 0; display: grid; place-items: center; will-change: transform; pointer-events: none; }

/* Размер (width/height) ставит JS в px (sizeAttachmentPreviewImage) — сама картинка внутри вписывается с сохранением
   пропорций через object-fit: contain. Через проценты в CSS размер не резолвился (см. комментарий там же). */
.attachment-preview-content img { display: block; object-fit: contain; border-radius: 8px; transform-origin: center; transition: transform .16s ease; will-change: transform; pointer-events: none; user-select: none; }

.attachment-preview-image-stage.is-dragging img { transition: none; }

.attachment-preview-content.is-pdf { display: flex; flex-direction: column; place-items: initial; }

.attachment-pdf-toolbar { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px; border-bottom: 1px solid rgba(148, 163, 184, .18); background: rgba(15, 23, 42, .5); }

.attachment-pdf-status { min-width: 0; color: #cbd5e1; font-size: 12px; font-weight: 750; }

.attachment-open-original { flex: 0 0 auto; min-height: 38px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid rgba(148, 163, 184, .28); border-radius: 9px; background: rgba(148, 163, 184, .1); color: #dbe8f6; font-size: 12px; font-weight: 700; text-decoration: none; transition: background-color .15s ease, border-color .15s ease, color .15s ease; }

.attachment-open-original:hover, .attachment-open-original:focus-visible { border-color: rgba(56, 189, 248, .55); background: rgba(56, 189, 248, .17); color: #fff; }

.attachment-pdf-pages { flex: 1 1 auto; min-height: 0; width: 100%; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 12px; box-sizing: border-box; background: #242424; cursor: grab; }

.attachment-pdf-pages.is-dragging { cursor: grabbing; user-select: none; }

.attachment-pdf-page { width: fit-content; max-width: none; margin: 0 auto 12px; border-radius: 5px; background: #fff; box-shadow: 0 5px 18px rgba(0,0,0,.35); overflow: hidden; }

.attachment-pdf-page:last-child { margin-bottom: 0; }

.attachment-pdf-page-label { padding: 5px 8px; border-bottom: 1px solid #d1d5db; background: #f8fafc; color: #475569; font-size: 10px; font-weight: 750; text-align: center; }

.attachment-pdf-page-frame { position: relative; overflow: hidden; background: #fff; }

.attachment-pdf-page canvas { position: absolute; top: 50%; left: 50%; display: block; max-width: none; background: #fff; transform-origin: center; }

.attachment-download-link { display: inline-flex; padding: 11px 14px; border-radius: 9px; background: #0284c7; color: #fff; font-weight: 800; text-decoration: none; }

@media (max-width: 900px) {

.attachment-preview-card .record-detail-heading { flex-direction: column; align-items: stretch; }

.attachment-preview-actions { flex-wrap: wrap; justify-content: flex-end; }

.invoice-attachment-row { grid-template-columns: 1fr; }

.invoice-attachment-control { justify-content: stretch; flex-direction: column; align-items: stretch; gap: 7px; }

#metal-record-detail-dialog { align-items: stretch; overflow: hidden; }

#metal-record-detail-dialog .record-detail-card { width: 100%; height: 100%; max-height: 100%; padding: 13px; }

#metal-record-detail-dialog .record-detail-main,
  #metal-record-detail-dialog .record-detail-lower { grid-template-columns: 1fr; }

#metal-record-detail-dialog .record-detail-supply-fields,
  #metal-record-detail-dialog .record-detail-control-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }

#metal-record-detail-dialog .record-detail-documents-grid { grid-template-columns: 1fr; }

#metal-record-detail-dialog .record-detail-history-list { grid-template-columns: 1fr; }

.record-route-label { font-size: 8px; }

#metal-attachment-preview-dialog { align-items: stretch; }

.attachment-preview-card { width: 100%; height: 100%; max-height: 100%; padding: 12px; }

.attachment-pdf-toolbar { align-items: stretch; flex-direction: column; }

.attachment-open-original { width: 100%; box-sizing: border-box; }

.print-preview-backdrop { padding: 0; background: #0b0f17; }

.print-preview-card { width: 100%; height: 100dvh; border: 0; border-radius: 0; padding: 8px; }

.print-preview-toolbar { align-items: flex-start; }

.print-preview-actions { flex-shrink: 0; }

.print-preview-button { min-height: 44px; padding: 9px 11px; }

}

@media (max-width: 560px) {

.print-preview-toolbar .workflow-description { display: none; }

.print-preview-toolbar .workflow-title { max-width: 42vw; font-size: 13px; line-height: 1.2; }

.print-preview-actions { gap: 5px; }

.print-preview-button { padding: 8px 9px; font-size: 11px; }

}

@media (max-width: 520px) {

#metal-record-detail-dialog .record-detail-supply-fields,
  #metal-record-detail-dialog .record-detail-control-fields { grid-template-columns: 1fr; }

#metal-record-detail-dialog .record-detail-item.is-wide { grid-column: auto; }

}

@media (prefers-reduced-motion: reduce) {

.journal-row-updated,
  .record-route-step::after,
  .record-route-dot { animation: none !important; transition: none !important; }

}

#core-site-dialog-message, .workflow-description { white-space: pre-wrap; overflow-wrap: anywhere; }

#core-site-dialog-message, #metal-workflow-dialog-description { max-height: 35vh; overflow-y: auto; }

html[data-theme="light"] .btn-theme-toggle,
html[data-theme="light"] .btn-badge-notify,
html[data-theme="light"] .btn-badge-logout,
html[data-theme="light"] .btn-metal-small,
html[data-theme="light"] .btn-copy,
html[data-theme="light"] .print-preview-button,
html[data-theme="light"] .record-detail-close {
  border-color: #bdcddd;
  background: #f4f7fa;
  color: #475569;
}

html[data-theme="light"] .btn-theme-toggle:hover,
html[data-theme="light"] .btn-badge-notify:hover,
html[data-theme="light"] .btn-metal-small:hover,

html[data-theme="light"] .attachment-journal-button,
html[data-theme="light"] .certificate-journal-button {
  border-color: #68b8df;
  background: #dff3fd;
  color: #075985;
}

html[data-theme="light"] .auth-card,
html[data-theme="light"] .workflow-card,
html[data-theme="light"] .site-dialog-card {
  border-color: #b9cddd;
  background: #f9fbfd;
  color: #172033;
  box-shadow: 0 24px 65px rgba(24, 49, 71, .25);
}

html[data-theme="light"] .auth-field label,
html[data-theme="light"] .site-dialog-message,
html[data-theme="light"] .invoice-attachment-label { color: #475569; }

html[data-theme="light"] .workflow-cancel,
html[data-theme="light"] .site-dialog-cancel { background: #d9e3ec; color: #334155; }

html[data-theme="light"] .record-detail-grid { border-color: #c2d1dd; background: #c2d1dd; }

html[data-theme="light"] .attachment-selection-summary,
html[data-theme="light"] .attachment-preview-content { border-color: #c4d3df; background: #edf3f7; color: #475569; }

html[data-theme="light"] .attachment-button,
html[data-theme="light"] .attachment-quick-item {
  border-color: #b9ccdb;
  background: #fff;
  color: #075985;
}

html[data-theme="light"] .attachment-download-button {
  border-color: rgba(15, 23, 42, .18);
  background: rgba(15, 23, 42, .05);
  color: #334155;
}

html[data-theme="light"] .attachment-download-button:hover {
  border-color: rgba(2, 132, 199, .55);
  background: rgba(14, 165, 233, .15);
  color: #075985;
}

html[data-theme="light"] .attachment-preview-action,
html[data-theme="light"] .attachment-open-original {
  border-color: rgba(15, 23, 42, .18);
  background: rgba(15, 23, 42, .05);
  color: #334155;
}

html[data-theme="light"] .attachment-preview-action:hover:not(:disabled), html[data-theme="light"] .attachment-preview-action:focus-visible,
html[data-theme="light"] .attachment-open-original:hover, html[data-theme="light"] .attachment-open-original:focus-visible {
  border-color: rgba(2, 132, 199, .55);
  background: rgba(14, 165, 233, .15);
  color: #075985;
}

html[data-theme="light"] .attachment-preview-action.is-download { border-color: rgba(5, 150, 105, .5); background: rgba(16, 185, 129, .12); color: #065f46; }

html[data-theme="light"] .attachment-preview-action.is-download:hover:not(:disabled), html[data-theme="light"] .attachment-preview-action.is-download:focus-visible { border-color: rgba(5, 150, 105, .8); background: rgba(16, 185, 129, .24); color: #065f46; }

html[data-theme="light"] .attachment-delete-button { border-color: rgba(185, 28, 28, .4); background: rgba(239, 68, 68, .1); color: #b91c1c; }

html[data-theme="light"] .attachment-delete-button:hover { border-color: rgba(185, 28, 28, .7); background: rgba(239, 68, 68, .2); color: #7f1d1d; }

html[data-theme="light"] .attachment-pdf-toolbar { border-bottom-color: rgba(15, 23, 42, .12); background: rgba(255, 255, 255, .55); }

html[data-theme="light"] .attachment-pdf-status { color: #334155; }

html[data-theme="light"] #metal-record-detail-dialog .record-detail-history-toggle { border-color: #87bed9; background: #e0f2fe; color: #075985; }

html[data-theme="light"] .workflow-card.metal-grade-card[data-steel-tone] {
  border-color: var(--steel-border);
  border-left: 6px solid var(--steel-accent);
  background: var(--steel-surface);
  box-shadow: 0 24px 65px rgba(24,49,71,.25), 0 0 28px var(--steel-glow);
}

html[data-theme="light"] #metal-record-detail-dialog .record-detail-card {
  border-color: rgba(var(--record-detail-tone), .7);
  color: #172033;
}

html[data-theme="light"] #metal-record-detail-dialog .record-detail-summary {
  border-color: rgba(var(--record-detail-tone), .42);
  background: rgba(var(--record-detail-tone), .1);
  color: #334155;
}

html[data-theme="light"] #metal-record-detail-dialog .record-detail-number { color: #172033; }

html[data-theme="light"] #metal-record-detail-dialog .record-detail-status.journal-tone-accepted,
html[data-theme="light"] #metal-record-detail-dialog .record-detail-status.journal-tone-senior-approved,
html[data-theme="light"] #metal-record-detail-dialog .record-detail-status.journal-tone-engineer-approved { background: #d9f5e6; color: #08764f; }

html[data-theme="light"] #metal-record-detail-dialog .record-detail-status.journal-tone-rejected { background: #fee2e2; color: #b4232d; }

html[data-theme="light"] #metal-record-detail-dialog .record-detail-status.journal-tone-senior,
html[data-theme="light"] #metal-record-detail-dialog .record-detail-status.journal-tone-waiting { background: #fff1d6; color: #9a5a05; }

html[data-theme="light"] #metal-record-detail-dialog .record-detail-status.journal-tone-engineer { background: #dbeafe; color: #1d4ed8; }

html[data-theme="light"] #metal-record-detail-dialog .record-detail-panel {
  border-color: #b9cbd9;
}

html[data-theme="light"] #metal-record-detail-dialog .record-detail-section-title {
  border-bottom-color: #b9cbd9;
  color: #075985;
}

html[data-theme="light"] #metal-record-detail-dialog .record-detail-item,
html[data-theme="light"] #metal-record-detail-dialog .record-detail-document-card,
html[data-theme="light"] #metal-record-detail-dialog .history-entry {
  border-color: #c2d1dd;
}

html[data-theme="light"] #metal-record-detail-dialog .record-detail-label { color: #075985; }

html[data-theme="light"] #metal-record-detail-dialog .record-detail-value { color: #1e293b; }

html[data-theme="light"] .invoice-header-card .invoice-attachment-row { border-top-color: #c4d3df; }

/* ── Светлая тема: фон выразительнее (глубже базовый тон и заметнее цветные свечения) ── */

/* ── Светлая тема, «Полные сведения»: сплошная основа, а не полупрозрачный градиент (сквозь окно просвечивала страница) ── */
html[data-theme="light"] #metal-record-detail-dialog .record-detail-card {
  background:
    linear-gradient(145deg, rgba(var(--record-detail-tone), .22) 0%, rgba(var(--record-detail-tone), .11) 48%, rgba(237, 243, 247, 0) 100%),
    rgba(237, 243, 247, .72);
}

/* ── «Полные сведения»: тёмная тема — полупрозрачное окно и панели, вместо боковой полосы тонкая цветная линия сверху ── */
#metal-record-detail-dialog .record-detail-card {
  background: linear-gradient(145deg, rgba(var(--record-detail-tone), .14) 0%, rgba(23, 32, 51, .5) 22%, rgba(17, 27, 45, .46) 100%);
  box-shadow: inset 0 3px 0 rgba(var(--record-detail-tone), .85), 0 24px 60px rgba(0, 0, 0, .45);
}

#metal-record-detail-dialog .record-detail-panel { background: rgba(15, 23, 42, .3); }

#metal-record-detail-dialog .record-detail-item,
#metal-record-detail-dialog .record-detail-document-card { background: rgba(17, 24, 39, .38); }

#metal-record-detail-dialog .history-entry { background: rgba(15, 23, 42, .42); }

/* Размер в окне — того же начертания, что соседние поля (крупнее чуть-чуть, без жирности). */
#metal-record-detail-dialog .record-detail-value.journal-size,
#metal-record-detail-dialog .record-detail-summary .journal-size { font-weight: inherit; color: inherit; letter-spacing: 0; }

#metal-record-detail-dialog .record-detail-value.journal-size { font-size: 15px; }

#metal-record-detail-dialog .record-detail-summary .journal-size { font-size: inherit; }

/* ── Светлая тема ── */
html[data-theme="light"] #metal-record-detail-dialog .record-detail-card { box-shadow: inset 0 3px 0 rgba(var(--record-detail-tone), .9), 0 24px 65px rgba(24, 49, 71, .26); }

html[data-theme="light"] #metal-record-detail-dialog .record-route-step { color: #475569; }

/* ── Размытие фона — ТОЛЬКО за окном «Полные сведения», и только пока оно открыто (исключение по решению владельца, 25.09.2026).
   Один размытый слой над неподвижной страницей: под открытым окном частицы (core.js) и блик стоят на паузе.
   На постоянных панелях размытие не использовать. Рубильник: удалить следующую строку. ── */
body.metal-modal-open #metal-record-detail-dialog { background: rgba(2, 6, 23, .55); }

body.metal-modal-open #metal-record-detail-dialog .record-detail-card { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }

@media (prefers-reduced-transparency: reduce) {

body.metal-modal-open #metal-record-detail-dialog .record-detail-card { -webkit-backdrop-filter: none; backdrop-filter: none; background: #172033; }

}

html[data-theme="light"] body.metal-modal-open #metal-record-detail-dialog { background: rgba(30, 50, 72, .35); }

#metal-workflow-dialog .workflow-card { background: rgba(23, 32, 51, .62); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }

#core-user-management-dialog .workflow-card { background: rgba(23, 32, 51, .62); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }

body:has(.workflow-backdrop:not(.hidden), .site-dialog-backdrop:not(.hidden)) .ambient-sheen { animation-play-state: paused; }

/* ── Светлая тема, маршрут этапов в «Полных сведениях»: пройденные этапы окрашены цветом статуса, как в тёмной теме ── */
html[data-theme="light"] #metal-record-detail-dialog .record-route-dot { border-color: #64748b; background: rgba(255, 255, 255, .75); color: #334155; }

html[data-theme="light"] #metal-record-detail-dialog .record-route-step:not(:last-child)::after { background: #94a3b8; }

html[data-theme="light"] #metal-record-detail-dialog .record-route-step.is-done .record-route-dot { border-color: rgb(var(--record-detail-tone)); background: rgb(var(--record-detail-tone)); color: #fff; text-shadow: 0 0 2px rgba(0, 0, 0, .55); }

html[data-theme="light"] #metal-record-detail-dialog .record-route-step.is-done:not(:last-child)::after { background: rgb(var(--record-detail-tone)); background: color-mix(in srgb, rgb(var(--record-detail-tone)) 78%, #0f172a); animation: none; }

html[data-theme="light"] #metal-record-detail-dialog .record-route-step.is-active .record-route-dot { border-color: color-mix(in srgb, rgb(var(--record-detail-tone)) 78%, #0f172a); border-width: 2px; background: #fff; color: #0f172a; }

html[data-theme="light"] #metal-record-detail-dialog .record-route-step .record-route-label { color: #334155; font-weight: 800; }

html[data-theme="light"] #metal-record-detail-dialog .record-route-step.is-done .record-route-label,
html[data-theme="light"] #metal-record-detail-dialog .record-route-step.is-active .record-route-label { color: #0f172a; }

@media (min-width: 900px) {

#metal-workflow-dialog.is-wide-form .workflow-card { width: min(1040px, 100%); max-height: calc(100dvh - 24px); overflow-y: auto; padding: 16px 18px; box-shadow: inset 0 3px 0 rgba(56, 189, 248, .8), 0 24px 60px rgba(0, 0, 0, .45); }

#metal-workflow-dialog.is-wide-form .workflow-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 12px; margin-top: 12px; padding: 12px; border: 1px solid rgba(148, 163, 184, .22); border-radius: 10px; background: rgba(15, 23, 42, .3); }

#metal-workflow-dialog.is-wide-form .workflow-field { grid-column: span var(--wf-span, 1); min-width: 0; }

#metal-workflow-dialog.is-wide-form .workflow-field label { margin-bottom: 4px; font-size: 10px; letter-spacing: .04em; }

#metal-workflow-dialog.is-wide-form .workflow-field .auth-input, #metal-workflow-dialog.is-wide-form .workflow-field .workflow-file-input { padding: 8px 10px; font-size: 13px; }

#metal-workflow-dialog.is-wide-form .workflow-field textarea { min-height: 64px; height: 64px; }

#metal-workflow-dialog.is-wide-form .workflow-field .batch-custom-input { margin-top: 6px; }

#metal-workflow-dialog.is-wide-form .workflow-error { min-height: 0; margin-top: 8px; }

#metal-workflow-dialog.is-wide-form .workflow-actions { grid-template-columns: 1fr 1fr; margin-top: 12px; }

}

#metal-workflow-dialog .workflow-cancel { background: rgba(148, 163, 184, .12); border: 1px solid rgba(148, 163, 184, .3); }

#metal-workflow-dialog .workflow-cancel:hover { background: rgba(148, 163, 184, .22); }

#metal-workflow-dialog .workflow-confirm { background: #0284c7; border: 1px solid #0ea5e9; }

#metal-workflow-dialog .workflow-confirm:hover { background: #0ea5e9; }

html[data-theme="light"] #metal-workflow-dialog.is-wide-form .workflow-fields { background: rgba(255, 255, 255, .55); border-color: rgba(71, 85, 105, .22); }

html[data-theme="light"] #metal-workflow-dialog .workflow-cancel { background: rgba(15, 23, 42, .05); border-color: rgba(15, 23, 42, .2); color: #334155; }

html[data-theme="light"] #metal-workflow-dialog .workflow-cancel:hover { background: rgba(15, 23, 42, .1); }

html[data-theme="light"] #metal-workflow-dialog .workflow-file-input { background: rgba(255, 255, 255, .8); border-color: #a9bccb; color: #334155; }

/* ── Фон не прокручивается, пока открыто любое окно (раньше блокировка была только у «Полных сведений» и вложений) ── */
html:has(.workflow-backdrop:not(.hidden)), body:has(.workflow-backdrop:not(.hidden)),
html:has(.site-dialog-backdrop:not(.hidden)), body:has(.site-dialog-backdrop:not(.hidden)) { overflow: hidden; overscroll-behavior: none; }

/* ── «Другое…» — ввод прямо на месте списка: при выборе список скрывается, поле ввода занимает его место на всю ширину, «↩» — внутри поля справа и возвращает список ── */
.workflow-choice-row, .batch-custom-wrap { position: relative; display: block; width: 100%; }

.workflow-choice-row.is-custom > select { display: none; }

.workflow-choice-row .batch-custom-input, .batch-custom-wrap .batch-custom-input { display: block; width: 100%; box-sizing: border-box; margin-top: 0; padding-right: 46px; }

.workflow-choice-row .batch-custom-input.hidden, .batch-custom-wrap .batch-custom-input.hidden { display: none; }

.workflow-choice-back, .batch-custom-back { position: absolute; top: 1px; bottom: 1px; right: 1px; width: 38px; height: auto; padding: 0; border: 0; border-left: 1px solid rgba(148, 163, 184, .3); border-radius: 0 9px 9px 0; background: rgba(148, 163, 184, .12); color: #cbd5e1; font-size: 15px; line-height: 1; cursor: pointer; }

.workflow-choice-back:hover, .batch-custom-back:hover { border-color: rgba(56, 189, 248, .7); background: rgba(56, 189, 248, .18); color: #fff; }

.workflow-choice-row:not(.is-custom) > .workflow-choice-back { display: none; }

html[data-theme="light"] .workflow-choice-back, html[data-theme="light"] .batch-custom-back { border-left-color: rgba(15, 23, 42, .22); background: rgba(15, 23, 42, .06); color: #334155; }

/* ── Крестик закрытия: при наведении красная подсветка, как у кнопки выхода ── */
.record-detail-close:hover, .record-detail-close:focus-visible { border-color: rgba(248, 113, 113, .7); background: rgba(239, 68, 68, .2); color: #fecaca; }

html[data-theme="light"] .record-detail-close:hover, html[data-theme="light"] .record-detail-close:focus-visible { border-color: rgba(185, 28, 28, .55); background: rgba(239, 68, 68, .14); color: #7f1d1d; }

html[data-theme="light"] .record-detail-item, html[data-theme="light"] .record-detail-main, html[data-theme="light"] .record-detail-panel, html[data-theme="light"] .history-entry { background: rgba(255, 255, 255, .5); }

html[data-theme="light"] .record-detail-section-title { background: rgba(220, 232, 241, .6); }

html[data-theme="light"] #metal-record-detail-dialog .record-detail-panel { background: rgba(230, 238, 244, .55); }

html[data-theme="light"] #metal-record-detail-dialog .record-detail-section-title { background: rgba(220, 232, 241, .65); }

html[data-theme="light"] #metal-record-detail-dialog .record-detail-item, html[data-theme="light"] #metal-record-detail-dialog .record-detail-document-card, html[data-theme="light"] #metal-record-detail-dialog .history-entry { background: rgba(255, 255, 255, .6); }
/* ==== _dev_materials/css-sources/09-analytics.css ==== */
.quality-mini { flex: 1 1 280px; max-width: 550px; min-width: 220px; display: flex; align-items: center; gap: 14px; padding: 5px 12px; border: 1px solid #284152; border-radius: 7px; background: #0d1b2a; color: #e2e8f0; text-align: left; cursor: pointer; }

.quality-mini:hover, .quality-mini:focus-visible { border-color: #38bdf8; background: #132637; }

.quality-mini-total { display: grid; white-space: nowrap; }

.quality-mini-total small { font-size: 10px; color: #94a3b8; }

.quality-mini-total strong { font-size: 19px; line-height: 1.1; font-variant-numeric: tabular-nums; }

.quality-mini-plot { flex: 1; min-width: 0; display: grid; gap: 5px; }

.quality-track { height: 8px; display: flex; width: 100%; overflow: hidden; border-radius: 4px; background: #334155; }

.quality-track > span { display: block; height: 100%; }

.quality-rejected { background: #f05268; }

.quality-accepted { background: #2cc68b; }

.quality-mini-legend { display: flex; justify-content: space-between; gap: 8px; font-size: 10px; white-space: nowrap; }

.quality-ok-text { color: #73e4b1; }

.quality-bad-text { color: #ff8c9c; }

.quality-open { color: #7dd3fc; font-size: 17px; }

.quality-card, .quality-card * { box-sizing: border-box; }

.quality-card { width: min(1400px, 100%); max-width: 1400px; height: auto; max-height: calc(100dvh - max(20px, env(safe-area-inset-top) + env(safe-area-inset-bottom))); padding: 24px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; background: #0d1829; border: 1px solid #2b4b61; }

.supplier-chart-field { --chart-plot-height: 190px; position: relative; width: 100%; padding: 12px 0 14px; overflow: hidden; border-bottom: 1px solid rgba(76,112,139,.35); background: linear-gradient(180deg, rgba(22,48,70,.18), rgba(10,24,39,0) 72%); }

.supplier-chart-field::before { content: ""; position: absolute; z-index: 0; top: 12px; right: 0; left: 0; height: var(--chart-plot-height); pointer-events: none; }

.supplier-chart-strip { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(var(--supplier-count), minmax(0, 1fr)); align-items: start; gap: clamp(2px, .55vw, 9px); width: calc(100% - 8px); margin-right: 8px; }

.supplier-chart-card { min-width: 0; padding: 0 2px 8px; text-align: center; }

.supplier-chart-total { min-height: 34px; display: grid; align-content: end; gap: 1px; font-variant-numeric: tabular-nums; }

.supplier-chart-column { width: 100%; display: flex; flex-direction: column; align-items: center; }

.supplier-chart-total span { color: #94a3b8; text-transform: uppercase; letter-spacing: .08em; }

.supplier-chart-total strong { color: #e2e8f0; }

.supplier-chart-plot { height: var(--chart-plot-height); display: flex; align-items: flex-end; justify-content: center; }

.supplier-chart-prism { position: relative; width: min(62px, calc(100% - 12px)); height: var(--chart-height, 132px); margin: 0 auto; }

.supplier-chart-stack { position: absolute; z-index: 2; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; overflow: visible; border: 1px solid #526b80; }

.supplier-chart-top { position: absolute; z-index: 3; top: -8px; left: 0; width: calc(100% + 8px); height: 8px; border: 1px solid #526b80; clip-path: polygon(0 100%, 8px 0, 100% 0, calc(100% - 8px) 100%); }

.supplier-chart-side { position: absolute; z-index: 1; top: 0; right: -8px; width: 8px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; border: 1px solid #526b80; border-left: 0; transform: skewY(-45deg); transform-origin: left top; }

.supplier-chart-side > i { display: block; flex: 0 0 auto; width: 100%; }

.supplier-chart-segment { position: relative; flex: 0 0 auto; width: 100%; min-height: 0; transition: height .2s ease; }

.supplier-chart-segment > span { position: absolute; z-index: 1; left: 50%; top: 50%; min-width: 68px; padding: 2px; border-radius: 4px; transform: translate(-50%, -50%); line-height: 1.15; white-space: nowrap; font-variant-numeric: tabular-nums; }

.supplier-chart-segment[style*="height:0%"] > span { display: none; }

.supplier-chart-segment[style*="height:0px"] > span { display: none; }

.supplier-chart-segment.is-label-hidden > span { display: none; }

.supplier-chart-values { min-height: 48px; display: grid; align-content: center; gap: 3px; padding: 9px 1px 0; line-height: 1.25; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

.supplier-chart-card h4 { min-height: 38px; margin: 7px 0 0; display: -webkit-box; overflow: hidden; color: #e2e8f0; line-height: 1.3; overflow-wrap: anywhere; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

.supplier-chart-field[data-density="medium"] .supplier-chart-prism { width: min(56px, calc(100% - 10px)); }

.supplier-chart-field[data-density="compact"] .supplier-chart-prism { width: min(48px, calc(100% - 12px)); }

.supplier-chart-field[data-density="compact"] .supplier-chart-segment > span { min-width: 0; }

.supplier-chart-field[data-density="compact"] .supplier-chart-total strong { font-size: 13px; white-space: nowrap; }

.supplier-chart-field[data-density="compact"] .supplier-chart-values { min-height: 43px; font-size: 11px; line-height: 1.2; }

.quality-report-title { margin: 18px 0 12px; text-align: center; }

.quality-report-title h3 { margin: 0; color: #e2e8f0; font-size: clamp(17px, 2vw, 22px); }

.quality-report-title span { display: block; margin-top: 5px; color: #94a3b8; font-size: 12px; }

.quality-report-table-wrap { width: 100%; overflow: visible; border: 1px solid #294054; border-radius: 9px; }

.quality-report-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 11px; font-variant-numeric: tabular-nums; }

.quality-report-table col { width: 10.75%; }

.quality-report-table .quality-col-supplier { width: 14%; }

.quality-report-table th, .quality-report-table td { padding: 11px 9px; border-right: 1px solid #263b4e; border-bottom: 1px solid #263b4e; text-align: right; vertical-align: middle; }

.quality-report-table thead th { background: #132438; color: #b9c9d8; font-size: 9px; line-height: 1.3; overflow-wrap: anywhere; }

.quality-report-table th:first-child { background: #132438; text-align: left; overflow-wrap: anywhere; }

.quality-report-table tr:last-child > * { border-bottom: 0; }

.quality-report-table tr > *:last-child { border-right: 0; }

@media (max-width: 1250px) {

.quality-mini { margin-left: auto; }

}

@media (max-width: 640px) {

.quality-mini { flex-basis: 100%; max-width: none; min-width: 0; gap: 8px; padding-inline: 9px; }

.quality-mini-total strong { font-size: 15px; }

.quality-mini-legend { gap: 5px; font-size: 8px; }

.quality-card { height: 100%; max-height: 100%; padding: 14px; border-radius: 12px; }

.supplier-chart-field { overflow: visible; border-bottom: 0; background: none; }

.supplier-chart-field::before { display: none; }

.supplier-chart-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

.supplier-chart-card { padding: 8px 5px 10px; border-bottom: 1px solid rgba(76,112,139,.35); background: linear-gradient(180deg, rgba(22,48,70,.18), rgba(10,24,39,0)); }

.supplier-chart-plot { height: 182px; }

.supplier-chart-prism, .supplier-chart-field[data-density] .supplier-chart-prism { width: min(58px, calc(100% - 20px)); }

}

@media (max-width: 820px) {

.quality-report-table-wrap { border: 0; }

.quality-report-table { display: block; }

.quality-report-table colgroup, .quality-report-table thead { display: none; }

.quality-report-table tbody { display: grid; gap: 10px; }

.quality-report-table tr { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border: 1px solid #294054; border-radius: 9px; background: #111f31; }

.quality-report-table th, .quality-report-table td { display: grid; gap: 3px; min-width: 0; padding: 10px; border-right: 1px solid #263b4e; border-bottom: 1px solid #263b4e; text-align: left; overflow-wrap: anywhere; }

.quality-report-table th:first-child { grid-column: 1 / -1; background: #173047; color: #e2e8f0; font-size: 13px; }

.quality-report-table td::before { content: attr(data-label); color: #8297aa; font-size: 8px; line-height: 1.3; text-transform: uppercase; }

.quality-report-table tr > *:nth-child(odd):not(:first-child) { border-right: 0; }

.quality-report-table tr > *:nth-last-child(-n+2) { border-bottom: 0; }

}

.journal-command-center .quality-mini {
  grid-area: 1 / 2 / 3 / 3;
  width: 100%;
  min-width: 0;
  max-width: none;
  margin: 0;
  box-sizing: border-box;
}

@media (min-width: 1201px) {

.aligned-inspection-tools .quality-mini {
    grid-area: 1 / 2 / 3 / 3;
    width: 100%;
    min-width: 0;
    max-width: none;
    margin: 0;
    box-sizing: border-box;
  }

}

@media (max-width: 900px) {

.journal-command-center .quality-mini { grid-area: 4 / 1 / 5 / 2; }

}

html[data-theme="light"] .quality-mini {
  border-color: #b9cddb;
  background: #f8fbfd;
  color: #172033;
}

html[data-theme="light"] .quality-open,
html[data-theme="light"] .quality-eyebrow,
html[data-theme="light"] .supplier-combobox::after { color: #075985; }

html[data-theme="light"] .quality-mini:hover { background: #edf8fe; }

html[data-theme="light"] .quality-track { background: #d6e0e9; }

html[data-theme="light"] .quality-mini-total small { color: #3f5165; }

html[data-theme="light"] .quality-ok-text { color: #08764f; }

html[data-theme="light"] .quality-bad-text { color: #c92f49; }

html[data-theme="light"] .quality-card {
  border-color: #aec7d9;
  background: #f7fafc;
}

html[data-theme="light"] .supplier-chart-total strong,
html[data-theme="light"] .supplier-chart-card h4,
html[data-theme="light"] .quality-report-title h3 { color: #172033; }

html[data-theme="light"] .supplier-chart-field { border-color: rgba(70,105,128,.3); background: linear-gradient(180deg, rgba(199,220,233,.24), rgba(247,250,252,0) 72%); }

html[data-theme="light"] .supplier-chart-field::before { border-color: rgba(81,113,136,.4); }

html[data-theme="light"] .quality-report-table-wrap { border-color: #c2d3e0; }

html[data-theme="light"] .quality-report-table th,
html[data-theme="light"] .quality-report-table td { border-color: #d4e0e9; }

html[data-theme="light"] .quality-report-table thead th,
html[data-theme="light"] .quality-report-table th:first-child { background: #e7f0f5; color: #42566b; }

@media (max-width: 640px) {

html[data-theme="light"] .supplier-chart-card { border-color: rgba(70,105,128,.3); background: linear-gradient(180deg, rgba(199,220,233,.24), rgba(247,250,252,0)); }

}

@media (max-width: 820px) {

html[data-theme="light"] .quality-report-table tr { border-color: #c2d3e0; background: #f7fafc; }

html[data-theme="light"] .quality-report-table th:first-child { background: #e0edf4; color: #172033; }

html[data-theme="light"] .quality-report-table td::before { color: #3f5165; }

}

/* Блоки внутри окна — без собственных рамок и боковых отступов: от края окна их отделяют только поля самого окна. */
#metal-journal-command-center .journal-overview-bar,
#metal-journal-command-center .metal-list-context,
#metal-journal-command-center .metal-toolbar-actions,
#metal-journal-command-center .tag-print-panel,
#metal-journal-command-center .journal-status-filter-wrap,
#metal-journal-command-center .journal-result-summary-panel,
#metal-journal-command-center .journal-toolbar,
#metal-journal-command-center .quality-mini {
  border: 0;
  background: transparent;
  box-shadow: none;
}

/* График и команды используют границы своих контролов, без дополнительных разделителей. */
#metal-journal-command-center .quality-mini,
#metal-journal-command-center .metal-toolbar-actions { position: relative; border-radius: 8px; }

#metal-journal-command-center .quality-mini { transition: background-color .16s ease; }

#metal-journal-command-center .quality-mini:hover,
#metal-journal-command-center .quality-mini:focus-visible { background-color: var(--jp-fill); }

@media (max-width: 640px) {

#metal-journal-command-center .quality-mini-legend { flex-wrap: wrap; gap: 2px 8px; }

}

/* ── Статистика приёмки: новое оформление (окно поверх страницы — полупрозрачное, с размытием под ним) ── */
#metal-analytics-dialog { background: rgba(2, 6, 23, .55); }

#metal-analytics-dialog .quality-card { background: rgba(13, 24, 41, .62); border: 1px solid rgba(148, 163, 184, .22); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 24px 60px rgba(0, 0, 0, .45); }

#metal-analytics-dialog .quality-metric { background: rgba(18, 34, 52, .5); border-color: rgba(148, 163, 184, .22); }

#metal-analytics-dialog .quality-filters select, #metal-analytics-dialog .quality-filters input { background: rgba(18, 33, 51, .6); border-color: rgba(148, 163, 184, .28); }

#metal-analytics-dialog .quality-report-table-wrap { border-color: rgba(148, 163, 184, .22); }

#metal-analytics-dialog .quality-report-table thead th, #metal-analytics-dialog .quality-report-table th:first-child { background: rgba(19, 36, 56, .5); }

#metal-analytics-dialog .quality-filters .btn-metal-small, #metal-analytics-dialog .quality-action-row .btn-metal-small { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border-radius: 10px; min-height: 40px; padding: 8px 14px; font-size: 12px; }

#metal-analytics-dialog .quality-filters .btn-metal-small:hover:not(:disabled), #metal-analytics-dialog .quality-action-row .btn-metal-small:hover:not(:disabled) { border-color: rgba(56, 189, 248, .7); background: rgba(56, 189, 248, .14); color: #e0f2fe; }

.quality-filters.is-report > .quality-report-title { order: 3; flex: 1 1 100%; margin: 0; padding: 0 8px; text-align: center; align-self: center; }

.quality-filters.is-report > .quality-report-title h3 { margin: 0; font-size: clamp(15px, 1.5vw, 20px); line-height: 1.25; }

.quality-filters.is-report > .quality-report-title span { display: block; min-height: 1.3em; margin-top: 4px; padding-bottom: 6px; }

.quality-filters.is-report.is-custom > .quality-report-title h3 { font-size: 14px; }

@media (min-width: 1300px) {

.quality-filters.is-report > .quality-report-title h3 { white-space: nowrap; font-size: clamp(14px, 1.25vw, 18px); }

.quality-filters.is-report > .quality-report-title { order: 0; flex: none; }

}

html[data-theme="light"] #metal-analytics-dialog { background: rgba(30, 50, 72, .35); }

html[data-theme="light"] #metal-analytics-dialog .quality-card { background: rgba(249, 251, 253, .72); border-color: rgba(71, 85, 105, .22); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 24px 65px rgba(24, 49, 71, .25); }

html[data-theme="light"] #metal-analytics-dialog .quality-metric { background: rgba(255, 255, 255, .7); border-color: rgba(71, 85, 105, .2); }

html[data-theme="light"] #metal-analytics-dialog .quality-filters select, html[data-theme="light"] #metal-analytics-dialog .quality-filters input { background: rgba(255, 255, 255, .85); border-color: #bdcddd; color: #172033; }

html[data-theme="light"] #metal-analytics-dialog .quality-report-table-wrap { border-color: rgba(71, 85, 105, .22); }

html[data-theme="light"] #metal-analytics-dialog .quality-report-table thead th, html[data-theme="light"] #metal-analytics-dialog .quality-report-table th:first-child { background: rgba(231, 240, 245, .8); color: #42566b; }

html[data-theme="light"] #metal-analytics-dialog .quality-filters .btn-metal-small, html[data-theme="light"] #metal-analytics-dialog .quality-action-row .btn-metal-small { border-color: rgba(15, 23, 42, .2); background: rgba(255, 255, 255, .7); color: #334155; }

html[data-theme="light"] #metal-analytics-dialog .quality-filters .btn-metal-small:hover:not(:disabled), html[data-theme="light"] #metal-analytics-dialog .quality-action-row .btn-metal-small:hover:not(:disabled) { border-color: rgba(2, 132, 199, .6); background: rgba(14, 165, 233, .14); color: #075985; }

html[data-theme="light"] #metal-analytics-dialog .quality-excel-button, html[data-theme="light"] #metal-analytics-dialog .quality-reference-button { border-color: rgba(2, 132, 199, .5); background: rgba(14, 165, 233, .1); color: #075985; }

@media (prefers-reduced-transparency: reduce) {

#metal-analytics-dialog .quality-card { -webkit-backdrop-filter: none; backdrop-filter: none; background: #0d1829; }

html[data-theme="light"] #metal-analytics-dialog .quality-card { background: #f9fbfd; }

}

/* ── Диаграммы поставщиков (статистика приёмки): спокойный вид в стиле сайта. Только оформление: числа, 3D-форма и выгрузка в Excel не затронуты. ── */
.supplier-chart-field::before { background: repeating-linear-gradient(to top, rgba(96, 132, 158, .09) 0 1px, transparent 1px 44px); border-bottom: 1px solid rgba(148, 180, 205, .7); }

.supplier-chart-total { margin-bottom: 10px; }

.supplier-chart-total span { font-size: 9.5px; opacity: .75; }

.supplier-chart-total strong { font-size: 16px; font-weight: 800; letter-spacing: .01em; }

.supplier-chart-stack { border-color: rgba(148, 163, 184, .38); border-radius: 3px 3px 1px 1px; background: rgba(24, 40, 58, .9); box-shadow: none; }

.supplier-chart-defect { background: linear-gradient(180deg, rgba(252, 96, 120, .86), rgba(222, 62, 90, .78)); }

.supplier-chart-accepted { background: linear-gradient(180deg, rgba(56, 216, 158, .84), rgba(24, 158, 112, .76)); }

.supplier-chart-accepted { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16); }

.supplier-chart-top { border-color: rgba(148, 163, 184, .38); }

.supplier-chart-top.is-defect { background: rgba(255, 150, 168, .9); }

.supplier-chart-top.is-accepted { background: rgba(120, 235, 190, .88); }

.supplier-chart-side { border-color: rgba(148, 163, 184, .3); }

.supplier-chart-side-defect { background: #6a2032; }

.supplier-chart-side-accepted { background: #0a4a37; }

.supplier-chart-segment > span { color: #f1f5f9; font-size: 12.5px; font-weight: 800; text-shadow: 0 1px 2px rgba(0, 0, 0, .55); }

.supplier-chart-prism::after { content: ""; position: absolute; z-index: 0; left: -2px; right: -8px; bottom: -6px; height: 7px; pointer-events: none; background: radial-gradient(closest-side, rgba(0, 0, 0, .42), transparent); }

.supplier-chart-values { font-size: 11px; font-weight: 650; opacity: .88; }

.supplier-chart-card h4 { font-size: 12.5px; font-weight: 700; }

.supplier-chart-prism { animation: supplierChartGrow .6s cubic-bezier(.2, .8, .2, 1) both; }

.supplier-chart-stack, .supplier-chart-top { transition: border-color .2s ease, box-shadow .2s ease; }

.supplier-chart-card:hover .supplier-chart-stack { border-color: rgba(203, 213, 225, .75); box-shadow: 0 0 14px rgba(148, 163, 184, .22); }

.supplier-chart-card:hover .supplier-chart-top { border-color: rgba(203, 213, 225, .75); }

@media (prefers-reduced-motion: reduce) {

.supplier-chart-prism { animation: none; }

}

html[data-theme="light"] .supplier-chart-field::before { background: repeating-linear-gradient(to top, rgba(81, 113, 136, .08) 0 1px, transparent 1px 44px); border-bottom-color: rgba(81, 113, 136, .55); }

html[data-theme="light"] .supplier-chart-stack { border-color: rgba(81, 113, 136, .4); background: #e3ecf2; }

html[data-theme="light"] .supplier-chart-defect { background: linear-gradient(180deg, rgba(228, 62, 88, .6), rgba(200, 40, 68, .5)); }

html[data-theme="light"] .supplier-chart-accepted { background: linear-gradient(180deg, rgba(24, 170, 118, .56), rgba(16, 140, 96, .46)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }

html[data-theme="light"] .supplier-chart-top { border-color: rgba(81, 113, 136, .4); }

html[data-theme="light"] .supplier-chart-top.is-defect { background: rgba(240, 110, 130, .8); }

html[data-theme="light"] .supplier-chart-top.is-accepted { background: rgba(70, 200, 150, .8); }

html[data-theme="light"] .supplier-chart-side-defect { background: #b3374f; }

html[data-theme="light"] .supplier-chart-side-accepted { background: #167a58; }

html[data-theme="light"] .supplier-chart-segment > span { color: #0f2233; text-shadow: none; }

html[data-theme="light"] .supplier-chart-prism::after { background: radial-gradient(closest-side, rgba(30, 64, 92, .22), transparent); }