/* Seenaptec StyleKit (derived from Figma screenshots in Docs/UI-UX design/)
 *
 * Goal: apply corporate look without changing UI logic.
 * This file overrides tokens + component visuals used by app.css.
 */

/* ---- Fonts (offline vendored) ---- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./vendor/fonts/inter/Inter-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./vendor/fonts/inter/Inter-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("./vendor/fonts/inter/Inter-SemiBold.woff2") format("woff2");
}

/* ---- Design tokens ---- */
:root {
  /* Typography */
  --skd-font-ui: "Inter", system-ui, -apple-system, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, "Noto Sans", Ubuntu,
    Cantarell, Arial, sans-serif;

  /* Radii + shadow (Seenaptec cards are softer/larger) */
  --skd-radius: 16px;
  --skd-radius-sm: 12px;
  --skd-shadow: 0 12px 28px rgba(11, 34, 64, 0.10);

  /* Core palette (from Typography/Color sheet) */
  --sn-text: #0B2240;
  --sn-muted: #788595;
  --sn-surface: #FFFFFF; /* Container */
  /* NOTE: In the provided palette screenshot Button 4 and Stroke show the same hex.
   * In UI (borders/dividers) Stroke must be slightly more visible than Button 4 fill,
   * so we keep them as distinct tokens. */
  --sn-stroke: #E6ECF5;  /* Stroke (slightly darker than Button 4) */
  --sn-fill-2: #EAEDFA;  /* Button 3 */
  --sn-fill-3: #F7F9FF;  /* Button 4 */
  --sn-dark: #1E1E1E;    /* Button 2 */
  --sn-ok: #139111;      /* Accent */
  --sn-danger: #D61C1C;  /* Accent 2 */
  --sn-warn: #E0A800;    /* Accent 3 (firmware flash / caution) */
  --sn-warn-hover: #C69500;

  /* Background (Linear) — computed from the palette example */
  --sn-background-1: #EAF3FF;
  --sn-background-2: #D7ECFF;

  /* Aliases matching Figma naming (Color sheet) */
  --sn-button-2: #1E1E1E;
  --sn-button-3: #EAEDFA;
  --sn-button-4: #F7F9FF;
  --sn-container: #FFFFFF;
  --sn-not-active: #788595;

  /* Button (Linear) — computed from the palette example */
  --sn-button-1: #2F47E0;
  --sn-button-1b: #1B2E9B;
  --sn-button: linear-gradient(135deg, var(--sn-button-1) 0%, var(--sn-button-1b) 100%);
  --sn-button-hover: linear-gradient(135deg, #3A57FF 0%, #2439B5 100%);

  /* Background (Linear) */
  --sn-bg: linear-gradient(135deg, var(--sn-background-1) 0%, var(--sn-background-2) 100%);

  /* Map app tokens */
  --skd-bg: var(--sn-bg);
  --skd-panel-bg: var(--sn-surface);
  --skd-border: var(--sn-stroke);
  --skd-text: var(--sn-text);
  --skd-muted: var(--sn-muted);

  --skd-accent: var(--sn-button-1);
  --skd-accent-hover: #2439B5;
  --skd-accent-soft-06: rgba(47, 71, 224, 0.06);
  --skd-accent-soft-08: rgba(47, 71, 224, 0.08);
  --skd-accent-soft-10: rgba(47, 71, 224, 0.10);
  --skd-accent-border-35: rgba(47, 71, 224, 0.35);

  /* Bootstrap mappings */
  --bs-primary: var(--sn-button-1);
  --bs-primary-rgb: 47, 71, 224;
  --bs-link-color: var(--sn-button-1);
  --bs-link-hover-color: #2439B5;
  --bs-focus-ring-color: rgba(47, 71, 224, 0.22);
}

/* ---- Global background ---- */
body.skd-body {
  background: var(--skd-bg);
}

/* ---- Top bar ---- */
.skd-topbar {
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* Seenaptec menubar (like reference screenshot) */
.sn-menubar {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border-radius: 999px;
  background: var(--sn-fill-3);
  box-shadow: 0 12px 22px rgba(11, 34, 64, 0.08);
}

.sn-tabs {
  flex: 1 1 auto;
  display: flex;
  gap: 6px;
  min-width: 0;
}

.sn-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  color: var(--sn-text);
  text-decoration: none;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: transparent;
}
.sn-tab.active {
  color: #ffffff;
  background: var(--sn-button);
}

.sn-logo-tab {
  flex: 0 0 auto;
  padding: 0 10px;
  /* Match menubar pill height: tab(44) + padding(6*2) = 56 */
  width: auto;
  height: 44px; /* keep tab baseline height; badge will extend into menubar padding */
  justify-content: center;
}
/* First menu item: circular dark badge with white curve icon */
.sn-logo-badge {
  width: auto;
  height: 56px;
  /* Extend into menubar padding so the circle is inscribed */
  margin-top: -6px;
  margin-bottom: -6px;
  border-radius: 999px;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  padding: 0 6px;
}
.sn-logo-icon {
  width: auto;
  height: 28px;
  display: block;
}

.sn-time {
  flex: 0 0 auto;
  min-width: 180px;
  text-align: right;
  padding-right: 10px; /* extra offset from right edge */
  font-weight: 400;
  color: var(--sn-text);
  font-variant-numeric: tabular-nums;
}

/* Sidebar mode: stack tabs vertically */
@media (max-width: 1080px) {
  .sn-menubar {
    flex-direction: column;
    align-items: stretch;
    border-radius: var(--skd-radius);
  }
  .sn-tabs {
    flex-direction: column;
  }
  .sn-tab,
  .sn-time {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
  .sn-logo-tab {
    justify-content: center;
  }
}

/* Narrow width behavior: hide menubar and use panel menu popup */
@media (max-width: 1080px) {
  /* Cancel app.css sidebar layout */
  .skd-app {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    height: 100vh !important;
  }
  .skd-topbar {
    display: none !important;
  }
}

/* ---- Panels/cards ---- */
.skd-panel,
.skd-card,
.skd-closed-stack {
  border: 1px solid var(--sn-stroke);
  box-shadow: var(--skd-shadow);
}

/* Ensure card keeps rounded top corners with header background */
.skd-card {
  overflow: hidden;
}
.skd-card.skd-card-permission {
  overflow: visible;
}
.skd-card.skd-card-permission .skd-card-body {
  overflow-x: visible;
  overflow-y: auto;
}
/* Narrow viewports (~1024px): the right detail card must degrade to
   horizontal scroll instead of clipping content under overflow:hidden. */
@media (max-width: 1080px) {
  .skd-detail-card .skd-card-body,
  .skd-card.skd-card-permission .skd-card-body {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ---- Tool panel overlay ----
 * Common tool-panel contract:
 * - Typography: Inter UI, regular-weight field labels, --sn-text for primary text,
 *   --sn-not-active for helper/secondary text, 12px compact metadata.
 * - Rows: compact 30px controls, 28px inline buttons, 5-8px table padding,
 *   centered vertical alignment and quiet separators.
 * - Section cards: white/fill-3 surfaces, var(--sn-stroke) borders,
 *   var(--skd-radius-sm) corners, subtle active border/fill only when meaningful.
 * - Controls: native inputs/selects/textarea share rounded Seenaptec shape,
 *   light fill, quiet hover, blue focus ring, muted disabled/read-only state.
 * - Selects: keep the accepted compact native select layer with a custom chevron;
 *   no custom popover/select logic in JS.
 * Keep these rules scoped to .skd-tool-panel / .skd-bulk-ops-overlay-panel so
 * cards, journals, and global Bootstrap controls are not restyled accidentally.
 */
.skd-right-workspace {
  position: relative;
  min-width: 0;
}
.skd-right-workspace > .skd-card {
  flex: 1 1 auto;
  min-height: 0;
}
.skd-right-confirm-layer {
  position: absolute;
  inset: var(--skd-pad);
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  border-radius: var(--skd-radius);
  background: rgba(11, 34, 64, 0.18);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.skd-right-confirm-card {
  width: min(440px, calc(100% - 32px));
  max-width: calc(100% - 32px);
  padding: 18px;
  border: 1px solid rgba(230, 236, 245, 0.92);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 42px rgba(11, 34, 64, 0.20);
  color: var(--sn-text);
}
.skd-right-confirm-head {
  display: flex;
  align-items: center;
  gap: 9px;
}
.skd-right-confirm-marker {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-radius: 999px;
  background: var(--sn-button-1);
  box-shadow: 0 0 0 4px rgba(47, 71, 224, 0.10);
}
.skd-right-confirm-warning .skd-right-confirm-marker {
  background: var(--sn-warn);
  box-shadow: 0 0 0 4px rgba(224, 168, 0, 0.14);
}
.skd-right-confirm-danger .skd-right-confirm-marker {
  background: var(--sn-danger);
  box-shadow: 0 0 0 4px rgba(214, 28, 28, 0.12);
}
.skd-right-confirm-title {
  min-width: 0;
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  color: var(--sn-text);
}
.skd-right-confirm-message {
  margin-top: 10px;
  white-space: pre-line;
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
  color: var(--sn-not-active);
}
.skd-right-confirm-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
}
.skd-right-confirm-btn.btn.btn-sm {
  min-height: 36px;
  height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  font-size: 13px;
  line-height: 36px;
  font-weight: 600;
}
.skd-right-confirm-cancel.btn.btn-sm {
  border-color: transparent;
  background: var(--sn-fill-2);
  color: var(--sn-text);
}
.skd-right-confirm-cancel.btn.btn-sm:hover,
.skd-right-confirm-cancel.btn.btn-sm:focus {
  border-color: transparent;
  background: #dfe5f6;
  color: var(--sn-text);
}
.skd-tool-panel-layer {
  position: absolute;
  inset: var(--skd-pad) var(--skd-pad) var(--skd-pad) var(--skd-pad);
  z-index: 40;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.skd-tool-panel-layer.is-open {
  animation: skdToolPanelLayerFadeIn 373ms linear both;
}
.skd-tool-panel-layer.is-open::before,
.skd-tool-panel-layer.is-closing::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--skd-radius);
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(3px);
  pointer-events: none;
}
.skd-tool-panel-layer.is-open::before {
  animation: skdToolPanelBackdropIn 373ms linear both;
}
.skd-tool-panel-layer.is-closing::before {
  animation: skdToolPanelBackdropOut 160ms linear both;
}
.skd-tool-panel-layer.is-closing {
  animation: skdToolPanelLayerFadeOut 373ms linear both;
}
.skd-tool-panel-layer.is-closed {
  inset: auto var(--skd-pad) var(--skd-pad) var(--skd-pad);
}
.skd-tool-panel-handle {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 3;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  border: 1px solid rgba(230, 236, 245, 1);
  border-radius: 999px;
  background: var(--sn-fill-3);
  color: var(--sn-text);
  box-shadow: 0 10px 18px rgba(11, 34, 64, 0.10);
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.skd-tool-panel-handle:hover {
  background: var(--sn-fill-2);
}
.skd-tool-panel-handle-mark {
  font-size: 28px;
  line-height: 1;
}
.skd-tool-panel-handle-title {
  display: none;
  font-size: 12px;
  line-height: 14px;
  font-weight: 500;
  white-space: nowrap;
}
.skd-tool-panel {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  border: 1px solid rgba(8, 24, 48, 0.92);
  border-radius: var(--skd-radius);
  background: rgba(255, 255, 255, 0.96);
  box-shadow:
    0 0 0 1px rgba(8, 24, 48, 0.92),
    0 0 0 1px rgba(255, 255, 255, 0.55) inset,
    0 -18px 34px rgba(11, 34, 64, 0.18);
  backdrop-filter: blur(10px);
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin-bottom: 48px;
  transform-origin: bottom center;
}
.skd-tool-panel-layer.is-open .skd-tool-panel {
  animation: skdToolPanelSlideUp 413ms linear both;
}
.skd-tool-panel-layer.is-closing .skd-tool-panel {
  animation: skdToolPanelSlideDown 393ms linear both;
}
.skd-tool-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  border-bottom: 1px solid var(--sn-stroke);
  background: var(--sn-fill-3);
}
.skd-tool-panel-title {
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  color: var(--sn-text);
}
.skd-tool-panel-subtitle {
  margin-top: 3px;
  font-size: 12px;
  line-height: 16px;
  color: var(--sn-not-active);
}
.skd-tool-panel-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 12px;
}
.skd-tool-panel-section {
  padding: 12px;
  border: 1px solid var(--sn-stroke);
  border-radius: var(--skd-radius-sm);
  background: var(--sn-container);
  box-shadow: 0 8px 18px rgba(11, 34, 64, 0.06);
}
.skd-tool-panel-section + .skd-tool-panel-section {
  margin-top: 10px;
}
/* В сетках шаг между секциями задаёт gap грида; поточный margin сдвигает карточки в строке. */
.skd-section-grid > .skd-tool-panel-section + .skd-tool-panel-section {
  margin-top: 0;
}
.skd-tool-panel-section-title {
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  color: var(--sn-not-active);
}
.skd-tool-panel-section-text {
  margin-top: 5px;
  font-size: 12px;
  line-height: 16px;
  color: var(--sn-not-active);
}
.skd-tool-panel-section-body {
  margin-top: 10px;
}
.skd-tool-panel.skd-tool-panel-bulk {
  border-color: rgba(47, 111, 224, 0.72);
  box-shadow:
    0 0 0 1px rgba(47, 111, 224, 0.58),
    0 0 0 1px rgba(255, 255, 255, 0.65) inset,
    0 -18px 34px rgba(11, 34, 64, 0.18);
}
.skd-tool-panel.skd-tool-panel-bulk .skd-tool-panel-head {
  border-bottom-color: rgba(47, 111, 224, 0.28);
  background: linear-gradient(180deg, rgba(47, 111, 224, 0.09), var(--sn-fill-3));
}
.skd-bulk-ops-layer {
  position: absolute;
  inset: var(--skd-pad) var(--skd-pad) var(--skd-pad) var(--skd-pad);
  z-index: 30;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.skd-bulk-ops-overlay-panel {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-height: none;
  margin-bottom: 48px;
  pointer-events: auto;
  animation: skdToolPanelSlideUp 260ms linear both;
}
.skd-bulk-ops-overlay-body {
  padding: 12px;
}
.skd-bulk-ops-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.skd-bulk-ops-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(47, 111, 224, 0.28);
  border-radius: var(--skd-radius-sm);
  background: rgba(47, 111, 224, 0.045);
}
.skd-bulk-ops-title {
  font-size: 15px;
  line-height: 19px;
  font-weight: 600;
  color: var(--sn-text);
}
.skd-bulk-ops-subtitle {
  margin-top: 3px;
  font-size: 12px;
  line-height: 16px;
  color: var(--sn-not-active);
}
.skd-bulk-ops-badge {
  flex: 0 0 auto;
  padding: 3px 8px;
  border: 1px solid rgba(47, 111, 224, 0.28);
  border-radius: 999px;
  background: rgba(47, 111, 224, 0.08);
  color: #2f6fe0;
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
}
.skd-bulk-ops-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.skd-bulk-ops-section {
  padding: 0;
  border: 1px solid rgba(230, 236, 245, 0.96);
  border-radius: var(--skd-radius-sm);
  background: var(--sn-container);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.74) inset;
  transition: border-color 160ms ease, box-shadow 160ms ease;
  cursor: default;
  overflow: hidden;
}
.skd-bulk-ops-section-active {
  border-color: rgba(47, 111, 224, 0.58);
  box-shadow:
    0 0 0 1px rgba(47, 111, 224, 0.15),
    0 1px 0 rgba(255, 255, 255, 0.78) inset;
}
.skd-bulk-ops-section-passive:hover {
  border-color: rgba(47, 111, 224, 0.30);
}
.skd-bulk-ops-section-head {
  padding: 10px 12px;
  background: var(--sn-button-4);
  background-clip: padding-box;
}
.skd-bulk-ops-section-active .skd-bulk-ops-section-head {
  border-bottom: 1px solid var(--sn-stroke);
}
.skd-bulk-ops-section .skd-tool-panel-section-title {
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  color: var(--sn-not-active);
}
.skd-bulk-ops-section .skd-tool-panel-section-text {
  margin-top: 5px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  color: var(--sn-not-active);
}
.skd-bulk-ops-section .skd-tool-panel-section-body {
  margin-top: 0;
  padding: 10px 12px 12px;
}
.skd-bulk-ops-collapse-toggle {
  width: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--sn-text);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  text-align: left;
}
.skd-bulk-ops-collapse-toggle:disabled {
  color: var(--sn-not-active);
  cursor: not-allowed;
}
.skd-bulk-ops-collapse-toggle.is-disabled {
  color: var(--sn-not-active);
  cursor: default;
}
.skd-bulk-ops-collapse-chevron {
  flex: 0 0 auto;
  color: var(--sn-not-active);
  font-size: 14px;
  line-height: 1;
}
.skd-ao-devices-panel-form {
  margin-top: 10px;
}
.skd-ao-devices-panel-form .skd-modal-card {
  width: 100%;
  border-radius: var(--skd-radius-sm);
  box-shadow: none;
  background: rgba(255, 255, 255, 0.58);
}
.skd-ao-devices-panel-form .skd-modal-body {
  max-height: none;
  overflow: visible;
}
.skd-ao-devices-panel-form .skd-modal-actions {
  position: sticky;
  bottom: 0;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(6px);
}
.skd-bulk-ao-flat {
  min-width: 0;
  overflow-x: hidden;
}
.skd-bulk-ao-controls {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}
.skd-bulk-ao-flat input.form-control,
.skd-bulk-ao-flat select.form-select {
  min-width: 0;
}
.skd-bulk-ao-flat .skd-prop-table {
  width: 100%;
  table-layout: fixed;
}
.skd-bulk-ao-flat .skd-prop-table td {
  min-width: 0;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.skd-bulk-ao-flat .skd-bind-component-title {
  min-width: 0;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.skd-bulk-ao-flat .skd-tool-panel-actions {
  margin-top: 10px;
}
.skd-prodcal-controls {
  display: grid;
  grid-template-columns: minmax(90px, 0.55fr) minmax(120px, 0.75fr) minmax(110px, 0.7fr) auto;
  gap: 8px;
  align-items: end;
  margin-bottom: 10px;
}
.skd-prodcal-status {
  min-height: 31px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  border: 1px solid var(--sn-stroke);
  border-radius: var(--skd-radius-sm);
  background: var(--sn-fill-3);
  color: var(--sn-text);
  font-size: 12px;
}
.skd-prodcal-load-cell {
  display: flex;
  align-items: end;
  justify-content: flex-end;
}
.skd-prodcal-choice {
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid rgba(224, 168, 0, 0.35);
  border-radius: var(--skd-radius-sm);
  background: rgba(255, 248, 232, 0.86);
}
.skd-prodcal-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}
.skd-prodcal-summary > div {
  padding: 8px 10px;
  border: 1px solid var(--sn-stroke);
  border-radius: 10px;
  background: var(--sn-fill-3);
}
.skd-prodcal-summary span,
.skd-prodcal-summary strong {
  display: block;
}
.skd-prodcal-summary span {
  color: var(--sn-not-active);
  font-size: 11px;
  line-height: 14px;
}
.skd-prodcal-summary strong {
  margin-top: 2px;
  color: var(--sn-text);
  font-size: 15px;
  line-height: 18px;
}
.skd-prodcal-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.skd-prodcal-month {
  padding: 10px;
  border: 1px solid var(--sn-stroke);
  border-radius: var(--skd-radius-sm);
  background: var(--sn-button-4);
}
.skd-prodcal-month-title {
  margin-bottom: 7px;
  color: var(--sn-text);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
}
.skd-prodcal-weekdays,
.skd-prodcal-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}
.skd-prodcal-weekdays {
  margin-bottom: 4px;
}
.skd-prodcal-weekdays span {
  color: var(--sn-not-active);
  font-size: 10px;
  line-height: 12px;
  text-align: center;
}
.skd-prodcal-day {
  width: 100%;
  height: 24px;
  padding: 0;
  border: 1px solid var(--sn-stroke);
  border-radius: 7px;
  background: #ffffff;
  color: var(--sn-text);
  font-size: 11px;
  line-height: 22px;
  text-align: center;
}
.skd-prodcal-day:disabled {
  opacity: 0.6;
}
.skd-prodcal-weekend {
  background: #eef2f8;
}
.skd-prodcal-holiday {
  border-color: rgba(220, 53, 69, 0.28);
  background: #fff0f2;
}
.skd-prodcal-short {
  border-color: rgba(224, 168, 0, 0.36);
  background: #fff8df;
}
.skd-prodcal-day.is-manual {
  box-shadow: inset 0 0 0 2px rgba(47, 71, 224, 0.28);
}
.skd-prodcal-popover {
  position: absolute;
  left: 50%;
  top: calc(100% + 5px);
  z-index: 70;
  min-width: 142px;
  transform: translateX(-50%);
  padding: 6px;
  border: 1px solid rgba(8, 24, 48, 0.18);
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(11, 34, 64, 0.18);
}
.skd-prodcal-popover button {
  width: 100%;
  border: 0;
  border-radius: 7px;
  padding: 5px 7px;
  background: transparent;
  color: var(--sn-text);
  font-size: 12px;
  line-height: 15px;
  text-align: left;
}
.skd-prodcal-popover button:hover,
.skd-prodcal-popover button.active {
  background: rgba(47, 71, 224, 0.08);
}
@media (max-width: 1180px) {
  .skd-prodcal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .skd-prodcal-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 820px) {
  .skd-prodcal-controls,
  .skd-prodcal-grid,
  .skd-prodcal-summary {
    grid-template-columns: 1fr;
  }
}
.skd-bulk-ao-flat .skd-bulk-binding-template-save-btn.btn.btn-sm {
  min-height: 28px;
  height: 28px;
  padding: 0 9px;
  font-size: 12px;
  line-height: 28px;
  vertical-align: middle;
}
@media (max-width: 820px) {
  .skd-bulk-ao-controls {
    grid-template-columns: 1fr;
  }
}
.skd-bulk-ops-empty {
  padding: 18px 12px;
  border: 1px dashed rgba(47, 111, 224, 0.38);
  border-radius: var(--skd-radius-sm);
  background: rgba(47, 111, 224, 0.035);
  color: var(--sn-not-active);
  font-size: 13px;
  line-height: 18px;
  text-align: center;
}
.skd-bulk-ops-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.skd-bulk-ops-stat-grid > div {
  padding: 8px 10px;
  border: 1px solid var(--sn-stroke);
  border-radius: 10px;
  background: var(--sn-fill-3);
}
.skd-bulk-ops-stat-grid span,
.skd-bulk-ops-stat-grid strong {
  display: block;
}
.skd-bulk-ops-stat-grid span {
  color: var(--sn-not-active);
  font-size: 12px;
  line-height: 16px;
}
.skd-bulk-ops-stat-grid strong {
  margin-top: 2px;
  color: var(--sn-text);
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
}
.skd-tool-panel-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  line-height: 16px;
}
.skd-tool-panel-table th {
  padding: 6px;
  color: var(--sn-not-active);
  font-weight: 600;
  border-bottom: 1px solid var(--sn-stroke);
  text-align: left;
}
.skd-tool-panel-table td {
  padding: 7px 6px;
  border-top: 1px solid var(--sn-stroke);
  vertical-align: top;
}
.skd-tool-panel-table td:first-child {
  width: 34%;
}
.skd-tool-panel-table td:nth-child(2) {
  width: 33%;
}
.skd-tool-panel-table td:last-child {
  width: 33%;
}
.skd-tool-field-row {
  display: grid;
  grid-template-columns: minmax(120px, 0.38fr) 1fr;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.skd-tool-field-row label {
  margin: 0;
  color: var(--sn-text);
  font-size: 12px;
  line-height: 16px;
}
.skd-tool-field-row .skd-tool-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--sn-text);
}
.skd-tool-field-row .skd-tool-check input {
  margin: 0;
}
.skd-scbk-preview {
  margin-top: 6px;
  padding: 7px 9px;
  border: 1px solid rgba(230, 236, 245, 0.96);
  border-radius: 10px;
  background: var(--sn-fill-3);
}
.skd-scbk-preview-value {
  color: var(--sn-text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
}
.skd-scbk-preview-zero {
  color: rgba(120, 133, 149, 0.56);
}
.skd-scbk-preview-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 5px;
  color: var(--sn-not-active);
  font-size: 11px;
  line-height: 14px;
}
.skd-bulk-template-group {
  padding: 9px 10px;
  border: 1px solid var(--sn-stroke);
  border-radius: 12px;
  background: var(--sn-fill-3);
}
.skd-bulk-template-group + .skd-bulk-template-group {
  margin-top: 8px;
}
.skd-bulk-template-group-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 7px;
}
.skd-bulk-template-group-title {
  color: var(--sn-not-active);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
}
.skd-bulk-template-group .small.text-muted,
.skd-bulk-ops-panel .small.text-muted {
  color: var(--sn-not-active) !important;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
}
.skd-bulk-ops-panel .skd-prop-table {
  color: var(--sn-text);
  font-size: 12px;
  line-height: 16px;
}
.skd-bulk-ops-panel .skd-prop-table th,
.skd-bulk-ops-panel .skd-prop-table td {
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
}
.skd-bulk-ops-panel .skd-prop-table tbody td:first-child {
  color: var(--sn-text);
  font-weight: 400;
}
.skd-bulk-ops-panel .skd-prop-table tbody td.text-muted,
.skd-bulk-ops-panel .skd-prop-table tbody td:nth-child(2) {
  color: var(--sn-not-active) !important;
  font-weight: 400;
}
.skd-bulk-ops-panel .skd-prop-table tbody td:nth-child(3) {
  color: var(--sn-text);
  font-weight: 400;
}
.skd-bulk-ops-panel .skd-bulk-connection-table tbody td {
  height: 40px;
  padding: 5px 8px;
}
.skd-eq-state-with-bulk-result {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}
.skd-eq-bulk-result-badge {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 1px 7px;
  border: 1px solid rgba(120, 133, 149, 0.28);
  border-radius: 999px;
  background: rgba(120, 133, 149, 0.08);
  color: var(--sn-not-active);
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.skd-eq-bulk-result-ready {
  border-color: rgba(47, 111, 224, 0.28);
  background: rgba(47, 111, 224, 0.08);
  color: #2f47e0;
}
.skd-eq-bulk-result-pending {
  border-color: rgba(120, 133, 149, 0.28);
  background: rgba(120, 133, 149, 0.08);
  color: var(--sn-not-active);
}
.skd-eq-bulk-result-applying {
  border-color: rgba(196, 138, 0, 0.32);
  background: rgba(255, 214, 102, 0.24);
  color: #7a5a00;
}
.skd-eq-bulk-result-applied {
  border-color: rgba(19, 145, 17, 0.35);
  background: rgba(19, 145, 17, 0.10);
  color: #137011;
}
.skd-eq-bulk-result-cancelled {
  border-color: rgba(120, 133, 149, 0.30);
  background: rgba(120, 133, 149, 0.10);
  color: var(--sn-not-active);
}
.skd-eq-bulk-result-error {
  border-color: rgba(214, 28, 28, 0.30);
  background: rgba(214, 28, 28, 0.10);
  color: #8f1f1f;
}
.skd-tool-panel-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
  width: 100%;
}
.skd-bulk-ops-overlay-panel .skd-tool-panel-actions .skd-bulk-action-btn.btn.btn-sm {
  min-height: 36px;
  height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  line-height: 36px;
  vertical-align: middle;
}
.skd-tool-panel .skd-eq-table,
.skd-tool-panel .skd-prop-table,
.skd-tool-panel .skd-tool-panel-table {
  width: 100%;
  margin: 0;
  color: var(--sn-text);
  font-size: 12px;
  line-height: 16px;
  border-collapse: collapse;
}
.skd-tool-panel .skd-eq-table thead th,
.skd-tool-panel .skd-prop-table thead th,
.skd-tool-panel .skd-tool-panel-table thead th {
  position: static;
  top: auto;
  padding: 6px 8px;
  border-bottom: 1px solid var(--sn-stroke);
  background: rgba(247, 249, 255, 0.72);
  color: var(--sn-not-active);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  text-align: left;
  vertical-align: middle;
  backdrop-filter: none;
}
.skd-tool-panel .skd-eq-table tbody td,
.skd-tool-panel .skd-prop-table tbody td,
.skd-tool-panel .skd-tool-panel-table tbody td {
  padding: 5px 8px;
  border-top: 1px solid var(--sn-stroke);
  border-bottom-color: transparent;
  color: var(--sn-text);
  font-size: 12px;
  line-height: 16px;
  vertical-align: middle;
}
.skd-tool-panel .skd-eq-table tbody tr::after {
  left: 8px;
  right: 8px;
}
.skd-tool-panel .skd-prop-table tbody td:first-child {
  color: var(--sn-text);
  font-weight: 400;
}
.skd-tool-panel .skd-prop-table tbody td.text-muted,
.skd-tool-panel .skd-prop-table tbody td:nth-child(2),
.skd-tool-panel .skd-tool-panel-table tbody td:nth-child(2) {
  color: var(--sn-not-active) !important;
  font-weight: 400;
}
.skd-tool-panel .skd-prop-table tbody td:nth-child(3),
.skd-tool-panel .skd-tool-panel-table tbody td:nth-child(3) {
  color: var(--sn-text);
  font-weight: 400;
}
.skd-tool-panel .text-muted,
.skd-tool-panel .small.text-muted {
  color: var(--sn-not-active) !important;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
}
.skd-device-diag-panel .skd-device-diag-element-title {
  margin-bottom: 4px;
  color: rgba(0,0,0,.75);
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
}
.skd-tool-panel .form-label,
.skd-tool-panel label {
  color: var(--sn-text);
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
}
.skd-tool-panel input.form-control-sm,
.skd-tool-panel select.form-select-sm,
.skd-tool-panel textarea.form-control-sm {
  min-height: 30px;
  height: 30px;
  padding-top: 4px;
  padding-bottom: 4px;
  color: var(--sn-text);
  font-size: 12px;
  line-height: 16px;
}
.skd-tool-panel textarea.form-control-sm {
  height: auto;
  min-height: 56px;
}
.skd-tool-panel select.form-select-sm {
  padding-right: 30px;
}
.skd-tool-panel input.form-control,
.skd-tool-panel textarea.form-control {
  border: 1px solid var(--sn-stroke);
  background-color: var(--sn-button-4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
  color: var(--sn-text);
  font-weight: 400;
}
.skd-tool-panel input.form-control:hover:not(:disabled):not([readonly]),
.skd-tool-panel textarea.form-control:hover:not(:disabled):not([readonly]) {
  border-color: rgba(47, 71, 224, .32);
  background-color: rgba(255, 255, 255, .82);
}
.skd-tool-panel input.form-control:focus,
.skd-tool-panel textarea.form-control:focus {
  border-color: rgba(47, 71, 224, .45);
  box-shadow: 0 0 0 2px rgba(47, 71, 224, .12), inset 0 1px 0 rgba(255,255,255,.55);
}
.skd-tool-panel input.form-control:disabled,
.skd-tool-panel input.form-control[readonly],
.skd-tool-panel textarea.form-control:disabled,
.skd-tool-panel textarea.form-control[readonly] {
  background-color: rgba(245, 247, 251, .86);
  color: var(--sn-not-active);
  cursor: not-allowed;
  opacity: 1;
}
.skd-tool-panel select.form-select,
.skd-bulk-ops-overlay-panel select.form-select {
  -webkit-appearance: none;
  appearance: none;
  min-height: 30px;
  height: 30px;
  padding: 4px 30px 4px 11px;
  border: 1px solid var(--sn-stroke);
  border-radius: 999px;
  background-color: var(--sn-button-4);
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' fill='none' stroke='%23788595' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
  color: var(--sn-text);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
}
.skd-tool-panel select.form-select:hover:not(:disabled),
.skd-bulk-ops-overlay-panel select.form-select:hover:not(:disabled) {
  border-color: rgba(47, 71, 224, .32);
  background-color: rgba(255, 255, 255, .82);
}
.skd-tool-panel select.form-select:focus,
.skd-bulk-ops-overlay-panel select.form-select:focus {
  border-color: rgba(47, 71, 224, .45);
  box-shadow: 0 0 0 2px rgba(47, 71, 224, .12), inset 0 1px 0 rgba(255,255,255,.55);
}
.skd-tool-panel select.form-select:disabled,
.skd-tool-panel select.form-select[aria-readonly="true"],
.skd-bulk-ops-overlay-panel select.form-select:disabled,
.skd-bulk-ops-overlay-panel select.form-select[aria-readonly="true"] {
  background-color: rgba(245, 247, 251, .86);
  color: var(--sn-not-active);
  cursor: not-allowed;
  opacity: 1;
}
.skd-equipment-number-stepper {
  display: inline-flex;
  align-items: stretch;
  width: 100%;
  min-height: 30px;
  height: 30px;
  overflow: hidden;
  border: 1px solid var(--sn-stroke);
  border-radius: 999px;
  background: var(--sn-button-4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
}
.skd-equipment-number-stepper:focus-within {
  border-color: rgba(47, 71, 224, .45);
  box-shadow: 0 0 0 2px rgba(47, 71, 224, .12), inset 0 1px 0 rgba(255,255,255,.55);
}
.skd-equipment-number-stepper.skd-binding-element-stepper {
  width: 108px;
  min-width: 96px;
  flex: 0 0 108px;
}
.skd-equipment-number-stepper-input.form-control {
  min-width: 0;
  height: 28px;
  min-height: 28px;
  flex: 1 1 auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: center;
  padding-left: 4px;
  padding-right: 4px;
}
.skd-equipment-number-stepper-input.form-control:focus {
  border: 0;
  box-shadow: none;
  background: transparent;
}
.skd-equipment-number-stepper-input.form-control.skd-line-tone-info,
.skd-equipment-number-stepper-input.form-control.skd-line-tone-info:focus {
  background-color: rgba(47,71,224,.08) !important;
}
.skd-equipment-number-stepper-input.form-control.skd-line-tone-warning,
.skd-equipment-number-stepper-input.form-control.skd-line-tone-warning:focus {
  background-color: rgba(255, 214, 102, 0.30) !important;
}
.skd-equipment-number-stepper-input.form-control.skd-line-tone-danger,
.skd-equipment-number-stepper-input.form-control.skd-line-tone-danger:focus {
  background-color: rgba(214, 28, 28, 0.11) !important;
}
.skd-equipment-number-stepper-btn {
  flex: 0 0 30px;
  width: 30px;
  min-width: 30px;
  border: 0;
  background: transparent;
  color: var(--sn-text);
  font-size: 15px;
  font-weight: 600;
  line-height: 28px;
  padding: 0;
  cursor: pointer;
}
.skd-equipment-number-stepper-btn:hover:not(:disabled) {
  background: rgba(47, 71, 224, .08);
}
.skd-equipment-number-stepper-btn:focus-visible {
  outline: 2px solid rgba(47, 71, 224, .35);
  outline-offset: -2px;
}
.skd-equipment-number-stepper-btn:disabled,
.skd-equipment-number-stepper.is-disabled {
  color: var(--sn-not-active);
  cursor: not-allowed;
}
.skd-system-tool-panel .skd-backup-keep-input {
  width: 100%;
  padding-right: 2px;
}
.skd-system-tool-panel .skd-backup-keep-input::-webkit-inner-spin-button {
  width: 24px;
  height: 30px;
  margin: -4px -2px -4px 6px;
  opacity: 1;
  cursor: pointer;
}
.skd-system-tool-panel .skd-backup-keep-input::-webkit-outer-spin-button {
  margin: 0;
  opacity: 1;
}
.skd-system-tool-panel .skd-backup-time-input {
  width: 100%;
}
.skd-system-tool-panel .skd-new-value-text-input::placeholder {
  color: var(--sn-text);
  opacity: 1;
}
.skd-tool-panel .skd-eq-table .btn.btn-sm,
.skd-tool-panel .skd-prop-table .btn.btn-sm,
.skd-tool-panel .skd-tool-panel-table .btn.btn-sm,
.skd-tool-panel .skd-tool-field-row .btn.btn-sm {
  min-height: 28px;
  height: 28px;
  padding: 0 9px;
  font-size: 12px;
  line-height: 28px;
  vertical-align: middle;
}
.skd-tool-panel .skd-tool-panel-actions .btn.btn-sm,
.skd-tool-panel .skd-acc-actions .btn.btn-sm,
.skd-inline-secret-actions .btn.btn-sm {
  min-height: 36px;
  height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  line-height: 36px;
  vertical-align: middle;
}
.skd-tool-panel .skd-inline-add-btn.btn.btn-sm.btn-outline-secondary,
.skd-tool-panel .skd-runtime-actions .btn.btn-sm {
  width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  flex: 0 0 28px !important;
  padding: 0 !important;
  line-height: 28px;
  vertical-align: middle;
}
.skd-tool-panel .skd-inline-add-btn .skd-action-icon,
.skd-tool-panel .skd-runtime-actions .skd-action-icon {
  width: 16px !important;
  height: 16px !important;
}
.skd-tool-panel .skd-runtime-actions .skd-action-icon.skd-action-icon-restart {
  width: 34px !important;
  height: 34px !important;
}
.skd-tool-panel .skd-tool-delete-btn,
.skd-tool-panel .skd-firmware-delete-btn {
  width: 22px;
  height: 22px;
  min-height: 22px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--sn-danger);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.skd-tool-panel .skd-tool-delete-btn:hover,
.skd-tool-panel .skd-firmware-delete-btn:hover {
  background: rgba(214, 28, 28, 0.08);
}
.skd-tool-panel .skd-tool-delete-btn:disabled,
.skd-tool-panel .skd-firmware-delete-btn:disabled {
  color: var(--sn-not-active);
  cursor: not-allowed;
}
.skd-filter-clear-btn,
.skd-person-field-search-delete-btn {
  width: 22px;
  min-width: 22px;
  height: 22px;
  min-height: 22px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--sn-danger);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.skd-filter-clear-btn:hover,
.skd-person-field-search-delete-btn:hover {
  color: #b41717;
  background: transparent;
}
.skd-filter-clear-btn:disabled,
.skd-person-field-search-delete-btn:disabled {
  color: var(--sn-not-active);
  opacity: 0.35;
  cursor: not-allowed;
}
.skd-firmware-list-table .skd-firmware-delete-cell {
  width: 30px !important;
  padding-left: 0;
  padding-right: 4px;
  text-align: center;
}
.skd-firmware-list-table .skd-firmware-delete-btn {
  width: 22px;
  height: 22px;
  min-height: 22px;
  font-size: 20px;
}
.skd-tool-panel .skd-secret-panel-body {
  /* Блочный поток, как у section-body ролей: таблица-flex-элемент в WebKit
     сжимается по контенту, поэтому вместо display:flex + gap — блочный
     layout с отступами. */
  display: block;
}
.skd-tool-panel .skd-secret-panel-body > * + * {
  margin-top: 10px;
}
.skd-tool-panel .skd-secret-list-table {
  /* Без table-layout:fixed — как у рабочих таблиц секций (роли и др.).
     С fixed WebKit в живой панели инструментов распределял auto-колонки
     по ширине первого layout-прохода и не перераспределял их при росте
     таблицы: бокс таблицы становился 100%, а сетка колонок оставалась
     узкой (последняя колонка заканчивалась до правого края). */
  width: 100%;
}
.skd-tool-panel .skd-secret-list-table th,
.skd-tool-panel .skd-secret-list-table td {
  height: 30px;
}
.skd-tool-panel .skd-secret-list-table th:first-child,
.skd-tool-panel .skd-secret-list-table td:first-child {
  width: 30px;
  text-align: center;
}
.skd-tool-panel .skd-secret-list-table th:last-child,
.skd-tool-panel .skd-secret-list-table td:last-child {
  width: 48px;
}
.skd-tool-panel .skd-secret-list-table td {
  overflow: hidden;
  text-overflow: ellipsis;
}
.skd-tool-panel .skd-secret-list-table td:nth-child(5) {
  white-space: normal;
}
.skd-tool-panel .skd-secret-row {
  cursor: pointer;
}
.skd-tool-panel .skd-secret-delete-btn {
  font-size: 20px;
  line-height: 1;
}
.skd-tool-panel .skd-secret-detail-card {
  padding: 11px 12px;
  border: 1px solid var(--sn-stroke);
  border-radius: var(--skd-radius-sm);
  background: var(--sn-button-4);
  color: var(--sn-text);
}
.skd-tool-panel .skd-secret-detail-title {
  color: var(--sn-text);
  font-size: 13px;
  line-height: 17px;
  font-weight: 600;
}
.skd-tool-panel .skd-secret-detail-description,
.skd-tool-panel .skd-secret-detail-meta {
  margin-top: 3px;
  color: var(--sn-not-active);
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
}
.skd-tool-panel .skd-secret-detail-table {
  margin-top: 8px;
}
.skd-tool-panel .skd-secret-detail-table td {
  padding: 5px 8px 5px 0;
  border-top: 1px solid var(--sn-stroke);
  font-size: 12px;
  line-height: 16px;
  vertical-align: middle;
}
.skd-tool-panel .skd-secret-detail-table td:first-child {
  width: 25%;
  color: var(--sn-text);
}
.skd-tool-panel .skd-secret-detail-table td:last-child {
  color: var(--sn-not-active);
  overflow-wrap: anywhere;
}
.skd-firmware-upload-drop {
  margin-top: 10px;
  padding: 12px;
  border: 1px dashed rgba(47, 71, 224, 0.30);
  border-radius: var(--skd-radius-sm);
  background: rgba(47, 71, 224, 0.035);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.skd-firmware-upload-drop.is-active {
  border-color: rgba(47, 71, 224, 0.65);
  background: rgba(47, 71, 224, 0.08);
  box-shadow: 0 0 0 2px rgba(47, 71, 224, 0.12);
}
@keyframes skdToolPanelSlideUp {
  from {
    opacity: 0.20;
    transform: translateY(24px) scaleY(0.06);
    clip-path: inset(94% 0 0 0 round var(--skd-radius));
  }
  to {
    opacity: 1;
    transform: translateY(0) scaleY(1);
    clip-path: inset(0 0 0 0 round var(--skd-radius));
  }
}
@keyframes skdToolPanelSlideDown {
  from {
    opacity: 1;
    transform: translateY(0) scaleY(1);
    clip-path: inset(0 0 0 0 round var(--skd-radius));
  }
  to {
    opacity: 0.20;
    transform: translateY(24px) scaleY(0.06);
    clip-path: inset(94% 0 0 0 round var(--skd-radius));
  }
}
@keyframes skdToolPanelLayerFadeIn {
  from {
    background: rgba(240, 247, 255, 0);
  }
  to {
    background: rgba(240, 247, 255, 0.18);
  }
}
@keyframes skdToolPanelLayerFadeOut {
  from {
    background: rgba(240, 247, 255, 0.18);
  }
  to {
    background: rgba(240, 247, 255, 0);
  }
}
@keyframes skdToolPanelBackdropIn {
  from {
    opacity: 0;
    backdrop-filter: blur(0);
  }
  to {
    opacity: 1;
    backdrop-filter: blur(3px);
  }
}
@keyframes skdToolPanelBackdropOut {
  from {
    opacity: 1;
    backdrop-filter: blur(3px);
  }
  to {
    opacity: 0;
    backdrop-filter: blur(0);
  }
}
.skd-auth-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--skd-bg);
}
.skd-auth-card {
  width: min(520px, 100%);
  padding: 22px;
  border-radius: 24px;
  background: var(--sn-fill-3);
  box-shadow: 0 18px 42px rgba(11, 34, 64, 0.12);
  border: 1px solid rgba(223, 227, 232, 0.9);
}
.skd-auth-title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 6px;
}
/* Подсказка после активации (вход по умолчанию admin/123456). */
.skd-auth-hint {
  font-size: 12px;
  line-height: 16px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(224, 168, 0, 0.12);
  border: 1px solid rgba(224, 168, 0, 0.45);
  color: var(--sn-text);
}
/* Предупреждение о просроченной лицензии: блок в login-карточке и баннер
   поверх приложения (мягкий enforcement, rfc-licensing.md §4.4). */
