/* Krasny Apokalipsis — panel components (stream, tabs, chips) */



.content-header.hidden { display: none !important; }



.sr-only {

  position: absolute;

  width: 1px;

  height: 1px;

  padding: 0;

  margin: -1px;

  overflow: hidden;

  clip: rect(0, 0, 0, 0);

  white-space: nowrap;

  border: 0;

}



.admin-conn-card--legacy { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }



.admin-device-title { margin: 0; color: #e8e8f0; font-size: 1.25rem; }

.admin-device-subtitle { margin: 4px 0 0; font-size: 12px; }



.admin-chip {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  padding: 4px 10px;

  font-size: 11px;

  text-transform: uppercase;

  letter-spacing: 0.04em;

  border: 1px solid rgba(255, 49, 49, 0.35);

  border-radius: 999px;

  background: #121212;

  color: #e8e8f0;

  box-shadow: var(--panel-glow);

}



.admin-chip-status.online { color: #00e676; border-color: rgba(0, 230, 118, 0.45); }

.admin-chip-status.offline { color: #f0a500; }

.admin-chip-muted { text-transform: none; letter-spacing: 0; font-size: 12px; color: #a0a0b8; }



/* ——— Admin command center (layout do print) ——— */

#deviceAdminView.active {

  background: #000;

  margin: -0.5rem -0.75rem 0;

  padding: 12px 14px 20px;

  min-height: calc(100vh - 3.5rem);

  box-sizing: border-box;

}



.admin-command-center {

  display: flex;

  flex-direction: column;

  gap: 14px;

  max-width: 100%;

  min-width: 0;

}



.admin-topbar {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 10px 14px;

  padding: 8px 10px;

  border: 1px solid rgba(255, 49, 49, 0.35);

  border-radius: var(--radius-lg);

  background: #0b0e14;

  box-shadow: var(--panel-glow);

}



.admin-topbar-back { flex-shrink: 0; }



.admin-topbar-chips {

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  align-items: center;

  flex: 1 1 200px;

  min-width: 0;

}



.admin-topbar-actions {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 8px;

  margin-left: auto;

}



.admin-device-select-label {

  display: flex;

  flex-direction: column;

  gap: 2px;

  font-size: 10px;

  text-transform: uppercase;

  letter-spacing: 0.06em;

  color: #8888a8;

  min-width: 140px;

}



.admin-device-select {

  min-width: 160px;

  max-width: 220px;

  font-size: 12px;

  padding: 6px 8px;

  border-color: rgba(255, 49, 49, 0.45) !important;

}



.admin-icon-btn {

  padding: 6px 10px;

  min-width: 36px;

}



.admin-dual-view-btn {

  white-space: nowrap;

  border-color: rgba(255, 49, 49, 0.45);

  flex-shrink: 0;

}



.admin-dual-view-btn.is-active {

  border-color: #ff3131;

  box-shadow: var(--panel-glow);

}



.admin-float-triggers {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 4px;

  padding: 3px 6px;

  border: 1px solid rgba(255, 49, 49, 0.3);

  border-radius: 8px;

  background: rgba(18, 18, 18, 0.85);

  max-width: min(100%, 420px);

}



.admin-float-trigger {

  min-width: 34px;

  padding: 5px 8px;

  border-color: rgba(255, 49, 49, 0.35);

}



.admin-float-trigger.is-open {

  border-color: #ff3131;

  background: rgba(255, 49, 49, 0.18);

  box-shadow: 0 0 6px rgba(255, 49, 49, 0.35);

}



.admin-command-main {

  display: grid;

  grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) minmax(200px, 1fr);

  grid-template-areas:

    "stream stream stream"

    "left right comms";

  gap: 14px;

  align-items: start;

  min-width: 0;

}



.admin-command-main--panels-float {

  display: grid;

  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);

  grid-template-areas: "stream sidebar";

  align-items: start;

  width: 100%;

}



.admin-command-main--panels-float .admin-col-left {

  display: none !important;

}



.admin-command-main--panels-float > .admin-col-center {

  grid-area: stream;

  grid-column: 1;

  grid-row: 1;

  min-width: 0;

}



.admin-command-main--panels-float > .admin-col-sidebar {

  grid-area: sidebar;

  grid-column: 2;

  grid-row: 1;

  display: flex !important;

  flex-direction: column;

  gap: 12px;

  min-width: 0;

  width: 100%;

  position: sticky;

  top: 8px;

  align-self: start;

  max-height: none;

  overflow: visible;

}



.admin-command-main--panels-float .admin-col-right,

.admin-command-main--panels-float .admin-col-comms {

  display: none !important;

}



.admin-col-sidebar .stream-panel-type--sidebar {

  width: 100%;

  box-sizing: border-box;

}



.admin-col-sidebar .stream-panel-type--sidebar .remote-text-input {

  display: block;

  width: 100%;

  margin-bottom: 8px;

}



.admin-col-sidebar .stream-panel-type--sidebar .remote-text-actions {

  display: flex;

  flex-wrap: wrap;

  gap: 6px;

  margin-bottom: 6px;

}



.admin-col-sidebar .stream-panel-type--sidebar .remote-text-hint {

  margin: 0;

  font-size: 11px;

}



.admin-col-left { grid-area: left; }

.admin-col-center { grid-area: stream; min-width: 0; }

.admin-col-right { grid-area: right; }

.admin-col-comms { grid-area: comms; }



.admin-col-left,

.admin-col-center,

.admin-col-right,

.admin-col-comms,

.admin-col-sidebar {

  display: flex;

  flex-direction: column;

  gap: 12px;

  min-width: 0;

}



#deviceAdminView .admin-card h3,

#deviceAdminView .admin-comms-head > h3 {

  margin: 0 0 10px;

  font-size: 11px;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.08em;

  color: #ff3131;

}



