/* Карта системы (наряд #177). Токены — из dashboard.css (--db-*), свои компоненты — .kt-*. */

html, body { height: 100%; margin: 0; background: var(--db-bg); color: var(--db-ink); font-family: var(--db-font-sans); }
.kt-wrap { display: flex; flex-direction: column; height: 100vh; height: 100dvh; padding: 0 16px 10px; box-sizing: border-box; }
.kt-header { flex: 0 0 auto; }
.kt-title { font-size: 15px; color: var(--db-dim); }
.kt-title b { color: var(--db-ink); margin-right: 8px; }
.kt-hidden { display: none !important; }

.kt-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 8px 0 10px; font-size: 13px; color: var(--db-dim); }
.kt-back { background: var(--db-panel-solid); color: var(--db-ink); border: 1px solid var(--db-line-strong); border-radius: var(--db-radius-sm);
  padding: 5px 10px; font: inherit; cursor: pointer; }
.kt-crumb { color: var(--db-ink); font-weight: 600; }
.kt-sep { flex: 1 1 auto; }
.kt-f { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }
.kt-f input { margin: 0; }
.kt-f i { display: inline-block; width: 18px; height: 0; border-top: 2px solid currentColor; }
.kt-f--dannye i { color: var(--db-acc-2); }
.kt-f--sledit i { color: var(--db-warn); }
.kt-f--dokladyvaet i { color: var(--db-acc); }
.kt-f--upravlyaet i { color: #c38bff; }
.kt-f--avto i { color: var(--db-dim); border-top-style: dashed; }

.kt-main { position: relative; flex: 1 1 auto; min-height: 0; display: flex; gap: 12px; }
.kt-cy { flex: 1 1 auto; min-width: 0; border: 1px solid var(--db-line); border-radius: var(--db-radius); background: var(--db-bg-2); }
.kt-side { flex: 0 0 360px; overflow-y: auto; border: 1px solid var(--db-line); border-radius: var(--db-radius);
  background: var(--db-panel-solid); padding: 16px 16px 20px; position: relative; font-size: 13.5px; line-height: 1.45; }
.kt-side__x { position: absolute; top: 8px; right: 10px; background: none; border: 0; color: var(--db-dim); font-size: 22px; cursor: pointer; }
.kt-side h2 { margin: 0 24px 4px 0; font: 600 17px/1.3 var(--db-font-disp); }
.kt-side h3 { margin: 16px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--db-dim); font-weight: 600; }
.kt-side p { margin: 4px 0; }
.kt-side .kt-sub { color: var(--db-dim); font-size: 12.5px; }
.kt-side ul { list-style: none; margin: 0; padding: 0; }
.kt-side li { padding: 5px 0; border-bottom: 1px solid var(--db-line); }
.kt-side li:last-child { border-bottom: 0; }
.kt-side .kt-link { color: var(--db-acc-2); cursor: pointer; }
.kt-side .kt-tag { display: inline-block; font-size: 11px; padding: 1px 6px; border-radius: 6px; border: 1px solid var(--db-line-strong); color: var(--db-dim); margin-left: 4px; }
.kt-side .kt-open { margin-top: 10px; width: 100%; background: var(--db-acc); color: #04110d; border: 0; border-radius: var(--db-radius-sm);
  padding: 8px; font: 600 13px var(--db-font-sans); cursor: pointer; }
.kt-side details { margin: 2px 0; }
.kt-side details summary { cursor: pointer; }
.kt-side .kt-mono { font-family: var(--db-font-mono); font-size: 11.5px; color: var(--db-dim); word-break: break-all; }

.kt-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: 0; }
.kt-dot--зелёный { background: var(--db-ok); }
.kt-dot--янтарь { background: var(--db-warn); }
.kt-dot--красный { background: var(--db-bad); }
.kt-dot--серый { background: var(--db-gray); }

.kt-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; padding-top: 8px; font-size: 12px; color: var(--db-dim); }
.kt-legend__hint { flex: 1 1 100%; color: var(--db-mute); }

@media (max-width: 820px) {
  .kt-wrap { padding: 0 8px 8px; }
  .kt-main { flex-direction: column; }
  .kt-side { position: absolute; left: 0; right: 0; bottom: 0; max-height: 58%; flex: none; z-index: 5;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, .45); }
  .kt-legend__hint { display: none; }
}