.skd-license-warn {
  font-size: 12px;
  line-height: 16px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(214, 28, 28, 0.08);
  border: 1px solid rgba(214, 28, 28, 0.4);
  color: var(--sn-text);
}
.skd-license-banner {
  position: sticky;
  top: 0;
  z-index: 1200;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(214, 28, 28, 0.1);
  border-bottom: 1px solid rgba(214, 28, 28, 0.4);
  font-size: 12px;
  line-height: 16px;
}
.skd-license-banner input {
  max-width: 300px;
}
/* Grace-вариант баннера лицензии (rfc-licensing.md §11.6): warning, не alarm —
   старый ключ ещё действует, красный диапазон оставлен просрочке. */
.skd-license-banner.skd-license-banner-warning {
  background: rgba(224, 168, 0, 0.12);
  border-bottom-color: rgba(224, 168, 0, 0.5);
}
/* Матрица прав по доменам (RFC rfc-security-tool-rbac.md §11): строка —
   область, переключатель уровня в стиле сегментированных кнопок stylekit. */
.skd-perm-matrix {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px 0 2px;
}
.skd-perm-domain-title {
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  color: var(--sn-text);
  padding: 4px 0 2px;
  border-bottom: 1px solid var(--sn-stroke);
}
.skd-perm-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 0;
}
.skd-perm-row-title {
  flex: 1 1 40%;
  min-width: 160px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  color: var(--sn-text);
}
.skd-perm-levels {
  flex: 0 0 auto;
  display: inline-flex;
  gap: 0;
  border: 1px solid var(--sn-stroke);
  border-radius: 999px;
  overflow: hidden;
  background: var(--sn-button-4);
}
/* Равная ширина сегментов — по самому длинному тексту группы (селекторы
   классов доступа тегов и компонентов ОД в диалоге пропуска). */