.admin-card-head-row {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 8px;

  margin-bottom: 10px;

}



.admin-card-popout {

  flex-shrink: 0;

  padding: 4px 8px;

  line-height: 1;

}



.admin-float-anchor {

  min-width: 0;

}



.admin-float-anchor:empty {

  min-height: 48px;

  border: 1px dashed rgba(255, 49, 49, 0.2);

  border-radius: var(--radius-lg);

  background: rgba(18, 18, 18, 0.5);

}



#adminFloatAnchor-stream-principal {

  grid-area: streamPrincipal;

}



#adminFloatAnchor-stream-skeleton {

  grid-area: streamSkeleton;

}



.admin-hint-details {

  margin-top: 8px;

  font-size: 11px;

}

.admin-hint-details summary {

  cursor: pointer;

  list-style: none;

}

.admin-hint-details summary::-webkit-details-marker { display: none; }



.device-controls-grid {

  display: grid !important;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 8px;

  flex-direction: unset !important;

  max-width: none !important;

  width: 100%;

}



.device-controls-grid .device-control-btn {

  justify-content: center;

  text-align: center;

  flex-direction: column;

  padding: 10px 6px;

  font-size: 10px;

  gap: 4px;

}



.device-remote-control-block {

  margin-top: 12px;

  padding-top: 12px;

  border-top: 1px solid rgba(255, 49, 49, 0.2);

  display: flex;

  flex-direction: column;

  gap: 8px;

  width: 100%;

}



.device-controls-card .device-remote-control-toggle {

  width: 100%;

  justify-content: center;

}



.device-controls-card .device-global-actions-grid {

  margin-top: 10px;

  flex: none;

  max-width: none !important;

  width: 100%;

}



.device-controls-card #globalActionsBar {

  display: grid !important;

}



.device-controls-card #globalActionsBar.hidden {

  display: grid !important;

}



.admin-col-sidebar .admin-sidebar-card {

  width: 100%;

  box-sizing: border-box;

}



.admin-col-sidebar .lock-credential-sidebar-card {

  width: 100%;

  box-sizing: border-box;

}



.admin-col-sidebar .lock-credential-sidebar-card .lock-credential-card--inline {

  margin: 0;

  padding: 0;

  border: none;

  background: transparent;

}



/* Sidebar: 4 cards compactos, sem scroll interno */

.admin-command-main--panels-float > .admin-col-sidebar {

  gap: 6px;

}



.admin-col-sidebar > .admin-card.krasny-card,

.admin-col-sidebar > .krasny-panel.stream-panel-type--sidebar {

  padding: 8px 10px;

  border-radius: var(--radius-md, 8px);

}



.admin-col-sidebar .admin-card h3 {

  margin: 0 0 6px;

  font-size: 10px;

  letter-spacing: 0.06em;

}



.admin-col-sidebar .krasny-panel-head {

  margin-bottom: 6px;

  padding-bottom: 4px;

}



.admin-col-sidebar .krasny-panel-title {

  font-size: 10px;

}



.admin-col-sidebar .control-row {

  margin-bottom: 6px !important;

  gap: 6px;

}



.admin-col-sidebar .control-row:last-of-type {

  margin-bottom: 0 !important;

}



.admin-col-sidebar .screen-controls-hint,

.admin-col-sidebar .remote-text-hint,

.admin-col-sidebar .lock-cred-hint,

.admin-col-sidebar .admin-hint-details {

  display: none !important;

}



