@import url("../ui-kit/core/km-ui.css");

/* Здесь остаются только правила runtime-областей Viewer, отсутствующих в UI Kit. */
body {
  height: 100dvh;
  display: grid;
  grid-template-rows: 60px minmax(0, 1fr) 6px var(--viewer-bottom, 112px);
  overflow: hidden;
}
.brand { white-space: nowrap; }
.brand strong { font-size: 18px; }
.km-viewer-header { display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; }
/* До миграции оболочки toolbar не должен переноситься поверх сцены. */
.km-viewer-header .km-toolbar { border: 0; padding: 0; min-width: 0; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; }
.km-viewer-header .km-toolbar > * { flex-shrink: 0; }
.mobile-panels { border: 0; }
.mobile-more-toggle, .mobile-more-sheet, .mobile-more-backdrop { display: none; }
.panel { border-block: 0; overflow: hidden; }
.explorer { border-left: 0; }
.properties { border-right: 0; }
.km-panel__header h1, .km-panel__header h2 { margin: 0; font: inherit; }
.search { display: grid; width: 100%; gap: var(--km-space-1); }
.filters { justify-content: flex-start; flex-wrap: wrap; }
.viewport canvas { width: 100%; height: 100%; display: block; }
.view-tools { position: absolute; top: var(--km-space-3); left: var(--km-space-3); }
#viewport-hint { position: absolute; bottom: var(--km-space-2); left: var(--km-space-4); color: var(--km-color-muted); }
.technical-panel { background: var(--km-color-paper); overflow: hidden; }
.technical-panel__header { display: flex; gap: var(--km-space-2); padding: var(--km-space-1) var(--km-space-3); border-bottom: var(--km-border-default); }
.technical-panel__content { height: calc(100% - 39px); overflow: auto; padding: var(--km-space-2) var(--km-space-4); }
.technical-panel dl { display: grid; grid-template-columns: repeat(8, minmax(90px, auto)); gap: 2px var(--km-space-3); margin: 0; }
.technical-panel dt { color: var(--km-color-muted); }
.technical-panel dd { margin: 0; font-variant-numeric: tabular-nums; }
.technical-panel ol { margin: var(--km-space-2) 0; padding-left: var(--km-space-5); }
.technical-panel .error { color: var(--km-color-error); }
.technical-panel .warning { color: #755600; }
.splitter { z-index: 5; background: var(--km-color-soft); touch-action: none; }
.splitter:hover, .splitter:focus-visible { background: var(--km-color-focus); }
.splitter--column { cursor: col-resize; }
.splitter--row { cursor: row-resize; }
#properties-form fieldset { border: 0; margin: 0 0 var(--km-space-4); padding: 0; }
#properties-form legend { width: 100%; padding: var(--km-space-2) 0; border-bottom: var(--km-border-default); font: 700 11px var(--km-font-mono); text-transform: uppercase; }
#properties-form label { display: grid; grid-template-columns: minmax(90px, .8fr) minmax(0, 1.2fr); gap: var(--km-space-3); padding: var(--km-space-2) 0; border-bottom: 1px solid #aaa69d; color: var(--km-color-muted); }
#properties-form output { color: var(--km-color-ink); overflow-wrap: anywhere; font-family: var(--km-font-mono); }
#properties-form input { min-width: 0; width: 100%; font-family: var(--km-font-mono); }
#properties-form .property-actions { display: flex; grid-column: 2; gap: var(--km-space-2); }
#properties-form .edit-status { color: var(--km-color-muted); grid-column: 1 / -1; }
.form-error { color: var(--km-color-error); }
dialog form, dialog label { display: grid; gap: var(--km-space-3); }
.ids-modal { width: min(1200px, calc(100vw - 32px)); max-width: none; }
.ids-inputs { display: grid; grid-template-columns: 1fr 1fr auto; gap: var(--km-space-3); align-items: end; }
.ids-filters { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: var(--km-space-2); }
.ids-filters select:nth-of-type(n+4) { grid-column: span 1; }
.ids-table-wrap { max-height: 52vh; overflow: auto; border: var(--km-border-default); }
.ids-pagination { display: flex; align-items: center; justify-content: flex-end; gap: var(--km-space-2); }
.ids-evidence { margin-top: var(--km-space-2); color: var(--km-color-muted); }
.ids-evidence dl { display: grid; grid-template-columns: minmax(96px, .7fr) minmax(0, 1.3fr); gap: var(--km-space-1) var(--km-space-2); margin: var(--km-space-1) 0 0; }
.ids-evidence dt { font-family: var(--km-font-mono); }
.ids-evidence dd { margin: 0; color: var(--km-color-ink); font-family: var(--km-font-mono); overflow-wrap: anywhere; }
.ids-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.ids-table th, .ids-table td { padding: var(--km-space-2); border-bottom: var(--km-border-default); text-align: left; vertical-align: top; }
.ids-table th { position: sticky; top: 0; background: var(--km-color-soft); z-index: 1; }
.ids-status { font-family: var(--km-font-mono); font-weight: 700; }
.ids-status--pass { color: #176b2c; }
.ids-status--fail, .ids-status--error { color: var(--km-color-error); }
.ids-status--undefined { color: #755600; }
.ids-status--not_applicable { color: var(--km-color-muted); }
.ids-remediation-action { margin-top: var(--km-space-2); }
.ids-remediation-status { border: var(--km-border-default); }
.ids-remediation-status[data-state="resolved"] { color: #176b2c; border-color: #176b2c; }
.ids-remediation-status[data-state="remaining"], .ids-remediation-status[data-state="error"] { color: var(--km-color-error); border-color: var(--km-color-error); }
.remediation-details { display: grid; grid-template-columns: minmax(100px, auto) minmax(0, 1fr); gap: var(--km-space-2) var(--km-space-3); margin: 0; }
.remediation-details dt { color: var(--km-color-muted); }
.remediation-details dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 1023px) { .km-viewer-header { grid-template-columns: auto minmax(0, 1fr); } #status { display: none; } }
@media (max-width: 767px) {
  html { width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; }
  body {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
    overscroll-behavior: none;
  }
  .km-viewer-header {
    display: flex;
    min-height: calc(56px + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) max(10px, env(safe-area-inset-right)) 0 max(10px, env(safe-area-inset-left));
    overflow: visible;
    align-items: center;
  }
  .brand, #status { display: none; }
  .km-viewer-header > .toolbar { width: 100%; display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; gap: 10px; }
  .km-viewer-header > .toolbar > label[class~="km-button"] { min-width: 132px; min-height: 46px; display: inline-flex; align-items: center; justify-content: center; }
  .mobile-more-toggle { display: inline-flex; min-width: 76px; min-height: 46px; align-items: center; justify-content: center; }
  .km-viewer-workspace { min-width: 0; min-height: 0; }
  .viewport { min-width: 0; min-height: 0; overflow: hidden; touch-action: none; }
  .viewport canvas { width: 100% !important; height: 100% !important; touch-action: none; }
  .view-tools {
    inset: auto max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) auto;
    max-width: calc(100vw - 20px - env(safe-area-inset-left) - env(safe-area-inset-right));
    padding: 6px;
    gap: 6px;
    flex-wrap: nowrap;
    overflow: visible;
    border: var(--km-border-default);
    background: var(--km-color-paper);
    box-shadow: 0 8px 28px rgb(0 0 0 / .18);
    z-index: 12;
  }
  .view-tools { width: min(360px, calc(100vw - 20px - env(safe-area-inset-left) - env(safe-area-inset-right))); }
  .view-tools #fit, .view-tools #projection, .view-tools #standard-view {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    height: 48px;
    padding-inline: 8px;
    border: var(--km-border-default);
    border-radius: 0;
    background: var(--km-color-white);
    font: inherit;
    text-transform: none;
  }
  .view-tools #fit { display: inline-flex; align-items: center; justify-content: flex-start; }
  .view-tools #fit span { font: inherit; }
  #viewport-hint {
    left: max(10px, env(safe-area-inset-left));
    right: max(10px, env(safe-area-inset-right));
    bottom: calc(72px + env(safe-area-inset-bottom));
    margin: 0;
    padding: 6px 9px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    background: rgb(255 255 255 / .9);
    border: var(--km-border-default);
    pointer-events: none;
  }
  .splitter { display: none; }
  .mobile-more-backdrop {
    position: fixed;
    inset: 0;
    z-index: 80;
    border: 0;
    background: rgb(0 0 0 / .34);
  }
  body.mobile-more-open .mobile-more-backdrop { display: block; }
  .mobile-more-sheet {
    display: block;
    position: fixed;
    left: 8px;
    right: 8px;
    bottom: max(8px, env(safe-area-inset-bottom));
    z-index: 81;
    max-height: min(72dvh, 620px);
    padding: 0 14px calc(12px + env(safe-area-inset-bottom));
    overflow: auto;
    border: var(--km-border-default);
    background: var(--km-color-paper);
    box-shadow: 0 14px 44px rgb(0 0 0 / .28);
    transform: translateY(calc(100% + 24px));
    visibility: hidden;
    transition: transform 160ms ease, visibility 0s linear 160ms;
  }
  body.mobile-more-open .mobile-more-sheet { transform: translateY(0); visibility: visible; transition-delay: 0s; }
  .mobile-more-sheet__header { position: sticky; top: 0; z-index: 2; display: flex; min-height: 52px; align-items: center; justify-content: space-between; background: var(--km-color-paper); border-bottom: var(--km-border-default); }
  .mobile-more-sheet section { padding: 10px 0; border-bottom: var(--km-border-default); }
  .mobile-more-sheet section:last-child { border-bottom: 0; }
  .mobile-more-sheet h2 { margin: 0 0 8px; font: 700 11px var(--km-font-mono); text-transform: uppercase; color: var(--km-color-muted); }
  .mobile-action-group, .mobile-more-sheet .mobile-panels, .mobile-more-sheet .technical-panel__header { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; border: 0; }
  .mobile-more-sheet [class~="km-button"], .mobile-more-sheet [class~="km-tool-button"], .mobile-more-sheet [class~="km-icon-button"] { min-height: 44px; }
  .mobile-more-sheet .technical-panel { display: block; overflow: visible; }
  .mobile-more-sheet .technical-panel__content { height: auto; max-height: 26dvh; padding: 8px 0; overflow: auto; }
  .mobile-more-sheet .technical-panel dl { grid-template-columns: minmax(90px, auto) minmax(0, 1fr); }
  .mobile-more-sheet .view-setting { display: grid; width: 100%; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px; }
  .ids-inputs, .ids-filters { grid-template-columns: 1fr; }
  .ids-table-wrap { max-height: 60vh; }
}
@media (min-width: 768px) and (max-width: 1023px) { .splitter--column { display: none; } }

/* Длинные GUID и evidence остаются доступны в прокручиваемой таблице. */
.ids-table { min-width: 880px; }
.ids-evidence dt { overflow-wrap: anywhere; }
.ids-filters > * { min-width: 0; }
.ids-modal { max-height: calc(100dvh - 32px); overflow: auto; }
.ids-modal .toolbar { position: sticky; bottom: -24px; padding-block: 8px; background: var(--km-color-paper, #fff); z-index: 3; }
@media (max-width: 767px) {
  .ids-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #ids-search { grid-column: 1 / -1; }
  .ids-filters input, .ids-filters select, .ids-modal button { min-height: 44px; }
  .ids-modal .toolbar { flex-wrap: wrap; position: static; }
  .ids-table-wrap { max-height: 35vh; }
}