.skd-perm-levels--equal {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}
/* Единая ширина сегмента на уровне диалога: syncPassScopePillWidth выставляет
   --skd-scope-seg-min на корне модалки по самой длинной подписи всех групп. */
.skd-perm-levels--equal .skd-perm-level-btn {
  min-width: var(--skd-scope-seg-min, 0px);
}
.skd-perm-level-btn {
  border: 0;
  border-right: 1px solid var(--sn-stroke);
  background: transparent;
  color: var(--sn-text);
  font-size: 11px;
  line-height: 24px;
  min-height: 24px;
  padding: 0 10px;
  cursor: pointer;
  white-space: nowrap;
}
.skd-perm-level-btn:last-child {
  border-right: 0;
}
.skd-perm-level-btn:hover:not(:disabled):not(.is-active) {
  background: var(--skd-accent-soft-08);
}
.skd-perm-level-btn.is-active {
  background: var(--skd-accent);
  color: #fff;
  font-weight: 600;
}
.skd-perm-level-btn:disabled {
  color: var(--sn-not-active);
  cursor: not-allowed;
}
.skd-perm-level-btn.is-active:disabled {
  background: rgba(47, 71, 224, .55);
  color: #fff;
}
/* Активные уровни окрашены по семантике уровня тонами чипов участников
 * журнала (skd-ref-kind-*): чтение — статусный зелёный rgb(19,145,17),
 * промежуточные уровни — голубой тег rgb(47,71,224), полный — янтарный
 * rgb(224,168,0); текст — плотный тёмный тон того же цвета, как у чипов.
 * --on — бинарный сегмент «разрешено» (диалог пропуска), тот же зелёный.
 * Правила включают :disabled, чтобы read-only матрицы (обзор роли,
 * эффективные права) сохраняли окраску. */
.skd-perm-level-btn--read.is-active,
.skd-perm-level-btn--read.is-active:disabled,
.skd-perm-level-btn--on.is-active,
.skd-perm-level-btn--on.is-active:disabled {
  background: rgba(19, 145, 17, 0.20);
  color: rgb(21, 92, 20);
}
.skd-perm-level-btn--mid.is-active,
.skd-perm-level-btn--mid.is-active:disabled {
  background: rgba(47, 71, 224, 0.14);
  color: rgb(33, 58, 185);
}
.skd-perm-level-btn--full.is-active,
.skd-perm-level-btn--full.is-active:disabled {
  background: rgba(224, 168, 0, 0.24);
  color: rgb(122, 90, 0);
}
/* Уровень, унаследованный от роли (карточка оператора, «Эффективные
 * права»): маленькая звёздочка слева от подписи сегмента показывает ролевой
 * минимум. Цвет наследуется от текста сегмента (currentColor) и приглушён
 * прозрачностью, чтобы метка не спорила с окраской активных уровней.
 * Сегменты ниже задизейблены — персональная настройка может только поднять
 * уровень. */
.skd-perm-level-btn .skd-perm-star {
  display: inline-block;
  margin-right: 4px;
  font-size: 9px;
  line-height: 1;
  vertical-align: 1px;
  opacity: 0.55;
}
/* «Нет»: активное состояние без заливки — выглядит как невыбранная кнопка. */
.skd-perm-level-btn--none.is-active {
  background: transparent;
  color: var(--sn-text);
  font-weight: 400;
}
.skd-perm-level-btn--none.is-active:disabled {
  background: transparent;
  color: var(--sn-not-active);
  font-weight: 400;
}
/* Чипы выбора шаблона в диалоге пропуска: одиночные пилюли того же
 * визуального языка, что и skd-chip / skd-perm-level-btn — мягкая пилюля,
 * активный чип залит акцентом как активный сегмент переключателя. */
.skd-pass-tpl-chips {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}
.skd-pass-tpl-chip {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--sn-stroke);
  background: var(--sn-button-4);
  color: var(--sn-text);
  font-size: 11px;
  line-height: 24px;
  white-space: nowrap;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.skd-pass-tpl-chip:hover:not(:disabled):not(.is-active) {
  background: var(--skd-accent-soft-08);
}
.skd-pass-tpl-chip.is-active {
  background: var(--skd-accent);
  border-color: var(--skd-accent);
  color: #fff;
  font-weight: 600;
}
.skd-pass-tpl-chip:disabled {
  color: var(--sn-not-active);
  cursor: not-allowed;
}
.skd-pass-tpl-chip.is-active:disabled {
  background: rgba(47, 71, 224, .55);
  border-color: transparent;
  color: #fff;
}
.skd-role-builtin-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 0 7px;
  border: 1px solid var(--sn-stroke);
  border-radius: 999px;
  font-size: 10px;
  line-height: 16px;
  color: var(--sn-not-active);
  background: var(--sn-button-4);
  vertical-align: middle;
}
.skd-operators-list-fill {
  width: 100%;
  height: 100%;
  min-height: 0;
}
.skd-operators-list-table {
  width: 100% !important;
  min-width: 100%;
  table-layout: fixed;
  margin: 0;
}
.skd-operators-list-table th {
  /* Типографика заголовков — как у эталонных списков (.skd-eq-main-table
   * thead th): тёмный текст, а не muted-серый. */
  font-size: 12px;
  color: var(--sn-text);
  font-weight: 600;
}
.skd-operators-list-table th,
.skd-operators-list-table td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.skd-operators-list-table tr {
  cursor: pointer;
}

/* ---- Equipment add menu ---- */
.skd-panel-with-popover {
  position: relative;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.skd-panel-with-popover > .skd-panel {
  flex: 1 1 auto;
  min-height: 0;
}
.skd-add-menu-backdrop {
  position: absolute;
  inset: 0;
  z-index: 55;
}
.skd-add-menu {
  position: absolute;
  left: 10px;
  bottom: calc(var(--skd-header-h) + 18px);
  width: 260px;
  padding: 6px;
  border: 1px solid var(--sn-stroke);
  border-radius: var(--skd-radius);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 34px rgba(11, 34, 64, 0.16);
  backdrop-filter: blur(10px);
}
.skd-add-menu-item {
  width: 100%;
  min-height: 52px;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--skd-radius-sm);
  background: transparent;
  color: var(--sn-text);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  cursor: pointer;
}
.skd-add-menu-item:hover {
  background: var(--sn-fill-3);
}
.skd-add-menu-item:disabled {
  cursor: default;
  opacity: 0.48;
}
.skd-add-menu-title {
  font-size: 13px;
  line-height: 17px;
  font-weight: 600;
}
.skd-add-menu-subtitle {
  margin-top: 2px;
  font-size: 12px;
  line-height: 16px;
  color: var(--sn-not-active);
}

/* ---- Cards: controller sectioned summary ---- */
.skd-ctrl-summary {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--sn-container);
  border-bottom: 1px solid var(--sn-stroke);
  /* Variant 2: keep the same top spacing under card header as other cards,
   * but still span full width horizontally (cancel only left/right padding). */
  margin-top: 0;
  margin-left: calc(var(--skd-pad) * -1);
  margin-right: calc(var(--skd-pad) * -1);
  margin-bottom: var(--skd-pad);
  padding: var(--skd-pad);
}

.skd-card-section {
  margin-top: 14px;
  position: relative;
  z-index: 0;
}

/* Controller card: schematic block under header (left aligned) */
.skd-ctrl-schematic-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 10px 0 6px;
  padding: 0;
  border: 0;
  background: transparent;
  backdrop-filter: none;
}
.skd-ctrl-photo {
  display: block;
  width: 160px;
  max-width: min(100%, 240px);
  height: auto;
}
.skd-card-section.is-open {
  border: 1px solid var(--skd-accent-border-35);
  border-radius: 16px;
  overflow: visible;
  z-index: 6;
  box-shadow: 0 12px 22px rgba(47, 71, 224, 0.06);
}
.skd-card-section.is-open:has(.skd-positioned-secret-popover) {
  z-index: 80;
}
.skd-card-section.is-open:has(.skd-positioned-secret-popover) .skd-acc-body-wrap {
  position: relative;
  z-index: 10;
}
.skd-card-section.is-open .skd-card-section-sticky {
  /* Remove inset margins so the perimeter highlight is tight */
  margin: 0;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  overflow: hidden;
}
.skd-card-section.is-open .skd-acc-body {
  padding: 10px 12px 12px;
}
.skd-card-section-sticky {
  position: sticky;
  top: var(--skd-ctrl-summary-h, 0px);
  z-index: 4;
  background: var(--sn-container);
  border-bottom: 1px solid var(--sn-stroke);
  /* More side air in section header */
  padding: 12px 12px;
  margin: 10px 0 0;
}
.skd-card-section-title {
  /* Closed accordion headers: same size/color as data pair labels */
  font-size: 13px;
  line-height: 16px;
  font-weight: 400;
  color: var(--sn-text);
}
.skd-card-section.is-open .skd-card-section-title {
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
}
.skd-card-section-cols {
  display: none; /* shown only for the active (top) section */
  align-items: center;
  gap: 0;
  margin-top: 10px; /* more air from title */
  color: var(--sn-not-active);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
}
.skd-card-section.is-open .skd-card-section-cols {
  display: flex;
}

/* Accordion feel: clickable headers */
.skd-card-section-sticky {
  cursor: pointer;
  user-select: none;
  transition: background 160ms ease, box-shadow 160ms ease;
}
.skd-card-section.is-open .skd-card-section-sticky {
  background: var(--sn-button-4);
  background-clip: padding-box;
}
.skd-card-section.is-closed .skd-card-section-sticky:hover {
  background: var(--sn-button-4);
  box-shadow: inset 3px 0 0 var(--skd-accent);
}
.skd-card-section-sticky:active {
  background: var(--sn-button-3);
}
.skd-card-section-sticky:focus-visible {
  outline: none;
  box-shadow: inset 3px 0 0 var(--skd-accent), 0 0 0 4px rgba(47, 71, 224, 0.12);
}

/* Accordion header layout: title | summary | more */
.skd-acc-head {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  padding-right: 18px; /* space for hover chevron */
}
.skd-acc-head::after {
  content: "›";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  line-height: 1;
  color: var(--sn-not-active);
  opacity: 0;
  transition: opacity 160ms ease, transform 160ms ease, color 160ms ease;
}
.skd-card-section-sticky:hover .skd-acc-head::after {
  opacity: 0.9;
  color: var(--sn-text);
  transform: translate(2px, -50%);
}
.skd-card-section.is-open .skd-acc-head::after {
  opacity: 0.6;
}
.skd-acc-summary {
  flex: 1 1 auto;
  min-width: 0;
  text-align: right;
  color: var(--sn-not-active);
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.skd-acc-more {
  flex: 0 0 auto;
  width: 26px;
  text-align: right;
  color: var(--sn-not-active);
  font-size: 18px;
  line-height: 16px;
}
.skd-card-section.is-open .skd-acc-more {
  color: var(--sn-text);
  opacity: 0.8;
}

.skd-tool-panel .skd-card-section-sticky,
.skd-system-tool-panel .skd-card-section-sticky,
.skd-bulk-ops-overlay-panel .skd-card-section-sticky {
  padding: 10px 12px;
}
.skd-tool-panel .skd-card-section.is-open .skd-card-section-title,
.skd-system-tool-panel .skd-card-section.is-open .skd-card-section-title,
.skd-bulk-ops-overlay-panel .skd-card-section.is-open .skd-card-section-title {
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  color: var(--sn-not-active);
}
.skd-tool-panel .skd-card-section-cols,
.skd-system-tool-panel .skd-card-section-cols,
.skd-bulk-ops-overlay-panel .skd-card-section-cols {
  margin-top: 8px;
  color: var(--sn-not-active);
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
}
.skd-tool-panel .skd-acc-summary,
.skd-system-tool-panel .skd-acc-summary,
.skd-bulk-ops-overlay-panel .skd-acc-summary {
  color: var(--sn-not-active);
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
}

/* Accordion animation */
.skd-acc-body-wrap {
  height: 0px;
  overflow: hidden;
  opacity: 0;
  transition: height 220ms ease, opacity 220ms ease;
  will-change: height, opacity;
  pointer-events: none;
}
.skd-card-section.is-open .skd-acc-body-wrap {
  opacity: 1;
  pointer-events: auto;
  overflow: visible;
}
.skd-acc-body {
  padding-top: 10px; /* air under sticky header */
}

/* Section-local actions (Reset/Save) shown when dirty */
.skd-acc-actions {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
}

.skd-tag-delta-editor {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--sn-stroke);
}
.skd-tag-delta-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.skd-tag-delta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}
.skd-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-right: 6px;
}
.skd-tag-chip-remove {
  border: 0;
  background: transparent;
  padding: 0 2px;
  line-height: 1;
  color: inherit;
  cursor: pointer;
}
.skd-tag-chip-remove:disabled {
  cursor: default;
  opacity: 0.5;
}
.skd-ao-rule-badge-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
}
.skd-ao-rule-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  min-height: 22px;
  padding: 2px 7px;
  border: 1px solid rgba(120, 133, 149, 0.24);
  border-radius: 999px;
  font-size: 11px;
  line-height: 14px;
  font-weight: 500;
  white-space: nowrap;
}
.skd-ao-rule-badge > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.skd-ao-rule-badge-category {
  border-color: rgba(224, 168, 0, 0.36);
  background: rgba(255, 214, 102, 0.30);
  color: #7a5a00;
}
.skd-ao-rule-badge-apb {
  border-color: rgba(217, 119, 6, 0.34);
  background: rgba(217, 119, 6, 0.11);
  color: #9a4e00;
}
.skd-ao-rule-badge-deny-present {
  border-color: rgba(214, 28, 28, 0.34);
  background: rgba(214, 28, 28, 0.11);
  color: #a51616;
}
.skd-ao-rule-badge-deny-absent {
  border-color: rgba(19, 145, 17, 0.30);
  background: rgba(19, 145, 17, 0.12);
  color: #137011;
}
.skd-ao-rule-badge-quota {
  border-color: rgba(47, 71, 224, 0.30);
  background: rgba(47, 71, 224, 0.10);
  color: #2b3fae;
}
.skd-ao-rule-badge-route {
  border-color: rgba(13, 148, 136, 0.32);
  background: rgba(13, 148, 136, 0.11);
  color: #0b6b62;
}
.skd-ao-rule-badge-presence {
  border-color: rgba(100, 116, 139, 0.34);
  background: rgba(100, 116, 139, 0.12);
  color: #475569;
}
.skd-ao-rule-badge-more {
  border-color: rgba(120, 133, 149, 0.28);
  background: rgba(120, 133, 149, 0.08);
  color: var(--sn-not-active);
}
.skd-ao-rule-badge-remove {
  border: 0;
  background: transparent;
  padding: 0 1px;
  line-height: 1;
  color: inherit;
  cursor: pointer;
}
.skd-ao-rule-badge-remove:disabled {
  cursor: default;
  opacity: 0.5;
}
.skd-ao-rule-area,
.skd-ao-rule-delta {
  padding: 10px;
  border: 1px solid var(--sn-stroke);
  border-radius: var(--skd-radius-sm);
  background: var(--sn-button-4);
}
.skd-ao-rule-delta + .skd-ao-rule-delta {
  margin-top: 10px;
}
.skd-ao-rule-area-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.skd-tag-inline-picker {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: min(260px, 100%);
  z-index: 1;
}
.skd-tag-inline-picker:focus-within {
  z-index: 85;
}
.skd-tag-inline-input.form-control-sm {
  width: 260px;
  max-width: 100%;
  min-height: 30px;
  height: 30px;
  padding: 5px 10px;
}
.skd-modal-card .skd-tag-inline-input.form-control,
.skd-modal-card .skd-tag-inline-input.form-control-sm {
  min-height: 30px !important;
  height: 30px !important;
  padding: 5px 10px !important;
  border: 1px solid var(--sn-stroke) !important;
  border-radius: 999px !important;
  background: var(--sn-button-4) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55) !important;
  font-size: 12px;
  line-height: 16px;
}
.skd-modal-card .skd-tag-inline-input.form-control:focus {
  border-color: rgba(47, 71, 224, .45) !important;
  box-shadow: 0 0 0 2px rgba(47, 71, 224, .12), inset 0 1px 0 rgba(255,255,255,.55) !important;
}
.skd-tag-delta-editor:has(.skd-tag-picker-menu) {
  position: relative;
  z-index: 85;
}
.skd-bulk-ops-section:has(.skd-tag-picker-menu),
.skd-card-section.is-open:has(.skd-tag-picker-menu) {
  overflow: visible;
  z-index: 30;
}
.skd-card-section.is-open:has(.skd-tag-picker-menu) .skd-acc-body-wrap {
  overflow: visible;
  height: auto !important;
}
.skd-card .skd-prop-table:not(.skd-ao-bulk-table) td:has(.skd-tag-inline-picker) {
  overflow: visible;
}
.skd-tag-picker-menu.dropdown-menu {
  display: block;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: auto;
  min-width: min(260px, calc(100vw - 48px));
  width: min(320px, calc(100vw - 48px));
  max-height: var(--skd-tag-picker-max-height, 220px);
  margin: 0;
  padding: 6px;
  overflow-x: hidden;
  overflow-y: auto;
  z-index: 85;
  border: 1px solid rgba(230, 236, 245, 0.96);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 16px 36px rgba(11, 34, 64, 0.14);
  color: var(--sn-text);
  font-size: 12px;
  line-height: 16px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.skd-tag-picker-menu.dropdown-menu.skd-tag-picker-menu-up {
  top: auto;
  bottom: calc(100% + 6px);
}
.skd-tag-picker-menu .dropdown-item {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 28px;
  padding: 6px 9px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--sn-text);
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
}
.skd-tag-picker-menu button.dropdown-item {
  cursor: pointer;
}
.skd-tag-picker-menu .dropdown-item:hover,
.skd-tag-picker-menu .dropdown-item:focus {
  background: rgba(47, 71, 224, 0.08);
  color: var(--sn-text);
  outline: 0;
}
.skd-tag-picker-menu .dropdown-item:active {
  background: var(--sn-button);
  color: #fff;
}
.skd-tag-picker-menu .dropdown-item.disabled,
.skd-tag-picker-menu .dropdown-item:disabled {
  background: transparent;
  color: var(--sn-not-active);
  cursor: default;
  opacity: 1;
  pointer-events: none;
}
.skd-tag-picker-create {
  font-weight: 500;
  color: var(--sn-button-1);
}
.skd-tag-add-button.btn.btn-sm {
  min-height: 30px;
  height: 30px;
  padding: 4px 10px;
  border-radius: 999px;
}
.skd-tag-delta-help {
  margin-top: 6px;
}