.admin-col-sidebar .permissions-card .perm-row {

  padding: 3px 0;

  gap: 6px;

}



.admin-col-sidebar .permissions-card .perm-name {

  font-size: 11px;

  line-height: 1.25;

}



.admin-col-sidebar .permissions-card .perm-status {

  font-size: 10px;

}



.admin-col-sidebar .permissions-card .perm-meta {

  gap: 2px;

}



.admin-col-sidebar .btn.btn-sm {

  padding: 3px 7px;

  font-size: 10px;

  line-height: 1.2;

}



.admin-col-sidebar .form-input {

  padding: 5px 8px;

  font-size: 12px;

}



.admin-col-sidebar .screen-mode-label {

  font-size: 11px;

}



.admin-col-sidebar .screen-mode-label select {

  padding: 4px 6px;

  font-size: 11px;

}



.admin-col-sidebar .stream-panel-type--sidebar .remote-text-input {

  margin-bottom: 4px;

}



.admin-col-sidebar .stream-panel-type--sidebar .remote-text-actions {

  gap: 4px;

  margin-bottom: 0;

}



.admin-col-sidebar .lock-credential-grid--compact {

  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

  gap: 4px 6px !important;

}



.admin-col-sidebar .lock-credential-grid--compact .info-label {

  font-size: 9px;

  margin-bottom: 1px;

}



.admin-col-sidebar .lock-credential-grid--compact .lock-cred-value {

  font-size: 11px;

  line-height: 1.25;

  word-break: break-word;

}



.admin-col-sidebar .status {

  font-size: 10px;

}



.device-controls-grid .device-control-btn i {

  font-size: 14px;

  width: auto;

}



.admin-comms-head {

  display: flex;

  flex-direction: column;

  gap: 8px;

  margin-bottom: 8px;

}



.admin-comms-head h3 { margin-bottom: 0 !important; }



.admin-tab-panel { min-height: 120px; }

.admin-tab-panel[hidden] { display: none !important; }



.admin-advanced-card .lock-credential-card--inline {

  margin-top: 12px;

  padding-top: 10px;

  border-top: 1px solid rgba(255, 49, 49, 0.15);

}



.lock-credential-grid--compact {

  grid-template-columns: 1fr !important;

  gap: 8px !important;

}



.lock-credential-grid--compact .lock-cred-value {

  font-size: 13px;

}

/* Pattern SVG visualization */
.pattern-svg {
  display: block;
  margin: 6px auto 2px;
  max-width: 120px;
  max-height: 120px;
}
.pattern-line {
  fill: none;
  stroke: #ff3131;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.85;
}
.pattern-dot--idle {
  fill: rgba(255, 255, 255, 0.2);
  stroke: rgba(255, 255, 255, 0.15);
  stroke-width: 1;
}
.pattern-dot--active {
  fill: #ff3131;
  stroke: rgba(255, 49, 49, 0.4);
  stroke-width: 3;
}
.pattern-order {
  fill: #fff;
  font-size: 9px;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
  font-family: 'Inter', sans-serif;
}



.admin-command-footer {

  grid-column: 1 / -1;

  width: 100%;

}



.remote-type-row {

  display: flex;

  flex-wrap: wrap;

  gap: 10px;

  align-items: center;

}



.remote-type-row .remote-text-input {

  flex: 1 1 280px;

  min-width: 0;

}



.remote-type-row .remote-text-actions {

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

}



.device-admin-tabs {

  display: flex;

  flex-wrap: wrap;

  gap: 6px;

}



.device-admin-tab {

  border: 1px solid rgba(255, 49, 49, 0.35);

  background: #121212;

  color: #c8c8d8;

  padding: 6px 10px;

  border-radius: var(--radius);

  font-size: 11px;

  font-weight: 600;

  cursor: pointer;

  transition: background 0.15s, box-shadow 0.15s;

}