/* Compact reader profile rules in equipment settings templates */
.skd-reader-rule-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.skd-reader-rule-card {
  border: 1px solid var(--sn-stroke);
  border-radius: 14px;
  background: var(--sn-container);
  overflow: hidden;
  box-shadow: 0 8px 18px rgba(11, 34, 64, 0.05);
}
.skd-reader-rule-card.is-open {
  border-color: var(--skd-accent-border-35);
  box-shadow: 0 10px 22px rgba(47, 71, 224, 0.08);
}
.skd-reader-rule-card.has-card-key-secret-popover {
  position: relative;
  z-index: 20;
  overflow: visible;
}
.skd-reader-rule-card.has-card-key-secret-popover .skd-reader-rule-head {
  border-top-left-radius: 13px;
  border-top-right-radius: 13px;
}
.skd-reader-rule-head {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 0;
  background: var(--sn-button-4);
  color: var(--sn-text);
  text-align: left;
}
.skd-reader-rule-head:hover {
  background: var(--sn-button-3);
}
.skd-reader-rule-head:focus-visible {
  outline: none;
  box-shadow: inset 3px 0 0 var(--skd-accent), 0 0 0 4px rgba(47, 71, 224, 0.12);
}
.skd-reader-rule-main {
  flex: 1 1 auto;
  min-width: 0;
}
.skd-reader-rule-title {
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.skd-reader-rule-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin-top: 3px;
  color: var(--sn-not-active);
  font-size: 12px;
  line-height: 16px;
}
.skd-reader-rule-pill {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid rgba(47, 71, 224, 0.18);
  background: rgba(47, 71, 224, 0.07);
  color: var(--sn-text);
  font-weight: 500;
}
.skd-reader-rule-chevron,
.skd-reader-rule-delete {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: var(--sn-not-active);
  font-size: 16px;
  line-height: 1;
}
.skd-reader-rule-delete {
  color: var(--sn-danger);
  font-size: 20px;
}
.skd-reader-rule-delete:hover {
  background: rgba(214, 28, 28, 0.08);
}
.skd-reader-rule-body {
  padding: 10px;
}
.skd-reader-rule-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}
.skd-reader-rule-field .form-label {
  margin-bottom: 4px;
  color: var(--sn-not-active);
  font-weight: 500;
}
.skd-reader-rule-check {
  display: flex;
  align-items: end;
  padding-bottom: 6px;
}

.skd-card-section-cols > div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.skd-card-section-cols > div:last-child {
  text-align: right;
}

/* Section jump rows in the fixed summary */
.skd-card-section-row {
  cursor: pointer;
}
.skd-card-section-row td {
  background: var(--sn-button-4);
}
.skd-card-section-row:hover td {
  background: var(--sn-button-3);
}
.skd-card-section-row:active td {
  background: rgba(47, 71, 224, 0.08);
}
.skd-card-section-open {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  color: var(--sn-not-active);
  font-weight: 500;
}
.skd-card-section-chevron {
  font-size: 18px;
  line-height: 1;
  opacity: 0.7;
  color: var(--sn-text);
}

.skd-panel-header {
  /* Use the same surface tone as the menubar container */
  background: var(--sn-button-4);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--sn-stroke);
  /* Ensure consistent header height across Zone1/Zone2.
   * px-фолбэк перед var() — для движков без надёжных custom properties. */
  height: 44px;
  height: var(--skd-header-h);
  /* Заголовок — флекс-элемент колонки панели: без запрета на сжатие он
   * поджимается, когда тело списка переполняется (появляется скролл). */
  min-height: 44px;
  min-height: var(--skd-header-h);
  flex: 0 0 auto;
}
.skd-panel-header::before {
  /* Remove vertical accent stripe in opened panel header */
  content: none;
}

.skd-eq-head,
.skd-eq-table thead th {
  background: rgba(255, 255, 255, 0.70);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* Sticky table header offset should match actual filter head height (AO panel can wrap). */
.skd-eq-table thead th {
  top: var(--skd-eq-head-h, 44px);
}
.skd-tool-panel-body .skd-eq-table thead th {
  position: static;
  top: auto;
}

.skd-events-head {
  position: static;
}

.skd-events-table thead th {
  position: static;
  top: auto;
}

/* Hover for list rows: a bit lighter than selection. */
.skd-eq-table tbody tr:not(.skd-eq-selected):hover td {
  background: rgba(47, 71, 224, 0.04);
}

/* Shorten row separators so selected pill visually extends beyond them. */
.skd-eq-table tbody tr {
  position: relative;
}
.skd-eq-table tbody td {
  border-bottom-color: transparent;
}
.skd-eq-table tbody tr::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  height: 1px;
  background: var(--sn-stroke);
  pointer-events: none;
}
.skd-eq-table tbody tr:last-child::after,
.skd-eq-table tbody tr.skd-eq-selected::after {
  display: none;
}

/* Selected rows in left panels: same visual language as collapsed sections. */
.skd-eq-selected td {
  background: var(--sn-button-4);
  border-top-color: transparent;
  border-bottom-color: transparent;
}
.skd-eq-selected td:first-child {
  border-left-color: transparent;
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
  box-shadow: inset 3px 0 0 var(--skd-accent);
}
.skd-eq-selected td:last-child {
  border-right-color: transparent;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
}

/* More air in left panels equipment rows */
.skd-eq-table td,
.skd-eq-table th {
  /* Keep all list panels consistent (baseline = Granted/Пропуска) */
  padding: 10px 12px;
  line-height: 1.35;
  vertical-align: middle;
}
.skd-eq-main-table {
  color: var(--sn-text);
  font-size: 12px;
  line-height: 16px;
}
.skd-eq-main-table th,
.skd-eq-main-table td {
  font-size: 12px;
  line-height: 16px;
}
.skd-eq-main-table thead th {
  color: var(--sn-text);
  font-weight: 600;
}
.skd-eq-main-table tbody td {
  color: var(--sn-text);
  font-weight: 400;
}
.skd-equipment-card .skd-prop-table {
  color: var(--sn-text);
  font-size: 12px;
  line-height: 16px;
}
.skd-equipment-card .skd-prop-table th,
.skd-equipment-card .skd-prop-table td {
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
}
.skd-equipment-card .skd-prop-table tbody td:first-child {
  color: var(--sn-text);
  font-weight: 400;
}
.skd-equipment-card .skd-prop-table tbody td.text-muted,
.skd-equipment-card .skd-prop-table tbody td:nth-child(2) {
  color: var(--sn-not-active) !important;
  font-weight: 400;
}
.skd-equipment-card .skd-prop-table tbody td:nth-child(3) {
  color: var(--sn-text);
  font-weight: 400;
}
.skd-detail-card .skd-card-body .skd-prop-table tbody td,
.skd-system-tool-panel .skd-prop-table tbody td {
  font-weight: 400;
}
.skd-detail-card .skd-card-body .skd-prop-table tbody td:first-child,
.skd-system-tool-panel .skd-prop-table tbody td:first-child {
  color: var(--sn-text);
  font-weight: 400;
}
.skd-detail-card .skd-card-body .skd-prop-table tbody td.fw-semibold,
.skd-detail-card .skd-card-body .skd-prop-table tbody td.fw-bold,
.skd-system-tool-panel .skd-prop-table tbody td.fw-semibold,
.skd-system-tool-panel .skd-prop-table tbody td.fw-bold {
  font-weight: 400 !important;
}
.skd-card-permission .skd-card-section.is-open .skd-card-section-title,
.skd-permission-detail-card .skd-card-section.is-open .skd-card-section-title,
.skd-person-card .skd-card-section.is-open .skd-card-section-title,
.skd-identifier-detail-card .skd-card-section.is-open .skd-card-section-title {
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  color: var(--sn-not-active);
}
.skd-card-permission .skd-card-section-cols,
.skd-permission-detail-card .skd-card-section-cols,
.skd-person-card .skd-card-section-cols,
.skd-identifier-detail-card .skd-card-section-cols,
.skd-card-permission .skd-acc-summary,
.skd-permission-detail-card .skd-acc-summary,
.skd-person-card .skd-acc-summary,
.skd-identifier-detail-card .skd-acc-summary {
  font-weight: 400;
}
.skd-card-permission .skd-person-summary-title,
.skd-permission-detail-card .skd-person-summary-title,
.skd-person-card .skd-person-summary-title,
.skd-identifier-detail-card .skd-person-summary-title {
  font-weight: 400 !important;
}
.skd-card-permission .skd-chip,
.skd-permission-detail-card .skd-chip,
.skd-person-card .skd-chip,
.skd-identifier-detail-card .skd-chip {
  font-weight: 400;
}
.skd-equipment-card .skd-eq-section-collapsed-main,
.skd-identifier-detail-card .skd-eq-section-collapsed-main,
.skd-operator-card .skd-eq-section-collapsed-main,
.skd-journal-event-card .skd-eq-section-collapsed-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.skd-equipment-card .skd-eq-section-collapsed-title,
.skd-identifier-detail-card .skd-eq-section-collapsed-title,
.skd-operator-card .skd-eq-section-collapsed-title,
.skd-journal-event-card .skd-eq-section-collapsed-title {
  flex: 0 1 auto;
  min-width: 0;
  color: var(--sn-text);
  font-size: 13px;
  line-height: 17px;
  font-weight: 600;
}
.skd-equipment-card .skd-eq-section-collapsed-summary,
.skd-identifier-detail-card .skd-eq-section-collapsed-summary,
.skd-operator-card .skd-eq-section-collapsed-summary,
.skd-journal-event-card .skd-eq-section-collapsed-summary {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--sn-not-active);
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.skd-equipment-card .skd-eq-section-collapsed-chevron {
  flex: 0 0 auto;
  width: 18px;
  color: var(--sn-not-active);
  text-align: right;
  line-height: 16px;
  transform-origin: center;
  transition: transform 160ms ease;
}