.device-admin-tab:hover { color: #fff; border-color: #ff3131; }

.device-admin-tab.is-active {

  background: #ff3131;

  border-color: #ff3131;

  color: #fff;

  box-shadow: var(--panel-glow);

}



.krasny-card.admin-card,

.admin-card.krasny-card {

  border: 1px solid rgba(255, 49, 49, 0.35);

  box-shadow: var(--panel-glow);

  background: #121212;

  padding: 12px 14px;

  border-radius: var(--radius-lg);

}



.krasny-panel {

  border: 1px solid rgba(255, 49, 49, 0.4);

  border-radius: var(--radius-lg);

  background: #0b0e14;

  box-shadow: var(--panel-glow);

  padding: 12px 14px;

  min-width: 0;

}



.krasny-panel-head {

  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 8px;

  margin-bottom: 12px;

  padding-bottom: 8px;

  border-bottom: 1px solid rgba(255, 49, 49, 0.2);

}



.krasny-panel-title {

  font-size: 11px;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.08em;

  color: #ff3131;

}



/* Centro: Principal | Skeleton */

#streamWorkspace.stream-workspace,

#deviceAdminView .stream-workspace {

  display: grid;

  grid-template-columns: minmax(240px, 1fr) minmax(260px, 320px) minmax(240px, 1fr);

  grid-template-areas: "streamPrincipal streamMiddle streamSkeleton";

  align-items: start;

  gap: 14px;

  margin: 0;

  width: 100%;

  min-width: 0;

  box-sizing: border-box;

}



#adminStreamMiddle.admin-stream-middle {

  grid-area: streamMiddle;

  display: flex;

  flex-direction: column;

  gap: 12px;

  min-width: 0;

  position: sticky;

  top: 8px;

  align-self: start;

  max-height: none;

  overflow: visible;

}



.admin-stream-middle .admin-float-anchor--inline:empty {

  display: none;

}



.admin-stream-middle .device-controls-card {

  flex-shrink: 0;

}



.admin-stream-middle .admin-overlay-inline-bundle {

  max-height: none;

  overflow: visible;

}



.admin-op-float-host {

  position: absolute;

  width: 0;

  height: 0;

  overflow: hidden;

  pointer-events: none;

  clip: rect(0, 0, 0, 0);

}



#streamWorkspace.is-single-view {

  grid-template-columns: minmax(0, 1fr);

  grid-template-areas: "streamPrincipal";

}



#streamWorkspace.is-single-view .device-frame-screen {

  height: min(84vh, 840px);

  min-height: min(520px, 62vh);

}



#streamWorkspace.is-single-view #adminFloatAnchor-stream-skeleton,

#streamWorkspace.is-single-view #adminStreamMiddle {

  display: none;

}



#adminFloatAnchor-stream-principal,

#adminFloatAnchor-stream-skeleton {

  display: flex;

  flex-direction: column;

  min-width: 0;

}



#deviceAdminView .stream-panel-principal,

#deviceAdminView .stream-panel-skeleton {

  min-width: 0;

  display: flex;

  flex-direction: column;

  flex: 1 1 auto;

  width: 100%;

}



#deviceAdminView .stream-panel-skeleton.krasny-panel {

  border-color: rgba(61, 139, 255, 0.55);

  box-shadow: 0 0 12px rgba(61, 139, 255, 0.25);

}



.stream-panel-body--solo {

  display: block;

  min-width: 0;

}



.stream-panel-body {

  display: flex;

  gap: 10px;

  align-items: flex-start;

  min-height: 0;

  min-width: 0;

  flex: 1 1 auto;

}



.stream-action-rail {

  display: flex;

  flex-direction: column;

  gap: 6px;

  flex: 0 0 118px;

  min-width: 0;

  max-width: 118px;

}



.stream-skeleton-col {

  flex: 1 1 auto;

  min-width: 0;

  display: flex;

  flex-direction: column;

  align-items: center;

}



.stream-workspace .device-frame-stage {

  width: 100%;

  max-width: 100%;

  display: flex;

  flex-direction: column;

  align-items: center;

}



.stream-panel-principal .device-frame {

  border-color: rgba(255, 49, 49, 0.55);

  box-shadow: 0 0 14px rgba(255, 49, 49, 0.2), inset 0 0 0 1px rgba(255, 49, 49, 0.15);

}



.stream-panel-principal .device-frame,

.stream-panel-skeleton .device-frame {

  width: auto;

  max-width: 100%;

  margin: 0 auto;

  box-sizing: border-box;

}



.stream-workspace .device-frame-screen {

  position: relative;

  display: block;

  width: auto;

  height: min(82vh, 820px);

  max-width: 100%;

  max-height: min(82vh, 820px) !important;

  min-height: min(460px, 58vh);

  aspect-ratio: 9 / 15;

  margin: 0 auto;

  box-sizing: border-box;

}



.stream-workspace .device-frame-screen img {

  position: absolute;

  inset: 0;

  z-index: 1;

  width: 100%;

  height: 100%;

  object-fit: contain;

}



.stream-workspace .device-frame-skeleton .device-frame-screen img {

  object-fit: cover;

}



.stream-workspace .device-frame-placeholder {

  position: relative;

  z-index: 0;

  max-width: 90%;

}



.stream-workspace .screen-off-overlay {

  z-index: 3;

}



.stream-workspace .screen-input-layer {

  z-index: 2;

}