/* Pilot card sections: line/device only. */
.skd-line-card.skd-equipment-card .skd-acc-head,
.skd-dev-card.skd-equipment-card .skd-acc-head {
  padding-right: 0;
}
.skd-line-card.skd-equipment-card .skd-acc-head::after,
.skd-dev-card.skd-equipment-card .skd-acc-head::after {
  content: none;
}
.skd-line-card.skd-equipment-card .skd-eq-section-collapsed-title,
.skd-dev-card.skd-equipment-card .skd-eq-section-collapsed-title {
  font-weight: 400;
}
.skd-line-card.skd-equipment-card .skd-eq-section-state,
.skd-dev-card.skd-equipment-card .skd-eq-section-state {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.skd-line-card.skd-equipment-card .skd-acc-state-icon,
.skd-dev-card.skd-equipment-card .skd-acc-state-icon {
  width: 12px;
  height: 12px;
  display: block;
  opacity: 0.82;
}
.skd-line-card.skd-equipment-card .skd-prop-table,
.skd-dev-card.skd-equipment-card .skd-prop-table {
  width: 100%;
  margin: 0;
  color: var(--sn-text);
  font-size: 12px;
  line-height: 16px;
  border-collapse: collapse;
}
.skd-line-card.skd-equipment-card .skd-prop-table th,
.skd-line-card.skd-equipment-card .skd-prop-table td,
.skd-dev-card.skd-equipment-card .skd-prop-table th,
.skd-dev-card.skd-equipment-card .skd-prop-table td {
  height: 40px;
  padding: 5px 8px;
  border-top: 0 !important;
  border-bottom: 0 !important;
  color: var(--sn-text);
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  vertical-align: middle;
}
.skd-line-card.skd-equipment-card .skd-prop-table tbody td:first-child,
.skd-dev-card.skd-equipment-card .skd-prop-table tbody td:first-child {
  color: var(--sn-text);
  font-weight: 400;
}
.skd-line-card.skd-equipment-card .skd-prop-table tbody td.text-muted,
.skd-line-card.skd-equipment-card .skd-prop-table tbody td:nth-child(2),
.skd-dev-card.skd-equipment-card .skd-prop-table tbody td.text-muted,
.skd-dev-card.skd-equipment-card .skd-prop-table tbody td:nth-child(2) {
  color: var(--sn-not-active) !important;
  font-weight: 400;
}
.skd-line-card.skd-equipment-card input.form-control-sm,
.skd-line-card.skd-equipment-card select.form-select-sm,
.skd-line-card.skd-equipment-card textarea.form-control-sm,
.skd-dev-card.skd-equipment-card input.form-control-sm,
.skd-dev-card.skd-equipment-card select.form-select-sm,
.skd-dev-card.skd-equipment-card textarea.form-control-sm {
  min-height: 30px;
  height: 30px;
  padding-top: 4px;
  padding-bottom: 4px;
  border-radius: 10px;
  color: var(--sn-text);
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
}
.skd-line-card.skd-equipment-card textarea.form-control-sm,
.skd-dev-card.skd-equipment-card textarea.form-control-sm {
  height: auto;
  min-height: 56px;
}
.skd-line-card.skd-equipment-card select.form-select,
.skd-dev-card.skd-equipment-card select.form-select {
  -webkit-appearance: none;
  appearance: none;
  min-height: 30px;
  height: 30px;
  padding: 4px 30px 4px 11px;
  border: 1px solid var(--sn-stroke);
  border-radius: 999px;
  background-color: var(--sn-button-4);
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' fill='none' stroke='%23788595' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
  color: var(--sn-text);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
}
.skd-line-card.skd-equipment-card input.form-control,
.skd-line-card.skd-equipment-card textarea.form-control,
.skd-dev-card.skd-equipment-card input.form-control,
.skd-dev-card.skd-equipment-card textarea.form-control {
  border: 1px solid var(--sn-stroke);
  background-color: var(--sn-button-4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
  font-weight: 400;
}
.skd-line-card.skd-equipment-card select.form-select:hover:not(:disabled),
.skd-dev-card.skd-equipment-card select.form-select:hover:not(:disabled),
.skd-line-card.skd-equipment-card input.form-control:hover:not(:disabled):not([readonly]),
.skd-dev-card.skd-equipment-card input.form-control:hover:not(:disabled):not([readonly]),
.skd-line-card.skd-equipment-card textarea.form-control:hover:not(:disabled):not([readonly]),
.skd-dev-card.skd-equipment-card textarea.form-control:hover:not(:disabled):not([readonly]) {
  border-color: rgba(47, 71, 224, .32);
  background-color: rgba(255, 255, 255, .82);
}
.skd-line-card.skd-equipment-card select.form-select:focus,
.skd-dev-card.skd-equipment-card select.form-select:focus,
.skd-line-card.skd-equipment-card input.form-control:focus,
.skd-dev-card.skd-equipment-card input.form-control:focus,
.skd-line-card.skd-equipment-card textarea.form-control:focus,
.skd-dev-card.skd-equipment-card textarea.form-control:focus {
  border-color: rgba(47, 71, 224, .45);
  box-shadow: 0 0 0 2px rgba(47, 71, 224, .12), inset 0 1px 0 rgba(255,255,255,.55);
}
.skd-line-card.skd-equipment-card select.form-select:disabled,
.skd-dev-card.skd-equipment-card select.form-select:disabled,
.skd-line-card.skd-equipment-card input.form-control:disabled,
.skd-line-card.skd-equipment-card input.form-control[readonly],
.skd-dev-card.skd-equipment-card input.form-control:disabled,
.skd-dev-card.skd-equipment-card input.form-control[readonly],
.skd-line-card.skd-equipment-card textarea.form-control:disabled,
.skd-line-card.skd-equipment-card textarea.form-control[readonly],
.skd-dev-card.skd-equipment-card textarea.form-control:disabled,
.skd-dev-card.skd-equipment-card textarea.form-control[readonly] {
  background-color: rgba(245, 247, 251, .86);
  color: var(--sn-not-active);
  cursor: not-allowed;
  opacity: 1;
}
.skd-line-card.skd-equipment-card .btn.btn-sm,
.skd-dev-card.skd-equipment-card .btn.btn-sm {
  min-height: 28px;
  height: 28px;
  padding: 0 9px;
  font-size: 12px;
  line-height: 28px;
  vertical-align: middle;
}
.skd-line-card.skd-equipment-card .skd-acc-actions .btn.btn-sm,
.skd-dev-card.skd-equipment-card .skd-acc-actions .btn.btn-sm {
  min-height: 36px;
  height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  line-height: 36px;
}

/* ---- Shared detail-card contract ----
 * Scope: only right-side card/detail surfaces and tool-panel detail cards.
 * Keep list/table panels outside this scope unless they are embedded editors.
 * - Typography: property labels are normal-weight --sn-text; secondary values
 *   and group/section metadata use --sn-not-active at 12px.
 * - Rows: compact 40px rhythm, centered vertically, no horizontal separators.
 * - Controls: input/select/textarea and number steppers mirror tool-panel
 *   rounded fill, hover, focus, disabled, and readonly treatment.
 * - Sections: collapsible detail sections are manually and independently
 *   toggled after initial default state; headers use opened.svg/closed.svg.
 * - Actions: dirty section actions stay large, right-aligned pill buttons.
 */
.skd-equipment-card .skd-acc-head,
.skd-system-tool-panel .skd-acc-head,
.skd-operator-card .skd-acc-head,
.skd-journal-event-card .skd-acc-head {
  padding-right: 0;
}
.skd-equipment-card .skd-acc-head::after,
.skd-system-tool-panel .skd-acc-head::after,
.skd-operator-card .skd-acc-head::after,
.skd-journal-event-card .skd-acc-head::after {
  content: none;
}
.skd-equipment-card .skd-eq-section-collapsed-title,
.skd-system-tool-panel .skd-eq-section-collapsed-title,
.skd-operator-card .skd-eq-section-collapsed-title,
.skd-journal-event-card .skd-eq-section-collapsed-title {
  font-weight: 400;
}
.skd-equipment-card .skd-eq-section-state,
.skd-system-tool-panel .skd-eq-section-state,
.skd-operator-card .skd-eq-section-state,
.skd-journal-event-card .skd-eq-section-state {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.skd-equipment-card .skd-acc-state-icon,
.skd-system-tool-panel .skd-acc-state-icon,
.skd-operator-card .skd-acc-state-icon,
.skd-journal-event-card .skd-acc-state-icon {
  width: 12px;
  height: 12px;
  display: block;
  opacity: 0.82;
}
.skd-equipment-card .skd-prop-table,
.skd-system-tool-panel .skd-prop-table,
.skd-operator-card .skd-prop-table,
.skd-tool-panel .skd-secret-detail-table {
  width: 100%;
  margin: 0;
  color: var(--sn-text);
  font-size: 12px;
  line-height: 16px;
  border-collapse: collapse;
}
.skd-equipment-card .skd-prop-table th,
.skd-equipment-card .skd-prop-table td,
.skd-system-tool-panel .skd-prop-table th,
.skd-system-tool-panel .skd-prop-table td,
.skd-operator-card .skd-prop-table th,
.skd-operator-card .skd-prop-table td,
.skd-tool-panel .skd-secret-detail-table th,
.skd-tool-panel .skd-secret-detail-table td {
  height: 40px;
  padding: 5px 8px;
  border-top: 0 !important;
  border-bottom: 0 !important;
  color: var(--sn-text);
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  vertical-align: middle;
}
.skd-equipment-card .skd-prop-table tbody td:first-child,
.skd-system-tool-panel .skd-prop-table tbody td:first-child,
.skd-operator-card .skd-prop-table tbody td:first-child,
.skd-tool-panel .skd-secret-detail-table tbody td:first-child {
  color: var(--sn-text);
  font-weight: 400;
}
.skd-equipment-card .skd-prop-table tbody td.text-muted,
.skd-equipment-card .skd-prop-table tbody td:nth-child(2),
.skd-system-tool-panel .skd-prop-table tbody td.text-muted,
.skd-system-tool-panel .skd-prop-table tbody td:nth-child(2),
.skd-operator-card .skd-prop-table tbody td.text-muted,
.skd-operator-card .skd-prop-table tbody td:nth-child(2),
.skd-tool-panel .skd-secret-detail-table tbody td.text-muted,
.skd-tool-panel .skd-secret-detail-table tbody td:nth-child(2) {
  color: var(--sn-not-active) !important;
  font-weight: 400;
}
.skd-equipment-card input.form-control-sm,
.skd-equipment-card select.form-select-sm,
.skd-equipment-card textarea.form-control-sm,
.skd-system-tool-panel input.form-control-sm,
.skd-system-tool-panel select.form-select-sm,
.skd-system-tool-panel textarea.form-control-sm,
.skd-operator-card input.form-control-sm,
.skd-operator-card select.form-select-sm,
.skd-operator-card textarea.form-control-sm,
.skd-tool-panel .skd-secret-detail-card input.form-control-sm,
.skd-tool-panel .skd-secret-detail-card select.form-select-sm,
.skd-tool-panel .skd-secret-detail-card textarea.form-control-sm {
  min-height: 30px;
  height: 30px;
  padding-top: 4px;
  padding-bottom: 4px;
  border-radius: 10px;
  color: var(--sn-text);
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
}
.skd-equipment-card textarea.form-control-sm,
.skd-system-tool-panel textarea.form-control-sm,
.skd-operator-card textarea.form-control-sm,
.skd-tool-panel .skd-secret-detail-card textarea.form-control-sm {
  height: auto;
  min-height: 56px;
}
.skd-equipment-card select.form-select,
.skd-system-tool-panel select.form-select,
.skd-operator-card select.form-select,
.skd-tool-panel .skd-secret-detail-card select.form-select {
  -webkit-appearance: none;
  appearance: none;
  min-height: 30px;
  height: 30px;
  padding: 4px 30px 4px 11px;
  border: 1px solid var(--sn-stroke);
  border-radius: 999px;
  background-color: var(--sn-button-4);
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' fill='none' stroke='%23788595' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
  color: var(--sn-text);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
}
.skd-equipment-card input.form-control,
.skd-equipment-card textarea.form-control,
.skd-system-tool-panel input.form-control,
.skd-system-tool-panel textarea.form-control,
.skd-operator-card input.form-control,
.skd-operator-card textarea.form-control,
.skd-tool-panel .skd-secret-detail-card input.form-control,
.skd-tool-panel .skd-secret-detail-card textarea.form-control {
  border: 1px solid var(--sn-stroke);
  background-color: var(--sn-button-4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
  font-weight: 400;
}
.skd-equipment-card select.form-select:hover:not(:disabled),
.skd-system-tool-panel select.form-select:hover:not(:disabled),
.skd-operator-card select.form-select:hover:not(:disabled),
.skd-tool-panel .skd-secret-detail-card select.form-select:hover:not(:disabled),
.skd-equipment-card input.form-control:hover:not(:disabled):not([readonly]),
.skd-system-tool-panel input.form-control:hover:not(:disabled):not([readonly]),
.skd-operator-card input.form-control:hover:not(:disabled):not([readonly]),
.skd-tool-panel .skd-secret-detail-card input.form-control:hover:not(:disabled):not([readonly]),
.skd-equipment-card textarea.form-control:hover:not(:disabled):not([readonly]),
.skd-system-tool-panel textarea.form-control:hover:not(:disabled):not([readonly]),
.skd-operator-card textarea.form-control:hover:not(:disabled):not([readonly]),
.skd-tool-panel .skd-secret-detail-card textarea.form-control:hover:not(:disabled):not([readonly]) {
  border-color: rgba(47, 71, 224, .32);
  background-color: rgba(255, 255, 255, .82);
}
.skd-equipment-card select.form-select:focus,
.skd-system-tool-panel select.form-select:focus,
.skd-operator-card select.form-select:focus,
.skd-tool-panel .skd-secret-detail-card select.form-select:focus,
.skd-equipment-card input.form-control:focus,
.skd-system-tool-panel input.form-control:focus,
.skd-operator-card input.form-control:focus,
.skd-tool-panel .skd-secret-detail-card input.form-control:focus,
.skd-equipment-card textarea.form-control:focus,
.skd-system-tool-panel textarea.form-control:focus,
.skd-operator-card textarea.form-control:focus,
.skd-tool-panel .skd-secret-detail-card textarea.form-control:focus {
  border-color: rgba(47, 71, 224, .45);
  box-shadow: 0 0 0 2px rgba(47, 71, 224, .12), inset 0 1px 0 rgba(255,255,255,.55);
}
.skd-equipment-card select.form-select:disabled,
.skd-system-tool-panel select.form-select:disabled,
.skd-operator-card select.form-select:disabled,
.skd-tool-panel .skd-secret-detail-card select.form-select:disabled,
.skd-equipment-card input.form-control:disabled,
.skd-equipment-card input.form-control[readonly],
.skd-system-tool-panel input.form-control:disabled,
.skd-system-tool-panel input.form-control[readonly],
.skd-operator-card input.form-control:disabled,
.skd-operator-card input.form-control[readonly],
.skd-tool-panel .skd-secret-detail-card input.form-control:disabled,
.skd-tool-panel .skd-secret-detail-card input.form-control[readonly],
.skd-equipment-card textarea.form-control:disabled,
.skd-equipment-card textarea.form-control[readonly],
.skd-system-tool-panel textarea.form-control:disabled,
.skd-system-tool-panel textarea.form-control[readonly],
.skd-operator-card textarea.form-control:disabled,
.skd-operator-card textarea.form-control[readonly],
.skd-tool-panel .skd-secret-detail-card textarea.form-control:disabled,
.skd-tool-panel .skd-secret-detail-card textarea.form-control[readonly] {
  background-color: rgba(245, 247, 251, .86);
  color: var(--sn-not-active);
  cursor: not-allowed;
  opacity: 1;
}
.skd-equipment-card .btn.btn-sm,
.skd-system-tool-panel .btn.btn-sm,
.skd-operator-card .btn.btn-sm,
.skd-tool-panel .skd-secret-detail-card .btn.btn-sm {
  min-height: 28px;
  height: 28px;
  padding: 0 9px;
  font-size: 12px;
  line-height: 28px;
  vertical-align: middle;
}
.skd-equipment-card .skd-acc-actions .btn.btn-sm,
.skd-system-tool-panel .skd-acc-actions .btn.btn-sm,
.skd-operator-card .skd-acc-actions .btn.btn-sm,
.skd-tool-panel .skd-secret-detail-card .skd-acc-actions .btn.btn-sm,
.skd-equipment-card .skd-tool-panel-actions .btn.btn-sm,
.skd-system-tool-panel .skd-tool-panel-actions .btn.btn-sm,
.skd-operator-card .skd-tool-panel-actions .btn.btn-sm {
  min-height: 36px;
  height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  line-height: 36px;
}
.skd-pin-clear-preview {
  width: 100%;
  min-height: 30px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 4px 11px;
  border: 1px solid rgba(214, 28, 28, 0.55);
  border-radius: 10px;
  background: rgba(214, 28, 28, 0.04);
  color: #b41717;
  font-size: 12px;
  line-height: 20px;
  font-weight: 400;
}


/* Dense runtime lists inside "Текущий доступ"; keep the broader panel tables unchanged. */
.skd-current-access-panel .skd-eq-table {
  margin-top: 6px;
}
.skd-current-access-panel .skd-eq-table td,
.skd-current-access-panel .skd-eq-table th {
  padding: 6px 10px;
  line-height: 1.25;
}
.skd-current-access-panel .skd-eq-table td:last-child {
  width: 1%;
  white-space: nowrap;
}
.skd-current-access-panel .skd-inline-add-btn,
.skd-sessions-list-table .skd-inline-add-btn {
  width: 24px;
  height: 24px;
  min-height: 24px;
  padding: 0;
}
.skd-current-access-panel .skd-inline-add-btn .skd-action-icon,
.skd-sessions-list-table .skd-inline-add-btn .skd-action-icon {
  width: 22px;
  height: 22px;
}
/* Кнопка действия строки не должна раздувать базовый ритм строк
 * (baseline = список «Операторы» над панелью): компенсируем высоту
 * кнопки уменьшенными вертикальными отступами ячейки действия. */
.skd-sessions-list-table td:last-child {
  padding-top: 7px;
  padding-bottom: 7px;
}

/* Journal event tables (JournalEventsPanel in all tools + Журналы list):
   shared density base = reference list rows (.skd-eq-table baseline,
   10px vertical padding, 12.5px text). Chips must not inflate the row. */
.skd-journal-table thead th {
  top: 0;
  vertical-align: middle;
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 1.35;
}
.skd-journal-table tbody td {
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 1.35;
}
.skd-journal-table .skd-chip {
  height: 24px;
  padding: 0 8px;
  font-size: 11.5px;
  line-height: 22px;
}
.skd-journal-table .skd-journal-ref-nav {
  width: 16px;
  height: 16px;
  font-size: 11px;
}
.skd-journal-table .skd-journal-refs-cell {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
  /* Chips are taller than the 17px text line; negative margins let them
     bleed into the cell padding so the 37px row rhythm is preserved. */
  margin: -4px 0;
}

/* «+N»-индикатор скрытых участников: компактная круглая кнопка в ритме чипов.
   При открытом поповере — активное (синее) состояние. */
.skd-journal-refs-more {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  min-width: 24px;
  padding: 0 7px;
  border: 1px solid rgba(120, 133, 149, 0.30);
  border-radius: 999px;
  background: rgba(247, 249, 255, 0.85);
  color: var(--sn-not-active);
  font-size: 11px;
  font-weight: 600;
  line-height: 22px;
  cursor: pointer;
}
.skd-journal-refs-more:hover {
  border-color: rgba(47, 71, 224, 0.35);
  background: rgba(47, 71, 224, 0.10);
  color: var(--sn-text);
}
.skd-journal-refs-more.is-open {
  border-color: rgba(47, 71, 224, 0.45);
  background: rgba(47, 71, 224, 0.14);
  color: rgb(33, 58, 185);
}

/* Поповер скрытых участников: портал в overlay-корне body (z-index 99997),
   раскладку таблицы не трогает. Координаты ставит JS (fixed, вправо от «+N»,
   при нехватке места — влево). Выглядит как продолжение ряда чипов:
   панельный фон, лёгкая рамка и тень по стайлкиту. */
.skd-journal-refs-popover-portal {
  position: fixed;
  inset: 0;
  z-index: 99997;
  pointer-events: none;
}
.skd-journal-refs-popover-overlay {
  position: fixed;
  inset: 0;
  z-index: 99998;
  background: transparent;
  pointer-events: auto;
}
.skd-journal-refs-popover {
  position: fixed;
  z-index: 99999;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  max-width: 520px;
  padding: 6px 8px;
  border: 1px solid var(--sn-stroke);
  border-radius: 14px;
  background: var(--skd-panel-bg, #ffffff);
  box-shadow: 0 12px 26px rgba(11, 34, 64, 0.16);
  pointer-events: auto;
}
/* Чипы в поповере — тот же ритм, что в ячейке журнала (24px, 11.5px). */
.skd-journal-refs-popover .skd-chip {
  height: 24px;
  padding: 0 8px;
  font-size: 11.5px;
  line-height: 22px;
}
.skd-journal-refs-popover .skd-journal-ref-nav {
  width: 16px;
  height: 16px;
  font-size: 11px;
}

/* Panel header typography */
.skd-panel-headrow {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 100%;
}

/* Panel-left menu icon (shown on narrow widths) */
.skd-panel-menu-btn {
  /* Match equipment "+" active button size/style */
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 999px;
  background: var(--sn-button-2); /* same as enabled "+" */
  border: 0;
  color: #ffffff;
  box-shadow: 0 10px 18px rgba(30, 30, 30, 0.14);
  display: none; /* only on narrow */
}
.skd-panel-menu-btn:hover {
  background: #151515;
}
.skd-panel-menu-spacer {
  width: 40px;
  height: 40px;
  display: none; /* only on narrow */
}
@media (max-width: 1080px) {
  .skd-panel-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .skd-panel-menu-spacer {
    display: inline-block;
  }
}
@media (min-width: 1081px) {
  /* Hard guarantee: header menu icon never shows on wide screens */
  .skd-panel-menu-btn,
  .skd-panel-menu-spacer {
    display: none !important;
  }
}

.skd-panel-menu-icon {
  width: 20px;
  height: 20px;
  display: block;
}

/* Ensure menu button stays dark even inside panel header btn overrides */
.skd-panel-header .skd-panel-menu-btn {
  background: var(--sn-button-2) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 18px rgba(30, 30, 30, 0.14) !important;
}
.skd-panel-header .skd-panel-menu-btn:hover {
  background: #151515 !important;
}

/* Tool menu dropdown (narrow width) */
.sn-tooldrop-backdrop {
  position: fixed;
  inset: 0;
  background: transparent;
  z-index: 99998;
}
.sn-tooldrop {
  position: fixed;
  z-index: 99999;
  padding: 6px;           /* narrower */
  border-radius: 14px;    /* slightly tighter */
  background: var(--sn-container);
  border: 1px solid var(--sn-stroke);
  box-shadow: 0 24px 70px rgba(11, 34, 64, 0.18);
  width: max-content;
  max-width: calc(100vw - 24px);
}
.sn-tooldrop-item {
  display: block;
  border: 0;
  border-radius: 14px;
  padding: 8px 10px; /* narrower items */
  background: transparent;
  color: var(--sn-text);
  text-align: left;
  white-space: nowrap; /* keep in one line */
  font-weight: 400;
}
.sn-tooldrop-item:hover {
  background: var(--sn-button-4);
}
.sn-tooldrop-item.active {
  background: var(--sn-button);
  color: #ffffff;
}
.sn-tooldrop-item:disabled {
  background: transparent;
  color: var(--sn-not-active);
}
.skd-panel-title {
  font-size: 16px; /* larger when opened */
  line-height: 20px;
  font-weight: 600;
  color: var(--sn-text);
  white-space: nowrap;
}
.skd-panel-subtitle {
  flex: 1 1 auto;
  min-width: 0;
  text-align: right; /* right side of header */
  font-size: 12px;
  line-height: 16px;
  font-weight: 400; /* regular */
  color: var(--sn-not-active);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Card header should match panel header look */
.skd-card-header {
  background: var(--sn-button-4);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--sn-stroke);
  height: var(--skd-header-h);
  padding: 0 10px;
  gap: 10px;
  border-top-left-radius: var(--skd-radius);
  border-top-right-radius: var(--skd-radius);
}
.skd-card-header .fw-semibold {
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  color: var(--sn-text);
  white-space: nowrap;
}
.skd-card-header .text-muted.small {
  flex: 1 1 auto;
  min-width: 0;
  text-align: right;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  color: var(--sn-not-active) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Card property tables: align tone and rhythm with Seenaptec tool panels. */
.skd-card .skd-prop-table:not(.skd-ao-bulk-table) {
  color: var(--sn-text);
  font-size: 13px;
  line-height: 16px;
}
.skd-card .skd-prop-table:not(.skd-ao-bulk-table) th {
  padding: 6px 8px;
  border-bottom-color: var(--sn-stroke);
  background: rgba(247, 249, 255, 0.72);
  color: var(--sn-not-active);
  font-weight: 600;
  line-height: 16px;
}
.skd-card .skd-prop-table:not(.skd-ao-bulk-table) td {
  padding: 5px 8px;
  border-bottom-color: var(--sn-stroke);
  color: var(--sn-text);
  line-height: 16px;
  vertical-align: middle;
}
.skd-card .skd-prop-table:not(.skd-ao-bulk-table) td:first-child {
  color: var(--sn-text);
  font-weight: 500;
}
.skd-card .skd-prop-table:not(.skd-ao-bulk-table) td:nth-child(2),
.skd-card .skd-prop-table:not(.skd-ao-bulk-table) td.text-muted {
  color: var(--sn-not-active) !important;
  font-weight: 400;
}
.skd-card .skd-prop-table:not(.skd-ao-bulk-table) td:nth-child(3) {
  color: var(--sn-text);
}
.skd-card .skd-card-group-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--sn-not-active);
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
}
.skd-card .skd-card-group-title-dot {
  font-size: 13px;
  line-height: 1;
  color: inherit;
  opacity: 0.82;
  transform: translateY(-1px);
}
.skd-card .skd-prop-table:not(.skd-ao-bulk-table) input.form-control-sm,
.skd-card .skd-prop-table:not(.skd-ao-bulk-table) select.form-select-sm {
  min-height: 30px;
  height: 30px;
  padding-top: 4px;
  padding-bottom: 4px;
  border-radius: 10px;
  color: var(--sn-text);
  font-size: 12px;
  line-height: 16px;
}
.skd-card .skd-prop-table:not(.skd-ao-bulk-table) select.form-select-sm {
  padding-right: 30px;
}
.skd-card .skd-prop-table:not(.skd-ao-bulk-table) .btn.btn-sm {
  min-height: 28px;
  height: 28px;
  padding: 0 9px;
  font-size: 12px;
  line-height: 28px;
  vertical-align: middle;
}
.skd-card .skd-prop-table:not(.skd-ao-bulk-table) .skd-inline-add-btn.btn.btn-sm.btn-outline-secondary {
  width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  flex: 0 0 28px !important;
  padding: 0 !important;
  line-height: 28px;
  box-shadow: 0 8px 16px rgba(11, 34, 64, 0.10);
}
.skd-card .skd-prop-table:not(.skd-ao-bulk-table) .skd-inline-add-btn .skd-action-icon {
  width: 16px !important;
  height: 16px !important;
}
.skd-card .skd-prop-table:not(.skd-ao-bulk-table) .skd-bind-picker-trigger.form-select.form-select-sm {
  min-height: 42px;
  height: auto;
  padding: 5px 9px;
}
.skd-card .skd-prop-table:not(.skd-ao-bulk-table) .skd-bind-picker-trigger-title {
  font-size: 12px;
  line-height: 15px;
}
.skd-card .skd-prop-table:not(.skd-ao-bulk-table) .skd-bind-picker-trigger-meta,
.skd-card .skd-prop-table:not(.skd-ao-bulk-table) .skd-bind-picker-trigger-placeholder {
  margin-top: 1px;
  color: var(--sn-not-active);
  font-size: 11px;
  line-height: 13px;
}

/* Pilot card post-overrides after the generic card table rules. */
.skd-line-card.skd-equipment-card .skd-prop-table:not(.skd-ao-bulk-table),
.skd-dev-card.skd-equipment-card .skd-prop-table:not(.skd-ao-bulk-table) {
  font-size: 12px;
  line-height: 16px;
}
.skd-line-card.skd-equipment-card .skd-prop-table:not(.skd-ao-bulk-table) th,
.skd-line-card.skd-equipment-card .skd-prop-table:not(.skd-ao-bulk-table) td,
.skd-dev-card.skd-equipment-card .skd-prop-table:not(.skd-ao-bulk-table) th,
.skd-dev-card.skd-equipment-card .skd-prop-table:not(.skd-ao-bulk-table) td {
  height: 40px;
  padding: 5px 8px;
  border-top: 0 !important;
  border-bottom: 0 !important;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  vertical-align: middle;
}
.skd-line-card.skd-equipment-card .skd-prop-table:not(.skd-ao-bulk-table) td:first-child,
.skd-dev-card.skd-equipment-card .skd-prop-table:not(.skd-ao-bulk-table) td:first-child {
  font-weight: 400;
}
.skd-line-card.skd-equipment-card .skd-prop-table:not(.skd-ao-bulk-table) select.form-select,
.skd-dev-card.skd-equipment-card .skd-prop-table:not(.skd-ao-bulk-table) select.form-select {
  border-radius: 999px;
  background-color: var(--sn-button-4);
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
}
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(47, 71, 224, 0.12);
}
.btn:disabled,
.btn.disabled {
  opacity: 1; /* keep designed colors, don't fade */
  cursor: not-allowed;
}

.btn:not(.btn-sm) {
  min-height: 48px; /* primary/secondary pill */
  padding: 0 22px;
  font-weight: 500;
}
.btn-sm {
  min-height: 36px; /* icon/small actions */
  padding: 0 12px;
  font-size: 13px;
  font-weight: 500;
}

.btn-primary {
  border: 0;
  background: var(--sn-button);
  box-shadow: 0 10px 18px rgba(47, 71, 224, 0.20);
  color: #ffffff;
}
.btn-primary:hover {
  background: var(--sn-button-hover);
}
.btn-outline-secondary {
  border: 0;
  background: var(--sn-button-3);
  color: var(--sn-not-active);
}
.btn-outline-secondary:hover {
  background: var(--sn-button-3);
  color: var(--sn-text);
}
.btn-outline-secondary:disabled,
.btn-outline-secondary.disabled {
  background: var(--sn-button-4);
  color: var(--sn-not-active);
}
.btn-primary:disabled,
.btn-primary.disabled {
  background: var(--sn-button-3);
  color: var(--sn-not-active);
  box-shadow: none;
}

.btn-danger {
  border: 0;
  background: var(--sn-danger);
  color: #ffffff;
  box-shadow: 0 10px 18px rgba(214, 28, 28, 0.18);
}
.btn-danger:hover {
  background: #B61515;
}
.btn-danger:disabled,
.btn-danger.disabled {
  background: var(--sn-button-3);
  color: var(--sn-not-active);
  box-shadow: none;
}

/* Firmware flash action (caution / pending): amber pill matching btn-danger shape */
.btn-flash {
  border: 0;
  background: var(--sn-warn);
  color: #1E1E1E;
  box-shadow: 0 10px 18px rgba(224, 168, 0, 0.18);
}
.btn-flash:hover {
  background: var(--sn-warn-hover);
}
.btn-flash:disabled,
.btn-flash.disabled {
  background: var(--sn-button-3);
  color: var(--sn-not-active);
  box-shadow: none;
}

/* Icon button in panel headers (round) */
.skd-panel-header .btn.btn-sm.btn-outline-secondary {
  width: 36px;
  height: 36px;
  padding: 0;
  background: var(--sn-button-4);
  color: var(--sn-text);
  border: 0;
  box-shadow: none;
}
.skd-panel-header .btn.btn-sm.btn-outline-secondary:hover {
  background: var(--sn-button-3);
}

/* Panel pin/unpin button uses the same icon asset as closed state, but highlighted.
 * Принятый вид — исторический вид кнопки на панели ОД: фон/рамку/тень задаёт
 * более специфичный общий стиль круглых кнопок заголовка
 * (.skd-panel-header .btn.btn-sm.btn-outline-secondary выше), кнопка визуально
 * сливается с шапкой — это ожидаемо и единообразно для всех панелей. */
.skd-panel-header .skd-panel-pin-btn {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(47, 71, 224, 0.30);
  background: rgba(47, 71, 224, 0.18);
  box-shadow:
    0 14px 26px rgba(11, 34, 64, 0.14),
    0 0 0 2px rgba(47, 71, 224, 0.22);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.skd-panel-header .skd-panel-pin-btn .skd-action-icon {
  width: 22px;
  height: 22px;
  display: block;
  object-fit: contain;
}
.skd-panel-header .skd-panel-pin-btn:hover {
  background: rgba(47, 71, 224, 0.22);
}
/* Кнопка «вернуться назад» в шапке основной панели (после программного
 * перехода между инструментами): вид кнопки закрытия карточки — общие
 * правила panel-pin-btn, здесь только разворот иконки «влево». */
.skd-tool-return-btn .skd-action-icon {
  transform: rotate(-90deg);
}

/* Заголовок открытой панели с кнопкой сворачивания: кликабелен целиком
 * (свободная область схлопывает панель), курсор подсказывает поведение. */
.skd-panel-header.skd-panel-header-collapsible {
  cursor: pointer;
}
/* Панель с выехавшей вправо карточкой (skd-events-expanded, включая фазы
 * is-opening/is-closing): правое muted-описание и кнопка схлопывания шапки
 * скрыты на время выезда; после закрытия карточки возвращаются. */
.skd-panel.skd-events-expanded > .skd-panel-header .skd-panel-subtitle,
.skd-panel.skd-events-expanded > .skd-panel-header .skd-panel-pin-btn {
  display: none;
}
/* Шапка выехавшей карточки закрывает карточку кликом целиком (как notch). */
.skd-event-overlay-head {
  cursor: pointer;
}

/* Panel open/close animation */
.skd-panel.skd-panel-enter {
  animation: skdPanelIn 180ms ease-out both;
}
.skd-panel.skd-panel-exit {
  animation: skdPanelOut 160ms ease-in both;
}
@keyframes skdPanelIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes skdPanelOut {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(6px); }
}

/* Closed panels (Zone3): match icon button style */
.skd-closed-item .skd-closed-pin-btn.btn.btn-sm.btn-outline-secondary {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 999px;
  background: var(--sn-button-4);
  border: 1px solid rgba(230, 236, 245, 1);
  box-shadow: 0 10px 18px rgba(11, 34, 64, 0.10);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.skd-closed-item .skd-closed-pin-btn .skd-action-icon {
  width: 22px;
  height: 22px;
  display: block;
  object-fit: contain;
}
.skd-closed-item .skd-closed-pin-btn.btn.btn-sm.btn-outline-secondary:hover {
  background: var(--sn-button-3);
  border-color: rgba(47, 71, 224, 0.22);
}

/* Floating notch actions: compact pills */
.skd-actions-notch {
  /* Make the button area more transparent (Seenaptec-like) */
  background: rgba(247, 249, 255, 0.34); /* Button 4 with alpha (more visible) */
  border-color: rgba(230, 236, 245, 0.45); /* Stroke with alpha (more visible) */
  backdrop-filter: blur(10px);
}

/* ---- Equipment multi-filter combobox (match AO filter look) ---- */
.skd-filter-strip {
  position: relative;
  min-width: 0;
  flex: 1 1 auto;
  overflow-x: hidden;
  overflow-y: hidden;
}
.skd-filter-strip-viewport {
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 0 18px 220px 18px;
  margin: 0 0 -220px;
}
.skd-filter-strip-viewport::-webkit-scrollbar {
  display: none;
}
.skd-filter-strip-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  min-width: 100%;
}
.skd-filter-strip-marker {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  pointer-events: auto;
  color: var(--sn-not-active);
  font-size: 18px;
  line-height: 1;
  border: 0;
  border-radius: 999px;
  padding: 0;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(11, 34, 64, 0.10);
}
.skd-filter-strip-marker-left {
  left: 0;
  background: linear-gradient(to right, rgba(247, 249, 255, 0.98), rgba(247, 249, 255, 0.82));
}
.skd-filter-strip-marker-right {
  right: 0;
  background: linear-gradient(to left, rgba(247, 249, 255, 0.98), rgba(247, 249, 255, 0.82));
}
.skd-filter-strip-marker:hover {
  color: var(--sn-text);
}
.skd-filter-strip-marker:focus-visible {
  outline: none;
  box-shadow:
    0 10px 22px rgba(11, 34, 64, 0.14),
    0 0 0 2px rgba(47, 71, 224, 0.14);
}
.skd-filter-dd {
  display: inline-block;
}
.skd-filter-combo.form-select.form-select-sm {
  /* Make button look like select (AO filters) */
  width: auto;
  max-width: 180px; /* keep header in one row */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  user-select: none;
  background-color: var(--sn-button-4);
  border-color: var(--sn-stroke);
  color: var(--sn-text);
  font-size: 13px;
  line-height: 16px;
  padding-right: 34px; /* keep space for caret */
}
.skd-filter-text.form-control.form-control-sm {
  width: auto;
  min-width: 120px;
  max-width: 180px;
  box-sizing: border-box;
  background-color: var(--sn-button-4);
  border-color: var(--sn-stroke);
  color: var(--sn-text);
  font-size: 13px;
  line-height: 16px;
}
.skd-filter-combo.form-select.form-select-sm:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(47, 71, 224, 0.18);
}
/* Круглая иконочная кнопка обновления журнала (строка фильтров «Журналов»):
 * принятый паттерн круглых кнопок (inline-add/notch), размер — под высоту
 * строки фильтров (form-control-sm). */
.skd-journal-refresh-btn {
  width: 32px;
  height: 32px;
  min-height: 32px;
  flex: 0 0 32px;
  padding: 0;
  border: 1px solid rgba(230, 236, 245, 1);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--sn-button-4);
  box-shadow: 0 6px 14px rgba(11, 34, 64, 0.10);
  cursor: pointer;
}
.skd-journal-refresh-btn:hover {
  background: var(--sn-button-3);
  border-color: rgba(47, 71, 224, 0.22);
}
.skd-journal-refresh-btn .skd-action-icon {
  /* viewBox restart.svg обрезан по внешнему краю обода: иконка занимает
   * кнопку целиком, её жёлтый обод идёт вдоль границы кнопки. */
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
.skd-filter-menu.dropdown-menu {
  min-width: 200px;
  overflow: hidden; /* body scrolls, footer stays visible */
  padding: 8px;
  border-radius: 14px;
  border: 1px solid var(--sn-stroke);
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}
.skd-filter-overlay {
  position: fixed;
  inset: 0;
  /* Must sit above page content, but below the open menu (z-index:20). */
  z-index: 19;
  background: transparent;
}
.skd-filter-menu-head {
  position: relative;
  z-index: 1;
  font-size: 12px;
  color: var(--sn-not-active);
  margin-bottom: 8px;
}
.skd-filter-menu-body {
  position: relative;
  z-index: 1;
  overflow: auto;
  padding-right: 4px;
  margin-bottom: 8px; /* small air before actions */
}
.skd-filter-menu .form-check-label {
  font-size: 13px;
  color: var(--sn-text);
}

/* Full-width sticky actions (no pill) */
.skd-filter-menu-actions {
  /* Footer inside dropdown (not overlaying body content) */
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 14px;
  padding: 10px 0 8px;
  margin: 0 -8px; /* extend to menu edges (menu has 8px padding) */
  background: linear-gradient(to top, rgba(247, 249, 255, 0.92), rgba(247, 249, 255, 0.55));
  border-top: 1px solid rgba(230, 236, 245, 0.55);
  backdrop-filter: blur(10px);
}

.skd-filter-action-btn.btn.btn-sm {
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--sn-button-3);
  border: 1px solid rgba(230, 236, 245, 1);
  box-shadow: 0 12px 22px rgba(11, 34, 64, 0.12);
}
.skd-filter-action-icon {
  width: 34px;
  height: 34px;
}
/* cancel.png has a white canvas; blend it into background */
.skd-filter-action-icon-cancel {
  mix-blend-mode: multiply;
}
.skd-filter-action-btn.btn.btn-sm:hover {
  background: var(--sn-button-4);
  border-color: rgba(47, 71, 224, 0.22);
  box-shadow:
    0 14px 26px rgba(11, 34, 64, 0.14),
    0 0 0 2px rgba(47, 71, 224, 0.10);
}
.skd-filter-action-btn-primary.btn.btn-sm {
  background: rgba(47, 71, 224, 0.18);
  border-color: rgba(47, 71, 224, 0.30);
}
.skd-filter-action-btn-primary.btn.btn-sm:hover {
  background: rgba(47, 71, 224, 0.22);
  border-color: rgba(47, 71, 224, 0.34);
}

/* Global icon sizing (overridden in specific contexts when needed) */
.skd-action-icon {
  width: 18px;
  height: 18px;
  display: block;
  object-fit: contain;
}
.skd-actions-notch .skd-action-icon {
  opacity: 0.92;
}
.skd-actions-notch .skd-action-icon.skd-action-icon-eq-bulk-ao {
  width: 30px;
  height: 30px;
}
.skd-actions-notch .btn.btn-sm:disabled .skd-action-icon,
.skd-actions-notch .btn.btn-sm.disabled .skd-action-icon {
  opacity: 0.35;
  filter: grayscale(1);
}

/* Inline add button (used in passport/vendor/model dictionary add) */
.skd-inline-add-btn.btn.btn-sm.btn-outline-secondary {
  width: 40px !important;
  height: 40px !important;
  min-height: 40px;
  aspect-ratio: 1 / 1;
  flex: 0 0 40px;
  padding: 0 !important;
  border-radius: 999px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--sn-button-3);
  border: 1px solid rgba(230, 236, 245, 1);
  box-shadow: 0 12px 22px rgba(11, 34, 64, 0.12);
  color: var(--sn-text);
}
.skd-inline-add-btn.btn.btn-sm.btn-outline-secondary:hover {
  background: var(--sn-button-4);
  border-color: rgba(47, 71, 224, 0.22);
  box-shadow:
    0 14px 26px rgba(11, 34, 64, 0.14),
    0 0 0 2px rgba(47, 71, 224, 0.10);
}
.skd-inline-add-btn.btn.btn-sm.btn-outline-secondary:disabled,
.skd-inline-add-btn.btn.btn-sm.btn-outline-secondary.disabled {
  background: rgba(247, 249, 255, 0.55);
  border-color: rgba(230, 236, 245, 0.55);
  box-shadow: none;
}
.skd-inline-add-btn.btn.btn-sm.btn-outline-secondary:disabled .skd-action-icon,
.skd-inline-add-btn.btn.btn-sm.btn-outline-secondary.disabled .skd-action-icon {
  opacity: 0.35;
  filter: grayscale(1);
}
.skd-inline-add-btn .skd-action-icon {
  width: 22px;
  height: 22px;
  display: block;
  object-fit: contain;
}
.skd-inline-add-btn.skd-inline-add-btn--secret.btn.btn-sm.btn-outline-secondary {
  width: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  flex: 0 0 28px !important;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  padding: 0 !important;
  border-radius: 999px !important;
  line-height: 28px;
  vertical-align: middle;
  box-shadow: 0 8px 16px rgba(11, 34, 64, 0.10) !important;
}
.skd-inline-add-btn.skd-inline-add-btn--secret .skd-action-icon {
  width: 16px !important;
  height: 16px !important;
}
.skd-inline-secret-popover {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  z-index: 30;
  width: min(440px, calc(100vw - 40px));
}
.skd-inline-secret-card {
  border: 1px solid var(--sn-stroke);
  border-radius: 18px;
  background: var(--sn-container);
  box-shadow: 0 24px 64px rgba(11, 34, 64, 0.18);
  padding: 16px;
}
.skd-inline-secret-card::before {
  content: "";
  position: absolute;
  right: 14px;
  top: -8px;
  width: 16px;
  height: 16px;
  transform: rotate(45deg);
  border-left: 1px solid var(--sn-stroke);
  border-top: 1px solid var(--sn-stroke);
  background: var(--sn-container);
}
.skd-inline-secret-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.skd-inline-secret-card .skd-tool-field-row,
.skd-inline-secret-card .alert,
.skd-inline-secret-card > .text-muted {
  position: relative;
  z-index: 1;
}
.skd-inline-secret-actions {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
}
/* Upward-anchored variant: opens ABOVE a low trigger and fills the panel
   width so the card never overflows the bottom of the panel nor extends past
   its left edge. */
.skd-inline-secret-popover--up {
  top: auto;
  bottom: calc(100% + 10px);
  left: 0;
  right: 0;
  width: auto;
}
.skd-inline-secret-popover--up .skd-inline-secret-card::before {
  top: auto;
  bottom: -8px;
  border-left: none;
  border-top: none;
  border-right: 1px solid var(--sn-stroke);
  border-bottom: 1px solid var(--sn-stroke);
}
.skd-positioned-secret-popover,
.skd-card-key-secret-popover {
  z-index: 140;
  pointer-events: auto;
}
.skd-positioned-secret-popover .skd-inline-secret-card::before,
.skd-card-key-secret-popover .skd-inline-secret-card::before {
  left: var(--skd-inline-secret-arrow-left, auto);
  right: var(--skd-inline-secret-arrow-right, 14px);
}
.skd-positioned-secret-popover.skd-inline-secret-popover--up,
.skd-card-key-secret-popover.skd-inline-secret-popover--up {
  left: auto;
  right: 0;
  width: min(440px, calc(100vw - 40px));
}
.skd-condition-add-popover {
  left: 0;
  right: auto;
  z-index: 120;
  width: min(520px, 100%);
  pointer-events: auto;
}
.skd-condition-add-popover--down {
  top: calc(100% + 12px);
  bottom: auto;
}
.skd-condition-add-popover--up {
  top: auto;
  bottom: calc(100% + 12px);
}
.skd-condition-add-popover .skd-inline-secret-card {
  position: relative;
  background: #fff;
  isolation: isolate;
  max-height: inherit;
  overflow: auto;
}
.skd-condition-add-popover .skd-inline-secret-card::before {
  left: 14px;
  right: auto;
  background: #fff;
}
.skd-condition-add-popover--up .skd-inline-secret-card::before {
  top: auto;
  bottom: -8px;
  border-left: none;
  border-top: none;
  border-right: 1px solid var(--sn-stroke);
  border-bottom: 1px solid var(--sn-stroke);
}
.skd-actions-notch .btn.btn-sm {
  width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  border-radius: 999px;
  font-size: 18px;
  line-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Notch actions: light buttons in all states */
.skd-actions-notch .btn.btn-sm:not(:disabled):not(.disabled) {
  background: var(--sn-button-3);           /* #EAEDFA (more contrast than button-4) */
  border: 1px solid rgba(230, 236, 245, 1);
  box-shadow: 0 12px 22px rgba(11, 34, 64, 0.12);
  color: var(--sn-text);
}
.skd-actions-notch .btn.btn-sm:not(:disabled):not(.disabled):hover {
  background: var(--sn-button-4);           /* #F7F9FF */
  border-color: rgba(47, 71, 224, 0.22);
  box-shadow:
    0 14px 26px rgba(11, 34, 64, 0.14),
    0 0 0 2px rgba(47, 71, 224, 0.10);
}
.skd-actions-notch .btn.btn-sm:disabled,
.skd-actions-notch .btn.btn-sm.disabled {
  background: rgba(247, 249, 255, 0.55);
  border: 1px solid rgba(230, 236, 245, 0.55);
  box-shadow: none;
}

/* Active state (e.g. selection mode): subtle Seenaptec accent highlight */
.skd-actions-notch .btn.btn-sm.skd-act-active:not(:disabled):not(.disabled),
.skd-actions-notch .btn.btn-sm.skd-act-active:not(:disabled):not(.disabled):hover {
  /* Selected: soft accent highlight */
  background: rgba(47, 71, 224, 0.18);
  border-color: rgba(47, 71, 224, 0.30);
  color: var(--sn-text);
  box-shadow:
    0 14px 26px rgba(11, 34, 64, 0.14),
    0 0 0 2px rgba(47, 71, 224, 0.22);
}

/* Danger button stays light (icon is red anyway) */
.skd-actions-notch .btn.btn-sm.btn-danger:not(:disabled):not(.disabled) {
  border-color: rgba(214, 28, 28, 0.22);
}
.skd-actions-notch .btn.btn-sm.btn-danger:not(:disabled):not(.disabled):hover {
  border-color: rgba(214, 28, 28, 0.30);
}

/* Runtime service actions in controller card: same round icon language as panel actions */
#skd-ctrl-sec-services .skd-card-section-cols > div:last-child {
  width: 116px !important;
  flex: 0 0 116px;
  text-align: center;
}
#skd-ctrl-sec-services .skd-prop-table td:last-child {
  width: 1% !important;
  white-space: nowrap;
  text-align: center;
}
#skd-ctrl-sec-services .skd-runtime-actions {
  flex-wrap: nowrap;
  justify-content: center;
}
.skd-runtime-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.skd-runtime-actions .btn.btn-sm {
  width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  border-radius: 999px;
  line-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.skd-runtime-actions .btn.btn-sm:not(:disabled):not(.disabled) {
  background: var(--sn-button-3);
  border: 1px solid rgba(230, 236, 245, 1);
  box-shadow: 0 12px 22px rgba(11, 34, 64, 0.12);
  color: var(--sn-text);
}
.skd-runtime-actions .btn.btn-sm:not(:disabled):not(.disabled):hover {
  background: var(--sn-button-4);
  border-color: rgba(47, 71, 224, 0.22);
  box-shadow:
    0 14px 26px rgba(11, 34, 64, 0.14),
    0 0 0 2px rgba(47, 71, 224, 0.10);
}
.skd-runtime-actions .btn.btn-sm:disabled,
.skd-runtime-actions .btn.btn-sm.disabled {
  background: rgba(247, 249, 255, 0.55);
  border: 1px solid rgba(230, 236, 245, 0.55);
  box-shadow: none;
}
.skd-runtime-actions .btn.btn-sm.skd-act-active:not(:disabled):not(.disabled),
.skd-runtime-actions .btn.btn-sm.skd-act-active:not(:disabled):not(.disabled):hover {
  background: rgba(47, 71, 224, 0.18);
  border-color: rgba(47, 71, 224, 0.30);
  color: var(--sn-text);
  box-shadow:
    0 14px 26px rgba(11, 34, 64, 0.14),
    0 0 0 2px rgba(47, 71, 224, 0.22);
}
.skd-runtime-actions .btn.btn-sm.btn-danger:not(:disabled):not(.disabled) {
  border-color: rgba(214, 28, 28, 0.22);
}
.skd-runtime-actions .btn.btn-sm.btn-danger:not(:disabled):not(.disabled):hover {
  border-color: rgba(214, 28, 28, 0.30);
}
.skd-runtime-actions .skd-action-icon {
  width: 22px;
  height: 22px;
  display: block;
  object-fit: contain;
  opacity: 0.92;
}
.skd-runtime-actions .skd-action-icon.skd-action-icon-restart {
  width: 46px !important;
  height: 46px !important;
  opacity: 0.82;
  filter: saturate(0.94) contrast(0.92);
}
.skd-runtime-actions .skd-action-icon.is-spinning {
  animation: skdRuntimeActionSpin 900ms linear infinite;
  transform-origin: center;
}
.skd-runtime-actions .skd-action-icon.is-pulsing {
  animation: skdRuntimeActionPulse 1100ms ease-in-out infinite;
  transform-origin: center;
}
.skd-runtime-actions .btn.btn-sm:disabled .skd-action-icon,
.skd-runtime-actions .btn.btn-sm.disabled .skd-action-icon {
  opacity: 0.35;
  filter: grayscale(1);
}
@keyframes skdRuntimeActionSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes skdRuntimeActionPulse {
  0% { transform: scale(1); opacity: 0.88; }
  50% { transform: scale(1.14); opacity: 1; }
  100% { transform: scale(1); opacity: 0.88; }
}

/* ---- Badges ---- */
.skd-rule-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  white-space: nowrap;
}
.skd-rule-badge-apb {
  border-color: rgba(217, 119, 6, 0.32);
  background: rgba(217, 119, 6, 0.10);
  color: #9a4e00;
}
.skd-rule-badge-condition {
  border-color: rgba(196, 138, 0, 0.32);
  background: rgba(255, 214, 102, 0.24);
  color: #7a5a00;
}
.skd-rule-badge-quota {
  border-color: rgba(47, 71, 224, 0.30);
  background: rgba(47, 71, 224, 0.10);
  color: #2b3fae;
}