.stream-action-btn {

  display: flex;

  align-items: center;

  justify-content: flex-start;

  gap: 8px;

  width: 100%;

  padding: 8px 10px;

  font-size: 11px;

  font-weight: 600;

  color: #ffb4b4;

  background: #121212;

  border: 1px solid rgba(255, 49, 49, 0.45);

  border-radius: var(--radius-sm);

  cursor: pointer;

  transition: box-shadow 0.15s, border-color 0.15s;

}



.stream-action-btn i { width: 14px; text-align: center; color: #ff3131; }

.stream-action-btn:hover:not(:disabled) {

  border-color: #ff3131;

  box-shadow: 0 0 8px rgba(255, 49, 49, 0.35);

  color: #fff;

}

.stream-action-btn:disabled { opacity: 0.45; cursor: not-allowed; }



.stream-action-btn-sm { padding: 6px 8px; font-size: 10px; }



.stream-preview-col {

  flex: 1 1 0;

  min-width: 0;

  display: flex;

  flex-direction: column;

  align-items: center;

  width: 100%;

}



.stream-preview-footer {

  display: flex;

  align-items: center;

  justify-content: space-between;

  width: 100%;

  max-width: min(100%, 520px);

  margin-top: 8px;

  gap: 8px;

}



.stream-control-btn { width: auto; margin-left: auto; }



.stream-global-nav {

  display: flex;

  flex-wrap: wrap;

  gap: 6px;

  justify-content: center;

  width: 100%;

  margin-top: 8px;

}



.stream-global-nav.hidden { display: none !important; }



#remoteControlToggle.is-active,

.stream-control-btn.is-active {

  border-color: #00e676;

  color: #00e676;

  box-shadow: 0 0 8px rgba(0, 230, 118, 0.35);

}



.remote-text-input {

  flex: 1 1 200px;

  min-width: 0;

  border-color: rgba(255, 49, 49, 0.45) !important;

  box-shadow: inset 0 0 0 1px rgba(255, 49, 49, 0.12);

}



.admin-command-footer .stream-panel-type {

  width: 100%;

}



.admin-command-footer .remote-text-hint {

  margin: 8px 0 0;

  font-size: 11px;

}



.perm-status--granted {

  font-weight: 700;

  letter-spacing: 0.06em;

}



.panel-devices-wrap .devices-table-scroll {

  border: 1px solid rgba(255, 49, 49, 0.3);

  box-shadow: var(--panel-glow);

}



.panel-devices-wrap .stats { margin-bottom: 12px; }



.overlay-op-facial {

  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 6px;

}



.overlay-op-facial .btn {

  width: 100%;

  font-size: 11px;

  padding: 6px 4px;

}



.overlay-chat-card .overlay-op-feed {

  max-height: 160px;

  overflow-y: auto;

}



.keylog-live-card .keylog-side-feed {

  max-height: 320px;

  min-height: 140px;

}



@media (max-width: 1400px) {

  .admin-command-main:not(.admin-command-main--panels-float) {

    grid-template-columns: minmax(200px, 1fr) minmax(200px, 1fr);

    grid-template-areas:

      "stream stream"

      "left right"

      "comms comms";

  }

  .admin-command-main:not(.admin-command-main--panels-float) .admin-col-comms {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 12px;

  }

}



@media (max-width: 1100px) {

  .admin-command-main--panels-float {

    grid-template-columns: 1fr;

    grid-template-areas:

      "stream"

      "sidebar";

  }

  .admin-command-main--panels-float .admin-col-sidebar {

    position: static;

    max-height: none;

  }

}



@media (max-width: 960px) {

  .admin-command-main:not(.admin-command-main--panels-float) {

    grid-template-columns: 1fr;

    grid-template-areas:

      "stream"

      "left"

      "right"

      "comms";

  }

  .admin-command-main:not(.admin-command-main--panels-float) .admin-col-comms {

    grid-template-columns: 1fr;

  }

  .stream-workspace .device-frame-screen {

    height: min(70vh, 640px);

    min-height: min(320px, 50vh);

  }

  #streamWorkspace.stream-workspace,

  #deviceAdminView .stream-workspace {

    grid-template-columns: 1fr;

    grid-template-areas:

      "streamPrincipal"

      "streamMiddle"

      "streamSkeleton";

  }



  #adminStreamMiddle.admin-stream-middle {

    position: static;

    max-height: none;

  }

}



@media (max-width: 480px) {

  .stream-panel-body { flex-direction: column; }

  .device-controls-grid {

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }

  .remote-type-row {

    flex-direction: column;

    align-items: stretch;

  }

}