.skd-badge-ok {
  border-color: rgba(19, 145, 17, 0.35); /* Accent (#139111) */
  background: rgba(19, 145, 17, 0.10);
}
.skd-badge-err {
  border-color: rgba(214, 28, 28, 0.30); /* Accent 2 (#D61C1C) */
  background: rgba(214, 28, 28, 0.10);
}

/* ---- Modal (Seenaptec dialog style) ---- */
.skd-debug-log-list {
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.skd-debug-log-row {
  color: var(--sn-text);
  border-left: 3px solid transparent;
  padding: 2px 0 2px 8px;
  white-space: pre;
  word-break: normal;
  overflow-wrap: normal;
  width: max-content;
  min-width: 100%;
  cursor: pointer;
}
.skd-debug-log-row.is-wrap {
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  width: auto;
  min-width: 0;
}
.skd-debug-log-row:hover {
  background: rgba(11, 34, 64, 0.04);
  border-radius: 8px;
}
.skd-debug-log-row.is-warn:hover,
.skd-debug-log-row.is-error:hover {
  filter: brightness(0.98);
}
.skd-debug-log-row.is-warn {
  color: #8a5a00;
  background: rgba(217, 119, 6, 0.08);
  border-left-color: rgba(217, 119, 6, 0.55);
  border-radius: 8px;
}
.skd-debug-log-row.is-error {
  color: #991b1b;
  background: rgba(220, 38, 38, 0.08);
  border-left-color: rgba(220, 38, 38, 0.55);
  border-radius: 8px;
}
.skd-debug-log-prefix {
  color: var(--sn-text-muted, #6b7280);
}

/* ---- Modal (Seenaptec dialog style) ---- */
.skd-modal-backdrop {
  background: rgba(11, 34, 64, 0.40);
  backdrop-filter: blur(2px);
  /* Let dialog grow downward first, then shift up via margin-top */
  align-items: flex-start;
  padding: 16px;
}
.skd-modal-card {
  /* Slightly narrower to match reference proportions */
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  border: 1px solid var(--sn-stroke);
  border-radius: 20px;
  box-shadow: 0 24px 70px rgba(11, 34, 64, 0.20);
  overflow: hidden; /* header/actions separators stay clean */
}
.skd-modal-head {
  padding: 20px 22px;
  border-bottom: 1px solid var(--sn-stroke);
}
.skd-modal-head .fw-semibold {
  font-size: 20px;
  line-height: 26px;
  font-weight: 600;
  color: var(--sn-text);
}
.skd-modal-head .text-muted {
  color: var(--sn-not-active) !important;
}
.skd-pass-editor-modal .skd-modal-body .fw-semibold {
  color: var(--sn-not-active);
  font-size: 12px;
  line-height: 16px;
  font-weight: 400 !important;
}
/* Close "×" button: round, icon-like */
.skd-modal-close,
.skd-modal-head .btn-outline-secondary {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--sn-not-active);
  font-size: 24px;
  line-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.skd-modal-close:hover,
.skd-modal-head .btn-outline-secondary:hover {
  background: var(--sn-button-3);
  color: var(--sn-text);
}
.skd-modal-close:focus-visible,
.skd-modal-head .btn-outline-secondary:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 4px rgba(47, 71, 224, 0.10);
}

.skd-modal-body {
  padding: 18px 22px;
}
.skd-modal-body .form-label {
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--sn-not-active) !important;
}
.skd-modal-card .form-control {
  border-radius: 14px !important;
  border: 1px solid var(--sn-button-3) !important;
  background: var(--sn-container) !important;
  padding: 12px 14px;
  box-shadow: none !important;
}
.skd-modal-card .form-control:focus {
  border-color: rgba(47, 71, 224, 0.38) !important;
  box-shadow: 0 0 0 4px rgba(47, 71, 224, 0.10) !important;
}
.skd-add-line-modal {
  width: min(620px, calc(100vw - 32px));
}
.skd-ssb-search-modal {
  width: min(860px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.skd-ssb-search-modal .skd-modal-head,
.skd-ssb-search-modal .skd-modal-actions {
  flex: 0 0 auto;
}
.skd-ssb-search-modal .skd-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.skd-ssb-fixed-top {
  flex: 0 0 auto;
  min-height: 0;
}
.skd-ssb-scroll-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
}
.skd-ssb-search-top {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) auto;
  gap: 12px;
  align-items: end;
  margin-bottom: 14px;
}
.skd-ssb-search-top select.form-select.form-select-sm {
  -webkit-appearance: none;
  appearance: none;
  min-height: 30px;
  height: 30px;
  padding: 4px 30px 4px 11px;
  border: 1px solid var(--sn-stroke);
  border-radius: 999px;
  background-color: var(--sn-button-4);
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' fill='none' stroke='%23788595' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
  color: var(--sn-text);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
}
.skd-ssb-search-top select.form-select.form-select-sm:hover:not(:disabled) {
  border-color: rgba(47, 71, 224, .32);
  background-color: rgba(255, 255, 255, .82);
}
.skd-ssb-search-top select.form-select.form-select-sm:focus {
  border-color: rgba(47, 71, 224, .45);
  box-shadow: 0 0 0 2px rgba(47, 71, 224, .12), inset 0 1px 0 rgba(255,255,255,.55);
}
.skd-ssb-search-top select.form-select.form-select-sm:disabled {
  background-color: rgba(245, 247, 251, .86);
  color: var(--sn-not-active);
  cursor: not-allowed;
  opacity: 1;
}
.skd-ssb-search-btn {
  min-width: 112px;
}
.skd-ssb-progress {
  border: 1px solid var(--sn-stroke);
  border-radius: 14px;
  background: rgba(247, 249, 255, 0.78);
  padding: 10px 12px;
  margin-bottom: 12px;
}
.skd-ssb-progress-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.skd-ssb-progress-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--sn-text);
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
}
.skd-ssb-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(47, 71, 224, 0.18);
  border-top-color: var(--sn-button-1);
  border-radius: 999px;
  animation: skd-ssb-spin 0.8s linear infinite;
}
@keyframes skd-ssb-spin {
  to { transform: rotate(360deg); }
}
.skd-ssb-progress-bar {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(220, 226, 238, 0.86);
}
.skd-ssb-progress-fill {
  height: 100%;
  border-radius: inherit;
  background: var(--sn-button-1);
  transition: width 180ms ease;
}
.skd-ssb-block {
  border: 1px solid var(--sn-stroke);
  border-radius: 14px;
  background: rgba(255,255,255,.64);
  padding: 12px;
  margin-top: 12px;
}
.skd-ssb-block-title {
  color: var(--sn-text);
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
  margin-bottom: 10px;
}
.skd-ssb-search-modal .skd-ssb-found-block {
  flex: 0 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin-top: 0;
}
.skd-ssb-table-wrap {
  min-height: 0;
  max-height: none;
  overflow-x: auto;
  overflow-y: visible;
  border: 1px solid var(--sn-stroke);
  border-radius: 10px;
  background: rgba(255,255,255,.55);
}
.skd-ssb-found-table.skd-prop-table {
  min-width: 720px;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}
.skd-ssb-found-table.skd-prop-table th,
.skd-ssb-found-table.skd-prop-table td {
  padding: 4px 6px;
  color: var(--sn-text);
  font-size: 12px;
  line-height: 16px;
  vertical-align: middle;
}
.skd-ssb-found-table.skd-prop-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgba(247, 249, 255, 0.72);
  border-bottom: 1px solid var(--sn-stroke);
  color: var(--sn-not-active);
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}
.skd-ssb-found-table.skd-prop-table td {
  height: 32px;
  border-top: 1px solid var(--sn-stroke);
  overflow-wrap: anywhere;
}
.skd-ssb-found-table.skd-prop-table tbody tr:first-child td {
  border-top: 0;
}
.skd-ssb-found-table.skd-prop-table td:first-child {
  text-align: center;
}
.skd-ssb-found-table.skd-prop-table tbody tr.is-rejected td {
  background: rgba(185, 74, 72, 0.09);
  color: #8f6665;
}
.skd-ssb-options-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}
.skd-ssb-options-row .skd-ssb-block {
  min-width: 0;
  margin-top: 12px;
}
@media (max-width: 760px) {
  .skd-ssb-options-row {
    grid-template-columns: 1fr;
  }
}
.skd-ssb-found-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.skd-ssb-found-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border: 1px solid rgba(230, 236, 245, 0.95);
  border-radius: 12px;
  background: var(--sn-container);
  padding: 10px;
}
.skd-ssb-row-delete {
  width: 22px;
  height: 22px;
  min-height: 22px;
  flex: 0 0 22px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--sn-danger);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
}
.skd-ssb-row-delete:hover {
  background: rgba(214, 28, 28, 0.08);
}
.skd-ssb-row-delete.is-restore {
  color: var(--sn-button-1);
  font-size: 17px;
}
.skd-ssb-row-delete.is-restore:hover {
  background: rgba(47, 71, 224, 0.08);
}
.skd-ssb-row-delete:disabled {
  color: var(--sn-not-active);
}
.skd-ssb-found-main {
  min-width: 0;
  flex: 1 1 auto;
}
.skd-ssb-found-title {
  color: var(--sn-text);
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
}
.skd-ssb-empty {
  padding: 6px 0;
}
.skd-ssb-template-group {
  background: var(--sn-container);
}
.skd-ssb-trace {
  margin-top: 12px;
  border: 1px solid var(--sn-stroke);
  border-radius: 14px;
  background: rgba(247, 249, 255, 0.78);
  padding: 10px 12px;
}
.skd-ssb-trace summary {
  cursor: pointer;
  color: var(--sn-text);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  user-select: none;
}
.skd-ssb-trace pre {
  max-height: 180px;
  margin: 8px 0 0;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--sn-not-active);
  font-size: 11px;
  line-height: 15px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}
.skd-add-line-modal .skd-line-endpoint-col {
  min-width: 0;
}
.skd-tcp-endpoint {
  display: inline-flex;
  align-items: center;
  width: 100%;
  max-width: 206px;
  height: 30px;
  min-height: 30px;
  overflow: hidden;
  border: 1px solid var(--sn-stroke);
  border-radius: 999px;
  background: var(--sn-button-4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
}
.skd-tcp-endpoint.is-ip-only {
  max-width: 148px;
}
.skd-tcp-endpoint.is-compact {
  max-width: 176px;
  height: 28px;
  min-height: 28px;
}
.skd-tcp-endpoint.is-ip-only.is-compact {
  max-width: 134px;
}
.skd-tcp-endpoint:focus-within {
  border-color: rgba(47, 71, 224, .45);
  box-shadow: 0 0 0 2px rgba(47, 71, 224, .12), inset 0 1px 0 rgba(255,255,255,.55);
}
.skd-tcp-endpoint.is-disabled {
  background: rgba(245, 247, 251, .86);
  color: var(--sn-not-active);
  cursor: not-allowed;
}
.skd-tcp-endpoint-segment {
  flex: 0 0 32px;
  width: 32px;
  min-width: 0;
  height: 28px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--sn-text);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
  text-align: center;
  padding: 0;
}
.skd-tcp-endpoint.is-compact .skd-tcp-endpoint-segment {
  flex-basis: 29px;
  width: 29px;
  height: 26px;
}
.skd-tcp-endpoint-segment.is-port {
  flex-basis: 50px;
  width: 50px;
}
.skd-tcp-endpoint.is-compact .skd-tcp-endpoint-segment.is-port {
  flex-basis: 45px;
  width: 45px;
}
.skd-tcp-endpoint-segment:focus {
  outline: 0;
  box-shadow: none;
}
.skd-tcp-endpoint-segment::placeholder {
  color: rgba(120, 133, 149, .58);
}
.skd-tcp-endpoint-segment:disabled {
  color: var(--sn-not-active);
  cursor: not-allowed;
}
.skd-tcp-endpoint-separator {
  flex: 0 0 5px;
  width: 5px;
  color: rgba(120, 133, 149, .72);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  text-align: center;
  user-select: none;
}
.skd-tcp-endpoint.is-compact .skd-tcp-endpoint-separator {
  flex-basis: 4px;
  width: 4px;
}
.skd-tcp-endpoint-separator.is-port {
  flex-basis: 8px;
  width: 8px;
}
.skd-tcp-endpoint.is-compact .skd-tcp-endpoint-separator.is-port {
  flex-basis: 6px;
  width: 6px;
}
.skd-modal-card .alert {
  border-radius: 14px;
}

.skd-modal-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  padding: 18px 22px 22px;
  border-top: 0;
  gap: 14px;
}
.skd-modal-actions .btn {
  height: 48px;
  border-radius: 999px;
  padding: 0 22px;
  font-weight: 500;
}
.skd-modal-actions .btn-outline-secondary {
  border: 0;
  background: var(--sn-button-3);
  color: var(--sn-not-active);
}
.skd-modal-actions .btn-outline-secondary:hover {
  background: var(--sn-button-3);
  color: var(--sn-text);
}
.skd-modal-actions .btn-primary {
  box-shadow: 0 14px 26px rgba(47, 71, 224, 0.22);
}

/* ---- Typography helpers ---- */
.text-muted {
  color: var(--sn-not-active) !important;
}

/* ---- Inputs & selects (global) ---- */
.form-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--sn-not-active);
}
.form-control,
.form-select {
  min-height: 44px;
  border-radius: 14px;
  border: 1px solid var(--sn-button-3);
  background: var(--sn-container);
  color: var(--sn-text);
  box-shadow: none;
  padding: 10px 14px;
}
.form-control::placeholder {
  color: var(--sn-not-active);
  opacity: 0.8;
}
.form-control:focus,
.form-select:focus {
  border-color: rgba(47, 71, 224, 0.38);
  box-shadow: 0 0 0 4px rgba(47, 71, 224, 0.10);
}
.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
  background: var(--sn-button-4);
  border-color: var(--sn-stroke);
  color: var(--sn-not-active);
}
.form-control-sm,
.form-select-sm {
  min-height: 36px;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 13px;
}

/* ---- Select dropdowns / menus ---- */
.dropdown-menu {
  border-radius: 14px;
  border: 1px solid var(--sn-stroke);
  background: var(--sn-container);
  box-shadow: var(--skd-shadow);
  padding: 6px;
}
.dropdown-item {
  border-radius: 12px;
  padding: 8px 10px;
  color: var(--sn-text);
}
.dropdown-item:hover,
.dropdown-item:focus {
  background: var(--sn-button-4);
  color: var(--sn-text);
}
.dropdown-item.active,
.dropdown-item:active {
  background: var(--sn-button-3);
  color: var(--sn-text);
}

.skd-bind-picker-wrap {
  position: relative;
}

.skd-bind-picker-trigger.form-select.form-select-sm {
  width: 100%;
  min-height: 54px;
  text-align: center;
  padding: 8px 10px;
  background: var(--sn-container);
  color: var(--sn-text);
  cursor: pointer;
}

.skd-bind-picker-trigger-inner {
  display: block;
}

.skd-bind-picker-trigger-title {
  font-size: 13px;
  line-height: 16px;
  color: var(--sn-text);
}

.skd-bind-picker-trigger-meta,
.skd-bind-picker-trigger-placeholder {
  margin-top: 2px;
  font-size: 12px;
  line-height: 15px;
  color: var(--sn-text-muted, #6b7280);
}

.skd-bind-current-title {
  font-size: 13px;
  line-height: 16px;
  color: var(--sn-not-active);
}

.skd-bind-component-title {
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  font-weight: inherit;
}

.skd-bind-current-meta {
  margin-top: 2px;
  font-size: 12px;
  line-height: 15px;
  color: var(--sn-not-active);
}

.skd-bind-picker-menu.dropdown-menu {
  width: 320px;
  max-width: 100%;
  min-width: 280px;
  padding: 8px;
  z-index: 99999;
  position: fixed;
  background: #FFFFFF !important;
  background-image: none !important;
  opacity: 1;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  isolation: isolate;
  contain: paint;
  transform: translateZ(0);
  border: 1px solid rgba(230, 236, 245, 0.98);
  box-shadow:
    0 18px 38px rgba(11, 34, 64, 0.18),
    0 0 0 1px rgba(255, 255, 255, 0.98);
}

.skd-bind-picker-portal {
  position: fixed;
  inset: 0;
  z-index: 99997;
  pointer-events: none;
}

.skd-bind-picker-menu.dropdown-menu::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #FFFFFF;
  z-index: 0;
}

.skd-bind-picker-menu.dropdown-menu > * {
  position: relative;
  z-index: 1;
}

.skd-bind-picker-overlay {
  z-index: 99998;
  pointer-events: auto;
}

.skd-bind-picker-menu.dropdown-menu {
  pointer-events: auto;
}

.skd-bind-picker-select.form-select.form-select-sm {
  margin-bottom: 8px;
}

.skd-bind-picker-search.form-control.form-control-sm {
  margin-bottom: 8px;
}

.skd-bind-picker-line.form-select.form-select-sm {
  background: #FFFFFF;
  border-color: rgba(47, 71, 224, 0.18);
}

.skd-bind-picker-device.form-select.form-select-sm {
  background: #F7F9FF;
  border-color: rgba(47, 71, 224, 0.14);
}

.skd-bind-picker-slots {
  display: grid;
  gap: 8px;
}

.skd-bind-picker-slot.form-select.form-select-sm {
  width: 100%;
  text-align: left;
  cursor: pointer;
  background: #EAEDFA;
  border-color: rgba(47, 71, 224, 0.12);
}

.skd-bind-picker-slot-danger.form-select.form-select-sm {
  margin-top: 8px;
  background: rgba(214, 28, 28, 0.08);
  border-color: rgba(214, 28, 28, 0.24);
  color: var(--sn-danger);
}

.skd-bind-picker-slot-danger.form-select.form-select-sm:hover,
.skd-bind-picker-slot-danger.form-select.form-select-sm:focus {
  background: rgba(214, 28, 28, 0.12);
  border-color: rgba(214, 28, 28, 0.32);
  color: var(--sn-danger);
}

/* ---- Checkbox ---- */
.form-check-input {
  width: 18px;
  height: 18px;
  margin-top: 0.15em;
  border-radius: 5px;
  border: 1px solid var(--sn-stroke);
  box-shadow: none;
}
.form-check-input:focus {
  border-color: rgba(47, 71, 224, 0.38);
  box-shadow: 0 0 0 4px rgba(47, 71, 224, 0.10);
}
.form-check-input:checked {
  background-color: var(--sn-button-1);
  border-color: var(--sn-button-1);
}
.form-check-label {
  color: var(--sn-text);
}

/* ---- Pagination ---- */
.pagination {
  gap: 6px;
}
.page-link {
  border: 0;
  background: transparent;
  color: var(--sn-not-active);
  border-radius: 999px;
  min-width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.page-link:hover {
  background: var(--sn-button-4);
  color: var(--sn-text);
}
.page-item.active .page-link {
  background: var(--sn-button-4);
  border: 1px solid var(--sn-stroke);
  color: var(--sn-text);
}

/* ---- Equipment multi-select: prevent any text selection ---- */
.skd-eq-select-mode,
.skd-eq-select-mode * {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.skd-eq-select-mode {
  -webkit-tap-highlight-color: transparent;
}

/* ---- Topbar: alarms bell inside the "Журналы" pill ----
 * The bell exists only while alarms are active: the pill grows, the bell is
 * fully filled yellow (also when the pill itself is active/selected) with a
 * numeric counter and a gentle swing. No alarms: no bell, compact pill.
 * prefers-reduced-motion disables the animation. */
.sn-tab-alarms {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  color: #f0b429;
  cursor: pointer;
}
.sn-tab .sn-tab-alarms.has-alarms,
.sn-tab.active .sn-tab-alarms.has-alarms {
  color: #f0b429;
}
.sn-tab-alarms-bell {
  display: block;
  flex: 0 0 auto;
}
.sn-tab-alarms-count {
  min-width: 10px;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
@media (prefers-reduced-motion: no-preference) {
  .sn-tab-alarms.has-alarms .sn-tab-alarms-bell {
    transform-origin: 50% 3px;
    animation: snTabBellSwing 3.6s ease-in-out infinite;
  }
}
@keyframes snTabBellSwing {
  /* Короткое покачивание (~0.9s), затем пауза до конца цикла. */
  0%, 25%, 100% { transform: rotate(0deg); }
  4% { transform: rotate(14deg); }
  8% { transform: rotate(-11deg); }
  12% { transform: rotate(8deg); }
  16% { transform: rotate(-5deg); }
  20% { transform: rotate(2deg); }
}

/* ---- Topbar: date/time block, tinted by time of day ----
 * Inline style from JS supplies the gradient (access-time palette:
 * morning/day/night); here only the shape. Both the clock and the operator
 * label shrink-wrap so the clock sits right next to the operator block. */
.sn-time.sn-time-now {
  flex: 0 0 auto;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: background-color 0.6s ease, border-color 0.6s ease;
}
.sn-time.sn-product-version {
  flex: 0 0 auto;
  min-width: 0;
  padding: 0 4px 0 10px;
  text-align: right;
  font-size: 12px;
  font-weight: 400;
  color: rgba(11, 34, 64, 0.62);
  white-space: nowrap;
}
.sn-time.sn-operator {
  min-width: 0;
}

/* ---- Journal: refs, marks, alarms ---- */
.skd-journal-ref-chip {
  gap: 6px;
  max-width: 240px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.skd-journal-ref-chip.is-clickable {
  cursor: pointer;
}
.skd-journal-ref-chip.is-clickable:hover {
  border-color: rgba(47, 71, 224, 0.35);
  background: rgba(47, 71, 224, 0.10);
}
.skd-journal-ref-chip.is-active {
  border-color: rgba(47, 71, 224, 0.45);
  background: rgba(47, 71, 224, 0.14);
  color: rgb(33, 58, 185);
}
/* Ref на удалённый объект (реестр загружен, объекта нет): ghost-вариант той
 * же палитры вида — пунктирная рамка, приглушённый текст, тон вида гаснет
 * через opacity. Новых цветов нет; кликабельность (фильтр по ref) остаётся. */
.skd-journal-ref-chip.is-deleted {
  border-style: dashed;
  color: var(--sn-not-active);
  opacity: 0.75;
}
/* ---- Раскраска чипов участников по классам ref-типов ----
 * Класс ставит journalRefKindClass в bundle.js (единая таблица типов).
 * Тона бледные из палитры стайлкита: статусный зелёный rgb(19,145,17),
 * янтарный rgb(224,168,0), нейтральный серый rgb(120,133,149).
 * Оборудование (skd-ref-kind-equipment) остаётся на базовом голубом тоне
 * чипа и синем hover/active — правил не требует. Размеры и текст (тёмный
 * стандартный) не меняются; hover/active каждого класса — более плотный
 * оттенок того же тона. */
.skd-journal-ref-chip.skd-ref-kind-subject {
  background: rgba(19, 145, 17, 0.08);
  border-color: rgba(19, 145, 17, 0.28);
}
.skd-journal-ref-chip.skd-ref-kind-subject.is-clickable:hover {
  background: rgba(19, 145, 17, 0.16);
  border-color: rgba(19, 145, 17, 0.42);
}
.skd-journal-ref-chip.skd-ref-kind-subject.is-active {
  background: rgba(19, 145, 17, 0.20);
  border-color: rgba(19, 145, 17, 0.55);
  color: rgb(21, 92, 20);
}
.skd-journal-ref-chip.skd-ref-kind-logic {
  background: rgba(224, 168, 0, 0.10);
  border-color: rgba(224, 168, 0, 0.32);
}
.skd-journal-ref-chip.skd-ref-kind-logic.is-clickable:hover {
  background: rgba(224, 168, 0, 0.18);
  border-color: rgba(224, 168, 0, 0.46);
}
.skd-journal-ref-chip.skd-ref-kind-logic.is-active {
  background: rgba(224, 168, 0, 0.24);
  border-color: rgba(224, 168, 0, 0.60);
  color: rgb(122, 90, 0);
}
.skd-journal-ref-chip.skd-ref-kind-platform {
  background: rgba(120, 133, 149, 0.10);
  border-color: rgba(120, 133, 149, 0.30);
}
.skd-journal-ref-chip.skd-ref-kind-platform.is-clickable:hover {
  background: rgba(120, 133, 149, 0.18);
  border-color: rgba(120, 133, 149, 0.45);
}
.skd-journal-ref-chip.skd-ref-kind-platform.is-active {
  background: rgba(120, 133, 149, 0.24);
  border-color: rgba(120, 133, 149, 0.60);
  color: rgb(55, 65, 81);
}
.skd-journal-ref-nav {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
}
.skd-journal-ref-nav:hover {
  background: rgba(47, 71, 224, 0.16);
}
.skd-journal-mark-chip {
  gap: 6px;
  border-color: rgba(47, 71, 224, 0.30);
  background: rgba(47, 71, 224, 0.10);
}
.skd-journal-mark-remove {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}
.skd-journal-mark-remove:hover {
  background: rgba(180, 35, 24, 0.18);
  color: #b42318;
}
/* Миниатюра фотографии в диффах/контексте карточки события (base64
   data-URL показывается изображением, а не простынёй текста). */
.skd-journal-diff-photo {
  display: block;
  max-height: 96px;
  max-width: 100%;
  border: 1px solid rgba(31, 41, 66, 0.12);
  border-radius: var(--skd-radius-sm, 8px);
  background: rgba(255, 255, 255, 0.6);
}
/* Фото персоны в секции «Свойства» карточки события: оверлей справа поверх
   таблицы (обёртка секции position:relative), на поток/ширину таблицы не
   влияет. Вид — как у фото в шапке карточек (renderTopCardPhoto): то же
   скругление 12px и та же тень. */
.skd-jev-photo {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  width: 72px;
  height: 72px;
}
.skd-jev-photo img {
  display: block;
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, .18);
  box-shadow: -6px 10px 22px rgba(11, 34, 64, 0.18);
}
/* Круговой переключатель фото (несколько персон в событии): маленькая
   круглая кнопка-стрелка в левом верхнем углу поверх фотографии. */
.skd-jev-photo-switch {
  position: absolute;
  top: 2px;
  left: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0 0 1px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.88);
  color: var(--sn-text);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(11, 34, 64, 0.35);
}
.skd-jev-photo-switch:hover {
  background: #fff;
}
/* Архивный режим «Журналов»: бейдж-баннер над лентой и список файлов
   архива в тул-панели. Плоские селекторы — совместимость со старыми Chrome. */
.skd-journal-archive-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 6px 10px;
  margin-bottom: 8px;
  border: 1px solid rgba(184, 134, 11, 0.35);
  border-radius: var(--skd-radius-sm, 8px);
  background: rgba(240, 195, 80, 0.14);
  font-size: 12.5px;
}
.skd-journal-archive-banner.is-violated {
  border-color: rgba(180, 35, 24, 0.4);
  background: rgba(180, 35, 24, 0.08);
}
.skd-journal-archive-badge {
  flex: 0 0 auto;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(184, 134, 11, 0.18);
  color: #7a5a08;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.06em;
}
.skd-journal-archive-banner.is-violated .skd-journal-archive-badge {
  background: rgba(180, 35, 24, 0.16);
  color: #b42318;
}
.skd-journal-archive-files {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 260px;
  overflow: auto;
  margin-bottom: 10px;
}
.skd-journal-archive-file {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 6px 10px;
  margin: 0;
  border: 1px solid rgba(31, 41, 66, 0.12);
  border-radius: var(--skd-radius-sm, 8px);
  background: rgba(255, 255, 255, 0.6);
  cursor: pointer;
}
.skd-journal-archive-file:hover {
  border-color: rgba(47, 71, 224, 0.3);
}
.skd-journal-archive-open-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 10px;
  margin-bottom: 10px;
  border: 1px solid rgba(184, 134, 11, 0.35);
  border-radius: var(--skd-radius-sm, 8px);
  background: rgba(240, 195, 80, 0.14);
  font-size: 12.5px;
}
/* ---- Панель «Тревоги» (инструмент «Журналы») ----
 * При активных тревогах пульсирует ТОЛЬКО закрытая кнопка-заголовок в зоне 3
 * (мягкая синусоида ease-in-out, ~2 c в каждую сторону): если панель открыта,
 * оператор уже видит тревоги — открытые шапки панели/карточки не мигают. */
@media (prefers-reduced-motion: no-preference) {
  .skd-closed-item.skd-alarms-closed.has-alarms .skd-closed-open-btn,
  .skd-closed-item.skd-alarms-closed.has-alarms .skd-closed-pin-btn {
    animation: skdAlarmsClosedPulse 4s ease-in-out infinite;
  }
}
/* Закрытая кнопка-заголовок (outline-кнопка, прозрачный фон в покое). */
@keyframes skdAlarmsClosedPulse {
  0%, 100% { background-color: transparent; }
  50% { background-color: rgba(180, 35, 24, 0.30); }
}
/* Без активных тревог панель не открывается: закрытая кнопка-заголовок
 * выглядит неактивной, чтобы неоткрытие не воспринималось как баг. */
.skd-closed-item.is-disabled .skd-closed-open-btn,
.skd-closed-item.is-disabled .skd-closed-pin-btn {
  opacity: 0.45;
  cursor: default;
  pointer-events: auto;
}
/* Содержимое карточки принятия — в стандартной карточной секции
 * (skd-card-section.is-open), всегда раскрытой и некликабельной, с
 * красноватой тревожной тональностью: тона согласованы с палитрой
 * важности «Критично» (#b53a3a текст, rgba(180,35,24,…) фоны пульса). */
.skd-card-section.is-open.skd-alarm-ack-card-section {
  margin-top: 0;
  border-color: rgba(180, 35, 24, 0.30);
  box-shadow: 0 12px 22px rgba(180, 35, 24, 0.06);
  background: rgba(180, 35, 24, 0.03);
}
.skd-alarm-ack-card-section .skd-card-section-sticky {
  position: static;
  background: rgba(180, 35, 24, 0.07);
  border-bottom-color: rgba(180, 35, 24, 0.22);
  cursor: default;
}
.skd-alarm-ack-card-section.skd-card-section.is-open .skd-card-section-title {
  color: #b53a3a;
}
/* Секция статичная (не аккордеон): шеврон-подсказку не показываем. */
.skd-alarm-ack-card-section .skd-acc-head::after {
  content: none;
}
/* Высотой обёртки тела управляет JS-анимация аккордеона; секция всегда
 * раскрыта и анимацию не использует — фиксируем натуральную высоту. */
.skd-alarm-ack-card-section .skd-acc-body-wrap {
  height: auto;
  opacity: 1;
  overflow: visible;
  pointer-events: auto;
  transition: none;
}

/* Карточка принятия тревоги (правая секция раздвинутой панели «Тревоги»,
 * общая механика .skd-events-card-section): ряд кнопок ПОД областью
 * комментария — «Отмена», «Подтвердить», групповые «Подтвердить для всех»;
 * перенос без выхода за секцию, запас по вертикали под бейджи участников. */
.skd-alarm-ack-actions {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  row-gap: 14px;
  justify-content: flex-end;
  align-items: flex-end;
  margin-top: 10px;
}
/* Кнопка группового принятия: бейдж с участником «поверх» верхней кромки
 * кнопки, в цвете класса типа участника (те же тона, что чипы участников). */
.skd-alarm-group-ack-btn {
  position: relative;
  margin-top: 10px;
  flex: 0 1 auto;
  min-width: 0;
}
.skd-alarm-group-ack-badge {
  position: absolute;
  top: -9px;
  left: 8px;
  max-width: calc(100% - 16px);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid rgba(120, 133, 149, 0.45);
  background: rgb(233, 236, 240);
  color: rgb(55, 65, 81);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 14px;
  pointer-events: none;
}
.skd-alarm-group-ack-badge.skd-ref-kind-subject {
  background: rgb(226, 242, 226);
  border-color: rgba(19, 145, 17, 0.55);
  color: rgb(21, 92, 20);
}
.skd-alarm-group-ack-badge.skd-ref-kind-logic {
  background: rgb(248, 238, 210);
  border-color: rgba(224, 168, 0, 0.60);
  color: rgb(122, 90, 0);
}
.skd-alarm-group-ack-badge.skd-ref-kind-equipment {
  background: rgb(222, 235, 247);
  border-color: rgba(47, 71, 224, 0.45);
  color: rgb(33, 58, 185);
}
.skd-alarm-group-ack-badge.skd-ref-kind-platform {
  background: rgb(233, 236, 240);
  border-color: rgba(120, 133, 149, 0.60);
  color: rgb(55, 65, 81);
}

/* ---- Пропуска: компактные маркеры колонки «Пропуск» (24/7, +N) ----
 * Чипы в плотной строке списка ниже стандартных, чтобы не раздувать ритм. */
.skd-eq-table .skd-pass-term-chip {
  height: 18px;
  padding: 0 7px;
  font-size: 11px;
  line-height: 16px;
}

/* ---- Journal: раздвижная панель «События» (карточка события в инструментах) ----
 * Одна коробка: при открытой карточке панель раздвигается вправо поверх
 * правой зоны в пределах своей горизонтальной полосы (высота полосы не
 * меняется). Слева — прежняя секция списка: шапка и тело панели держат
 * ширину левой колонки (--skd-events-list-w, следует за сплиттером
 * лево/право). Справа — абсолютная секция карточки (--skd-events-card-w).
 * Ширины меряет syncJournalEventsExpansion и кладёт в CSS-переменные на
 * самой панели. Панель лежит ниже тул-панелей (z-index:40) и right-panel
 * confirm (z-index:90); hit-зона вертикального сплиттера — выше (36),
 * чтобы drag работал и внутри раздвинутой полосы. */
.skd-panel.skd-events-expanded {
  width: var(--skd-events-panel-w, 100%);
  z-index: 35;
}
/* Раздвигание: ширина панели растёт от ширины списка до полного размаха;
 * длительность/кривая — как у тул-панелей (skdToolPanelSlideUp 413ms).
 * Анимация висит только на фазе открытия (is-opening снимается по таймеру
 * после её конца): финальная ширина всегда берётся из базового правила и
 * следует за переменными (drag сплиттера), а движки, замораживающие var()
 * в keyframes на старте анимации (Safari), не могут зафиксировать
 * устаревшие значения вечным fill-mode. */
.skd-panel.skd-events-expanded.is-opening {
  animation: skdEventsPanelExpand 413ms linear both;
}
.skd-panel.skd-events-expanded.is-closing {
  /* Схлопывание обратно к ширине списка, как skdToolPanelSlideDown 393ms.
   * fill both безопасен: к старту закрытия переменные давно стоят, а секция
   * размонтируется сразу после конца анимации. */
  animation: skdEventsPanelCollapse 393ms linear both;
}
@keyframes skdEventsPanelExpand {
  from { width: var(--skd-events-list-w, 100%); }
  to { width: var(--skd-events-panel-w, 100%); }
}
@keyframes skdEventsPanelCollapse {
  from { width: var(--skd-events-panel-w, 100%); }
  to { width: var(--skd-events-list-w, 100%); }
}
/* Секция списка сохраняет ширину левой колонки: шапка и тело панели не
 * растягиваются на раздвинутую ширину. Ширина контента = ширина колонки
 * минус два бордера панели — ровно как в нераздвинутом состоянии, поэтому
 * список не переукладывается ни при открытии, ни при анимации. */
.skd-panel.skd-events-expanded > .skd-panel-header,
.skd-panel.skd-events-expanded > .skd-panel-body {
  width: calc(var(--skd-events-list-w, 100%) - 2px);
}
/* Правый верхний угол шапки списка упирается в разделитель секций —
 * скругление там не нужно (иначе у шва просвечивала бы арка фона панели). */
.skd-panel.skd-events-expanded > .skd-panel-header {
  border-top-right-radius: 0;
}
/* Секция карточки: абсолютная колонка от границы списка до правой кромки
 * раздвинутой панели. Собственного фона нет — общий фон даёт панель
 * (var(--skd-panel-bg)), поэтому перепада между секциями нет. Линии-разделителя
 * между секциями нет — цельная коробка (решение владельца).
 * Правые углы скруглены под радиус панели (панель не режет overflow, чтобы
 * не терять внешний фокусный контур ::after). */
.skd-events-card-section {
  --skd-events-card-r: calc(var(--skd-radius) - 1px);
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--skd-events-list-w, 50%) - 2px);
  width: var(--skd-events-card-w, 50%);
  margin: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  /* Собственный непрозрачный фон (тот же тон, что у панели): даже если
   * какой-то движок не раздвинет панель под секцией, содержимое правой
   * панели инструмента не должно читаться сквозь тело карточки. */
  background: #ffffff;
  background: var(--skd-panel-bg, #ffffff);
  /* По решению владельца секции не разделяются линией — цельная коробка. */
  border-left: 0;
  border-radius: 0 var(--skd-events-card-r) var(--skd-events-card-r) 0;
  overflow: hidden;
}
/* Шторка: секция открывается слева-направо синхронно с ростом ширины
 * панели (та же длительность и linear-кривая, кромка шторки идёт на 1px
 * позади бордера панели). Скругление в inset(...) покорнерное (0 r r 0),
 * чтобы у границы списка рамки/линии не расходились. Как и раздвигание,
 * висит только на фазе is-opening — без остаточного fill-mode. */
.skd-panel.skd-events-expanded.is-opening .skd-events-card-section {
  animation: skdEventsCardReveal 413ms linear both;
}
.skd-panel.skd-events-expanded.is-closing .skd-events-card-section {
  animation: skdEventsCardConceal 393ms linear both;
}
/* Opacity — фолбэк для старых движков: если clip-path со скруглённым
 * inset(...) не парсится, строка отбрасывается, но остаётся мягкое
 * проявление/угасание секции. В свежих движках работают оба свойства. */
@keyframes skdEventsCardReveal {
  from {
    opacity: 0.2;
    -webkit-clip-path: inset(0 100% 0 0 round 0 var(--skd-events-card-r) var(--skd-events-card-r) 0);
    clip-path: inset(0 100% 0 0 round 0 var(--skd-events-card-r) var(--skd-events-card-r) 0);
  }
  to {
    opacity: 1;
    -webkit-clip-path: inset(0 0 0 0 round 0 var(--skd-events-card-r) var(--skd-events-card-r) 0);
    clip-path: inset(0 0 0 0 round 0 var(--skd-events-card-r) var(--skd-events-card-r) 0);
  }
}
@keyframes skdEventsCardConceal {
  from {
    opacity: 1;
    -webkit-clip-path: inset(0 0 0 0 round 0 var(--skd-events-card-r) var(--skd-events-card-r) 0);
    clip-path: inset(0 0 0 0 round 0 var(--skd-events-card-r) var(--skd-events-card-r) 0);
  }
  to {
    opacity: 0.2;
    -webkit-clip-path: inset(0 100% 0 0 round 0 var(--skd-events-card-r) var(--skd-events-card-r) 0);
    clip-path: inset(0 100% 0 0 round 0 var(--skd-events-card-r) var(--skd-events-card-r) 0);
  }
}
/* Шапка секции карточки — тот же класс .skd-panel-header, что и у шапки
 * списка (высота/паддинги/фон/блюр/нижняя линия берутся из общих правил и
 * не могут разойтись), плюс модификатор .skd-event-overlay-head только для
 * специфики секции: раскладка контента и прямой левый верхний угол у шва.
 * Высота продублирована жёстко (px-фолбэк + min/max + overflow) — в старых
 * движках шапка физически не может стать выше строки списка, даже если
 * какое-то из общих правил не применится. */
.skd-event-overlay-head {
  flex: 0 0 auto;
  justify-content: flex-start;
  border-top-left-radius: 0;
  margin: 0;
  height: 44px;
  height: var(--skd-header-h);
  min-height: 44px;
  min-height: var(--skd-header-h);
  max-height: 44px;
  max-height: var(--skd-header-h);
  overflow: hidden;
}
/* Разрядка контента шапки без flex-gap (Chrome <84 не знает gap во flex):
 * обычные левые отступы дают тот же результат во всех движках. */
.skd-event-overlay-head > * + * {
  margin-left: 10px;
}
.skd-event-overlay-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Заголовок прижат к правому краю шапки — к notch-кнопке закрытия и
   * прочим правым элементам (единообразно для всех выезжающих карточек). */
  text-align: right;
}
/* Кнопка закрытия — компактный нотч (28px): 40px кнопка с крупной тенью
 * визуально распирала 44px шапку и перекрывала линию под ней. Стрелка
 * повёрнута влево, статичная. */
/* Кнопка закрытия карточки — ТОЧНО тот же вид, что у кнопки схлопывания
 * панели вниз: несёт тот же набор классов (btn btn-sm btn-outline-secondary
 * skd-panel-pin-btn) внутри той же шапки .skd-panel-header, поэтому размер,
 * фон, рамка, скругление и hover совпадают по построению (общие правила
 * выше). Здесь — только специфика иконки: стрелка «влево», а не «вниз». */
.skd-event-overlay-close {
  flex: 0 0 auto;
}
.skd-event-overlay-close .skd-action-icon {
  transform: rotate(-90deg);
}
.skd-event-overlay-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 10px 12px;
}

/* ---- Focus outline of left panels ----
 * .skd-panel-focus is set on the panel zone wrapper from app ui-state
 * (ui.focusedPanelKey): exactly one zone per screen carries it. The 1px
 * accent ring is drawn as an ::after box outside the panel border, so the
 * layout is not shifted. For the expanded events panel the same ring wraps
 * the whole widened box (::after follows the panel border box). */
.skd-panel-focus > .skd-panel::after,
.skd-panel-focus > .skd-panel-with-popover > .skd-panel::after {
  content: "";
  position: absolute;
  /* Явные офсеты вместо шортката inset (Chrome <87 его не знает). */
  top: -1px;
  right: -1px;
  bottom: -1px;
  left: -1px;
  border: 1px solid var(--skd-accent-border-35);
  border-radius: calc(var(--skd-radius) + 1px);
  pointer-events: none;
  z-index: 30;
}

/* ---- Invisible splitters ----
 * Splitters are not drawn at all: only the gap between panels remains.
 * The hit zone (element width/height) and resize cursors stay fully
 * functional; see .skd-vsplitter/.skd-splitter base rules in app.css.
 * The vertical splitter hit zone rides above the expanded events panel
 * (36 > 35), so left/right resizing keeps working inside the strip. */
.skd-vsplitter,
.skd-vsplitter:hover {
  background: transparent;
}
.skd-vsplitter {
  position: relative;
  z-index: 36;
}
.skd-splitter,
.skd-splitter:hover {
  background: transparent;
}