:root {
  color-scheme: dark;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  background: #050607;
  color: #f2f4f5;
  --bg: #050607;
  --surface: #090d12;
  --surface-raised: #101720;
  --surface-soft: #070a0e;
  --line: #22313e;
  --line-soft: #17212a;
  --text: #f1f7fb;
  --muted: #91a1af;
  --muted-strong: #c6d3dd;
  --blue: #238af5;
  --cyan: #12c7da;
  --green: #3bd984;
  --red: #ff6b6b;
  --amber: #efb65e;
}

* {
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: #315566 #050607;
}
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: #050607; }
*::-webkit-scrollbar-thumb { border: 1px solid #050607; border-radius: 999px; background: linear-gradient(180deg, #315d73, #174157); }
*::-webkit-scrollbar-thumb:hover { background: #287da1; }
*::-webkit-scrollbar-corner { background: #050607; }
html, body, #app { width: 100%; min-width: 0; min-height: 100%; margin: 0; }
body { min-height: 100vh; min-height: 100dvh; overflow-x: hidden; background: var(--bg); color: var(--text); }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .58; }
input, select { min-width: 0; }
img { display: block; }

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.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;
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.brand img { flex: 0 0 auto; }
.brand > span { display: grid; min-width: 0; line-height: 1.05; }
.brand strong { font-size: 13px; letter-spacing: 0; }
.brand small { margin-top: 3px; color: var(--muted); font-size: 11px; letter-spacing: 0; }

.primary {
  min-height: 26px;
  border: 1px solid #4ba7ff;
  border-radius: 4px;
  background: linear-gradient(135deg, #1477e8, #138cd9);
  color: #fff;
  font-weight: 700;
  padding: 4px 9px;
  font-size: 11px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 18%), 0 0 0 1px rgb(2 13 23 / 36%);
}

.primary:hover:not(:disabled) { background: linear-gradient(135deg, #1c89ff, #19a0ed); border-color: #78bfff; }

.secondary {
  min-height: 26px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #0d151d;
  color: var(--text);
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 650;
}

.secondary:hover:not(:disabled) { border-color: #436a84; background: #14202b; }

.spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  border: 2px solid rgb(255 255 255 / 25%);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin .75s linear infinite;
}

.spinner.small { width: 13px; height: 13px; border-width: 2px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Login */
.login-shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 20px;
  background: #0b0e12;
}

.login-panel {
  width: min(100%, 380px);
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  padding: 22px;
  box-shadow: 0 22px 60px rgb(0 0 0 / 34%);
}

.login-brand { padding-bottom: 16px; border-bottom: 1px solid var(--line-soft); }
.login-panel h1 { margin: 19px 0 4px; font-size: 20px; letter-spacing: 0; }
.login-panel p { margin: 0 0 18px; color: var(--muted); font-size: 13px; }

.field {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
}

.field > span { color: var(--muted-strong); font-size: 12px; }
.field input,
.direct-connect input,
.select-control select,
.search-control {
  width: 100%;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface-soft);
  color: var(--text);
}

.field input { padding: 7px 9px; }
.field input:focus,
.direct-connect input:focus,
.select-control select:focus,
.search-control:focus-within { border-color: var(--blue); outline: none; }
.login-submit { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 3px; }
.form-error { min-height: 17px; margin-top: 10px; color: #ff9898; font-size: 12px; line-height: 1.35; }
.form-error.success-message { color: #91e8b9; }

/* Estrutura operacional */
.app-shell {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  overflow: hidden;
  background: var(--bg);
}

.topbar {
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-bottom: 1px solid var(--line);
  background: #070c11;
}

.topbar .brand { margin-right: auto; gap: 6px; }
.topbar .brand img { width: 24px; height: 24px; }
.topbar .brand strong { font-size: 11px; }
.topbar .brand small { margin-top: 1px; font-size: 9px; }
.system-state {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 0 7px;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  color: var(--muted-strong);
  font-size: 11px;
}

.system-dot,
.dot,
.filter-dot {
  display: inline-block;
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--muted);
}

.system-dot { background: var(--green); box-shadow: 0 0 0 2px rgb(59 217 132 / 12%); }
.system-state.error .system-dot { background: var(--red); box-shadow: none; }
.system-state.warning .system-dot { background: var(--amber); box-shadow: none; }

.user-state {
  display: grid;
  min-width: 82px;
  max-width: 150px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--text);
  padding: 3px 5px;
  line-height: 1.1;
  text-align: right;
}
.user-state:hover { border-color: var(--line); background: #0d151d; }

.user-state strong,
.user-state small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-state strong { font-size: 11px; }
.user-state small { margin-top: 3px; color: var(--muted); font-size: 10px; }

.icon-button {
  width: 26px;
  height: 26px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid #233a4b;
  border-radius: 4px;
  background: #0c1720;
  color: #d9edf7;
  padding: 0;
  font-size: 16px;
}

.icon-button:hover:not(:disabled) { border-color: #2c99df; background: #112433; color: #f4fbff; }
.top-action { width: 26px; height: 26px; }
.ui-icon {
  width: 15px;
  height: 15px;
  display: inline-block;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}
.icon-monitor { -webkit-mask-image: url("/central/icons/ui/monitor.svg"); mask-image: url("/central/icons/ui/monitor.svg"); }
.icon-users-round { -webkit-mask-image: url("/central/icons/ui/users-round.svg"); mask-image: url("/central/icons/ui/users-round.svg"); }
.icon-activity { -webkit-mask-image: url("/central/icons/ui/activity.svg"); mask-image: url("/central/icons/ui/activity.svg"); }
.icon-arrow-up-right { -webkit-mask-image: url("/central/icons/ui/arrow-up-right.svg"); mask-image: url("/central/icons/ui/arrow-up-right.svg"); }
.icon-folder-tree { -webkit-mask-image: url("/central/icons/ui/folder-tree.svg"); mask-image: url("/central/icons/ui/folder-tree.svg"); }
.icon-archive { -webkit-mask-image: url("/central/icons/ui/archive.svg"); mask-image: url("/central/icons/ui/archive.svg"); }
.icon-radio { -webkit-mask-image: url("/central/icons/ui/radio.svg"); mask-image: url("/central/icons/ui/radio.svg"); }
.icon-heart-pulse { -webkit-mask-image: url("/central/icons/ui/heart-pulse.svg"); mask-image: url("/central/icons/ui/heart-pulse.svg"); }
.icon-search { -webkit-mask-image: url("/central/icons/ui/search.svg"); mask-image: url("/central/icons/ui/search.svg"); }
.icon-plus { -webkit-mask-image: url("/central/icons/ui/plus.svg"); mask-image: url("/central/icons/ui/plus.svg"); }
.icon-refresh-cw { -webkit-mask-image: url("/central/icons/ui/refresh-cw.svg"); mask-image: url("/central/icons/ui/refresh-cw.svg"); }
.icon-log-out { -webkit-mask-image: url("/central/icons/ui/log-out.svg"); mask-image: url("/central/icons/ui/log-out.svg"); }
.icon-files { -webkit-mask-image: url("/central/icons/ui/files.svg"); mask-image: url("/central/icons/ui/files.svg"); }
.icon-chevron-up { -webkit-mask-image: url("/central/icons/ui/chevron-up.svg"); mask-image: url("/central/icons/ui/chevron-up.svg"); }
.icon-chevron-down { -webkit-mask-image: url("/central/icons/ui/chevron-down.svg"); mask-image: url("/central/icons/ui/chevron-down.svg"); }
.icon-copy { -webkit-mask-image: url("/central/icons/ui/copy.svg"); mask-image: url("/central/icons/ui/copy.svg"); }
.icon-download { -webkit-mask-image: url("/central/icons/ui/download.svg"); mask-image: url("/central/icons/ui/download.svg"); }
.icon-settings-2 { -webkit-mask-image: url("/central/icons/ui/settings-2.svg"); mask-image: url("/central/icons/ui/settings-2.svg"); }

.bridge-pairing-panel {
  width: min(440px, calc(100vw - 20px));
}

.bridge-pairing-body {
  display: grid;
  gap: 7px;
  padding: 9px 11px;
}

.bridge-pairing-body .security-note { min-height: 36px; margin: 0; padding: 7px 9px; font-size: 10px; }
.bridge-pairing-body .success-note { border-left-color: var(--green); background: #09251c; color: #c9f7df; }
.bridge-pairing-progress { display: flex; align-items: center; gap: 9px; }
.bridge-pairing-progress > span:last-child { display: grid; gap: 1px; }
.bridge-pairing-progress small, .bridge-expiry { color: var(--muted); font-size: 9px; }
.bridge-code-label { display: grid; gap: 4px; color: var(--muted); font-size: 9px; }

.bridge-code code {
  color: var(--accent-bright, #38bdf8);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .09em;
}
.bridge-management-panel { width: min(720px, calc(100vw - 18px)); }
.bridge-management-body { padding: 8px 12px; min-height: 92px; }
.bridge-table-wrap { max-height: min(52vh, 360px); overflow: auto; scrollbar-width: thin; scrollbar-color: #315566 transparent; }
.bridge-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 11px; }
.bridge-table th { color: var(--muted); font-size: 9px; text-align: left; text-transform: uppercase; padding: 5px 6px; border-bottom: 1px solid var(--line); }
.bridge-table td { padding: 6px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; overflow: hidden; }
.bridge-table td:nth-child(1) { width: 27%; }
.bridge-table td:nth-child(2) { width: 42%; }
.bridge-table td:nth-child(3) { width: 23%; }
.bridge-table td:nth-child(4) { width: 36px; text-align: right; }
.bridge-table td strong, .bridge-table td small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bridge-table td small { color: var(--muted); margin-top: 2px; font-size: 9px; }
.bridge-table code { color: var(--text); font-size: 9px; }
.compact-empty { color: var(--muted); min-height: 84px; display: grid; place-items: center; font-size: 11px; }
@media (max-width: 560px) {
  .bridge-table th:nth-child(2), .bridge-table td:nth-child(2) { display: none; }
  .bridge-table td:nth-child(1) { width: 48%; }
  .bridge-table td:nth-child(3) { width: auto; }
}
.icon-trash-2 { -webkit-mask-image: url("/central/icons/ui/trash-2.svg"); mask-image: url("/central/icons/ui/trash-2.svg"); }
.icon-rotate-ccw { -webkit-mask-image: url("/central/icons/ui/rotate-ccw.svg"); mask-image: url("/central/icons/ui/rotate-ccw.svg"); }
.installation-queue-action { position: relative; overflow: visible; }
.installer-distribution-menu { position: relative; }
.installer-distribution-menu > summary { list-style: none; }
.installer-distribution-menu > summary::-webkit-details-marker { display: none; }
.installer-distribution-menu .action-menu-popover {
  top: calc(100% + 5px);
  right: 0;
  min-width: 210px;
}
.installer-distribution-menu .menu-caption {
  display: grid;
  gap: 1px;
  border-bottom: 1px solid var(--line-soft);
  padding: 7px 9px;
}
.installer-distribution-menu .menu-caption strong { font-size: 10px; }
.installer-distribution-menu .menu-caption small { color: var(--muted); font-size: 9px; }
.installer-distribution-menu .menu-section-title {
  padding: 6px 9px 3px;
  color: var(--accent-soft);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}
.installation-badge {
  position: absolute;
  top: -5px;
  right: -6px;
  min-width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  border: 1px solid #111419;
  border-radius: 8px;
  background: #c27b20;
  color: #fff;
  padding: 0 4px;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
}

.operations-bar {
  min-height: 37px;
  display: grid;
  grid-template-columns: auto 142px minmax(215px, .85fr) minmax(210px, .78fr) minmax(180px, 1fr) auto;
  grid-template-areas: "tabs direct scope state search summary";
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-bottom: 1px solid var(--line);
  background: #070b0f;
}

.operations-bar.view-clients {
  grid-template-columns: auto 142px minmax(118px, 160px) minmax(180px, 1fr) auto;
  grid-template-areas: "tabs direct scope search summary";
}

.operations-bar.view-sessions {
  grid-template-columns: auto 142px minmax(150px, .55fr) minmax(128px, 170px) minmax(180px, 1fr) auto;
  grid-template-areas: "tabs direct scope state search summary";
}

.tabs { grid-area: tabs; display: flex; align-items: center; gap: 2px; }
.tab {
  width: 36px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: #11161b;
  color: var(--muted);
  padding: 0 3px;
  font-weight: 650;
  font-size: 10px;
}

.tab:hover { border-color: #3b4c5c; color: var(--text); background: #17202a; }
.tab.active { border-color: #2f89cf; color: #7bc5ff; background: #10263a; }
.tab .ui-icon { width: 14px; height: 14px; }
.tab-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.tab-count { min-width: 12px; color: var(--muted-strong); font-size: 8px; font-variant-numeric: tabular-nums; line-height: 1; }

.direct-connect {
  grid-area: direct;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px 28px;
  align-items: center;
  gap: 3px;
}

.direct-connect input { height: 28px; min-height: 28px; padding: 3px 7px; font-size: 11px; }
.direct-connect .direct-connect-button {
  width: 28px;
  min-height: 28px;
  display: grid;
  place-items: center;
  padding: 0;
}

.filter-stack { grid-area: state; min-width: 0; display: grid; grid-template-columns: minmax(95px, 1fr) minmax(105px, 1.08fr); gap: 3px; }
.scope-filters { grid-area: scope; min-width: 0; display: grid; grid-template-columns: minmax(112px, 1fr) minmax(84px, .58fr); gap: 3px; }
.scope-filters.single-scope { grid-template-columns: 1fr; }
.scope-filters.client-scope { grid-template-columns: minmax(90px, 1fr) 28px; }
.new-client { width: 28px; height: 28px; color: #9dd2ff; border-color: #2d6898; background: #102538; }

.filter-picker {
  position: relative;
  min-width: 0;
  height: 28px;
  color: #8fcfff;
}
.filter-picker > summary { list-style: none; user-select: none; }
.filter-picker > summary::-webkit-details-marker { display: none; }
.filter-picker-trigger {
  width: 100%;
  height: 28px;
  min-width: 0;
  display: grid;
  grid-template-columns: 15px minmax(0, 1fr) 8px;
  align-items: center;
  gap: 4px;
  border: 1px solid #29465b;
  border-radius: 4px;
  background: linear-gradient(180deg, #0e1a24, #09131c);
  color: #8fcfff;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 3%);
  cursor: pointer;
  padding: 0 6px;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.filter-picker:hover > .filter-picker-trigger,
.filter-picker[open] > .filter-picker-trigger { border-color: #3d6f91; background: linear-gradient(180deg, #122331, #0b1822); }
.filter-picker[open] > .filter-picker-trigger { border-color: var(--blue); box-shadow: 0 0 0 1px rgb(35 138 245 / 28%), inset 0 1px 0 rgb(255 255 255 / 4%); }
.filter-picker-trigger > .ui-icon { width: 13px; height: 13px; }
.filter-picker-label { min-width: 0; overflow: hidden; color: var(--text); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.filter-picker-caret { width: 5px; height: 5px; border-right: 1.5px solid #8fb7d2; border-bottom: 1.5px solid #8fb7d2; transform: translateY(-2px) rotate(45deg); }
.filter-picker[open] .filter-picker-caret { transform: translateY(1px) rotate(225deg); }
.filter-picker-popover {
  position: absolute;
  z-index: 70;
  top: calc(100% + 4px);
  left: 0;
  width: max-content;
  min-width: 100%;
  max-width: min(340px, calc(100vw - 14px));
  overflow: auto;
  border: 1px solid #36546a;
  border-radius: 5px;
  background: #09131c;
  box-shadow: 0 14px 38px rgb(0 0 0 / 55%);
  padding: 3px;
}
.filter-picker-option {
  width: 100%;
  min-height: 27px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 12px;
  align-items: center;
  gap: 5px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--muted-strong);
  cursor: pointer;
  padding: 4px 6px;
  text-align: left;
  font-size: 10px;
  white-space: nowrap;
}
.filter-picker-option:hover { background: #132637; color: var(--text); }
.filter-picker-option.selected { background: #12344d; color: #dff3ff; }
.filter-picker-option b { color: #69c5ff; font-size: 11px; text-align: right; }
.filter-picker-indent { color: #5d8ead; letter-spacing: 1px; }
.filter-picker-option.tone-online span { color: #82dfa8; }
.filter-picker-option.tone-offline span { color: #ffaaa7; }
.filter-picker-option.tone-warning span { color: #f4c874; }
.filter-picker-option.tone-unknown span { color: #aeb9c3; }
.search-control {
  grid-area: search;
  min-height: 28px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 6px;
}

.search-control > .ui-icon { width: 13px; height: 13px; color: var(--muted); }
.search-control input { width: 100%; height: 26px; border: 0; outline: 0; background: transparent; color: var(--text); padding: 3px 0; font-size: 10px; }
.search-control input::placeholder,
.direct-connect input::placeholder { color: #727d86; }

.segmented {
  min-width: 0;
  height: 31px;
  display: flex;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  background: #101318;
}

.segment {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex: 1 1 auto;
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  padding: 3px 7px;
  white-space: nowrap;
  font-size: 10px;
}

.segment:last-child { border-right: 0; }
.segment:hover { color: var(--text); background: #181d22; }
.segment.active { background: #222830; color: #fff; }
.segment b { min-width: 15px; color: var(--muted-strong); font-size: 10px; font-variant-numeric: tabular-nums; }
.filter-dot.all { background: var(--blue); }
.filter-dot.online, .dot.online { background: var(--green); }
.filter-dot.offline, .dot.offline { background: var(--red); }
.filter-dot.unknown, .dot.unknown { background: var(--amber); }

.view-summary { grid-area: summary; color: var(--muted); font-size: 9px; white-space: nowrap; }

.refresh-line {
  position: absolute;
  z-index: 8;
  top: 79px;
  left: 0;
  width: 24%;
  height: 2px;
  background: var(--cyan);
  animation: refresh-line 1.1s ease-in-out infinite alternate;
}

@keyframes refresh-line {
  from { transform: translateX(-100%); }
  to { transform: translateX(415%); }
}

.notice-stack:empty { border-bottom: 0; }
.notice-stack { border-bottom: 1px solid var(--line); }
.notice {
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 10px;
  font-size: 11px;
}

.notice span { min-width: 0; flex: 1; }
.error-notice { border-left: 3px solid var(--red); background: #251315; color: #ffc4c4; }
.warning-notice { border-left: 3px solid var(--amber); background: #211b11; color: #efd8ae; }
.notice button {
  min-height: 26px;
  border: 1px solid currentColor;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  padding: 3px 8px;
  font-size: 10px;
}

.notice .notice-close { width: 27px; padding: 0; font-size: 16px; }
.workspace { min-width: 0; min-height: 0; overflow: hidden; background: #0a0d10; }
.table-wrap { width: 100%; height: 100%; min-width: 0; overflow: auto; }

/* Tabelas densas */
.data-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  color: #dde3e7;
  font-size: 10px;
}

.data-table th {
  position: sticky;
  z-index: 3;
  top: 0;
  height: 26px;
  border-bottom: 1px solid var(--line);
  background: #14181d;
  padding: 0 5px;
  color: var(--muted);
  text-align: left;
  font-weight: 600;
}

.data-table td {
  height: 29px;
  min-width: 0;
  border-bottom: 1px solid var(--line-soft);
  padding: 3px 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.data-table tbody > tr:not(.detail-row):hover > td { background: #0b141b; }
.data-table strong { color: #f4f7f8; font-size: 10px; }
.sort-button {
  width: 100%;
  height: 25px;
  display: flex;
  align-items: center;
  gap: 4px;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  text-align: left;
  font-weight: inherit;
  font-size: inherit;
}

.sort-button span { margin-left: auto; color: #66717a; }
.sort-button.is-sorted { color: #eaf5ff; }
.sort-button.is-sorted span { color: var(--blue); }

.client-cell .dot { margin-right: 7px; vertical-align: 1px; }
.mobile-group,
.mobile-access { display: none; }
.id-cell,
.duration-cell { color: #b8cbd6; font-variant-numeric: tabular-nums; }
.group-cell { color: #9dc9c5; }
.access-cell,
.started-cell { color: #aeb7be; font-variant-numeric: tabular-nums; }
.operator-cell { color: #c5b9dc; }
.action-cell { text-align: right; }
/* Menus de linha precisam escapar da célula em todas as larguras da tabela. */
.data-table td.action-cell { overflow: visible; }
.compact-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 2px; }
.compact-actions .icon-button { width: 24px; height: 24px; font-size: 13px; }
.compact-actions .ui-icon { width: 12px; height: 12px; }
.row-expand { width: 24px; height: 24px; border-color: transparent; background: transparent; color: var(--muted); }
.row-expand:hover:not(:disabled) { border-color: var(--line); }
.connect-button { width: 24px; height: 24px; border-color: #217fc2; background: linear-gradient(135deg, #0d4779, #0d2e4b); color: #9ed8ff; }
.connect-button:hover:not(:disabled) { border-color: #59b7ff; background: linear-gradient(135deg, #135d9d, #103b62); }
.native-connect-button { border-color: #247a80; background: linear-gradient(135deg, #0a4147, #092b34); color: #87edf0; }
.native-connect-button:hover:not(:disabled) { border-color: #42d6db; background: linear-gradient(135deg, #0d5960, #0b3945); color: #c7ffff; }

.action-menu { position: relative; flex: 0 0 auto; }
.action-menu[open] { z-index: 60; }
.data-table tbody > tr:has(.action-menu[open]) { position: relative; z-index: 50; }
.action-menu > summary { list-style: none; user-select: none; }
.action-menu > summary::-webkit-details-marker { display: none; }
.action-menu[open] > summary { border-color: #4f6578; background: #202932; }
.action-menu-popover {
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  right: 0;
  width: max-content;
  min-width: 172px;
  display: grid;
  border: 1px solid #46515b;
  border-radius: 5px;
  overflow: hidden;
  background: #171c22;
  box-shadow: 0 14px 38px rgb(0 0 0 / 48%);
}
.action-menu-popover button,
.action-menu-popover a[role="menuitem"] {
  min-height: 31px;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  background: transparent;
  color: var(--text);
  padding: 5px 9px;
  text-align: left;
  font-size: 11px;
  text-decoration: none;
  white-space: nowrap;
}
.action-menu-popover button:last-child,
.action-menu-popover a[role="menuitem"]:last-child { border-bottom: 0; }
.action-menu-popover button:hover,
.action-menu-popover a[role="menuitem"]:hover { background: #232b34; }
.action-menu-popover button > span,
.action-menu-popover a[role="menuitem"] > span { color: #9ccfff; text-align: center; font-size: 14px; }
.action-menu-popover .danger-menu-item { color: #ffaaaa; }
.action-menu-popover .danger-menu-item > span { color: #ff7f7f; }
.client-device-actions .action-menu-popover { right: 0; }
.client-device-list > div:nth-last-child(-n+2) .action-menu-popover { top: auto; bottom: calc(100% + 4px); }
.data-table tbody > tr:nth-last-child(-n+3):nth-child(n+4):not(.detail-row) .action-menu-popover {
  top: auto;
  bottom: calc(100% + 4px);
}

.status,
.session-status,
.health-status,
.client-status {
  display: inline-flex;
  min-height: 18px;
  align-items: center;
  border: 1px solid #59636b;
  border-radius: 3px;
  background: #181c20;
  color: #c8d0d5;
  padding: 1px 5px;
  font-size: 9px;
}

.status.online,
.session-status.active { border-color: #28724e; background: #10291d; color: #7ce4a9; }
.status.offline,
.session-status.failed { border-color: #834145; background: #2b1618; color: #ffaaaa; }
.status.unknown { border-color: #735c34; background: #291f10; color: #f2cb85; }
.session-status.completed { border-color: #3c6681; background: #132430; color: #9bd1ef; }
.health-status.healthy { border-color: #28724e; background: #10291d; color: #7ce4a9; }
.health-status.attention,
.health-status.stale { border-color: #735c34; background: #291f10; color: #f2cb85; }
.health-status.critical { border-color: #834145; background: #2b1618; color: #ffaaaa; }
.health-status.unmanaged { border-color: #4d5862; background: #171c21; color: #aeb7be; }
.client-status.active { border-color: #28724e; background: #10291d; color: #7ce4a9; }
.client-status.inactive { border-color: #4d5862; background: #171c21; color: #aeb7be; }
.health-dot { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #68737c; }
.health-dot.healthy { background: var(--green); }
.health-dot.attention, .health-dot.stale { background: var(--amber); }
.health-dot.critical { background: var(--red); }

.col-client { width: 17%; }
.col-device { width: 13%; }
.col-id { width: 10%; }
.col-presence { width: 9%; }
.col-health { width: 12%; }
.col-group { width: 14%; }
.col-access { width: 15%; }
.col-action { width: 130px; }

.col-company { width: 34%; }
.col-count { width: 10%; }
.col-client-activity { width: 22%; }
.col-client-status { width: 14%; }
.col-client-actions { width: 64px; }
.numeric-cell { color: #c8d2d8; text-align: left; font-variant-numeric: tabular-nums; }
.numeric-cell.has-issues { color: #f2cb85; font-weight: 700; }
.client-row .client-cell { display: table-cell; }
.client-row-trigger {
  width: 100%;
  min-width: 0;
  display: grid;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  border-radius: 2px;
  background: transparent !important;
  box-shadow: none;
  color: inherit;
  margin: 0;
  padding: 0;
  text-align: left;
}
.client-row-trigger:hover strong { color: #8fd2ff; }
.client-row-trigger:focus-visible { outline-width: 1px; outline-offset: 1px; }
.client-row .client-cell small { display: block; overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; }

.col-session-client { width: 18%; }
.col-session-device { width: 14%; }
.col-session-id { width: 11%; }
.col-operator { width: 13%; }
.col-started { width: 16%; }
.col-duration { width: 10%; }
.col-transport { width: 8%; }
.col-result { width: 11%; }

.detail-row td {
  height: auto;
  padding: 0;
  border-bottom-color: #3a434c;
  overflow: visible;
  white-space: normal;
  background: #071116;
}

.details-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-left: 3px solid var(--cyan);
  padding: 7px 10px 8px;
  background: #071116;
}

.detail-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  min-height: 30px;
  border-top: 1px solid var(--line-soft);
  margin-top: 4px;
  padding-top: 5px;
}

.detail-command { min-height: 24px; display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; font-size: 9px; }
.detail-command .ui-icon { width: 12px; height: 12px; flex: 0 0 auto; }
.detail-actions-footer .detail-command {
  min-width: 0;
  justify-content: center;
  border-color: #25455a;
  background: #0a151e;
}
.detail-actions-footer .detail-command.primary {
  border-color: #4ba7ff;
  background: linear-gradient(135deg, #1477e8, #138cd9);
}
.detail-actions-footer .detail-command.danger-secondary { border-color: #71393f; background: #201215; }
.detail-wide { grid-column: span 2; }

.details-grid dl {
  min-width: 0;
  margin: 0;
  padding: 5px 10px 5px 0;
  border-bottom: 1px solid rgb(34 49 62 / 48%);
}

.details-grid dt {
  margin-bottom: 4px;
  color: #7ea9c1;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
}

.details-grid dd {
  min-width: 0;
  margin: 0;
  color: #dce7ed;
  overflow-wrap: anywhere;
  font-size: 11px;
  line-height: 1.4;
}

.details-grid dd .dot { margin-right: 6px; vertical-align: 1px; }
.detail-tags,
.detail-note { grid-column: span 2; }
.tag {
  display: inline-block;
  margin: 0 4px 3px 0;
  border: 1px solid #3b5f61;
  border-radius: 3px;
  background: #142325;
  color: #a8ded9;
  padding: 1px 5px;
  font-size: 10px;
}

.client-details { border-left: 3px solid var(--blue); padding: 8px 10px 9px; }
.client-details > .detail-actions { margin: 0 0 7px; }
.client-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.client-facts dl { min-width: 0; margin: 0; padding: 5px 14px 5px 0; }
.client-facts dt { margin-bottom: 3px; color: #77838c; font-size: 9px; font-weight: 700; text-transform: uppercase; }
.client-facts dd { margin: 0; color: #d9e0e4; overflow-wrap: anywhere; font-size: 11px; }
.client-device-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin-top: 7px; border: 1px solid var(--line-soft); background: var(--line-soft); }
.client-device-list > div { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "dot name action" ". meta action"; align-items: center; gap: 1px 7px; background: #0d1216; padding: 5px 7px; }
.client-device-list > div.archived { opacity: .7; }
.client-device-list .dot { grid-area: dot; }
.client-device-list strong { grid-area: name; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.client-device-list small { grid-area: meta; color: var(--muted); font-size: 9px; }
.client-device-actions { grid-area: action; display: inline-flex; gap: 3px; }
.client-device-list p { margin: 0; padding: 10px; color: var(--muted); }

.state-row {
  height: 110px !important;
  color: var(--muted);
  text-align: center;
}

.state-row .spinner { margin-right: 8px; vertical-align: -3px; }
.statusbar {
  min-height: 28px;
  display: flex;
  align-items: center;
  gap: 16px;
  border-top: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  padding: 5px 10px;
  font-size: 10px;
  white-space: nowrap;
}

.statusbar-spacer { flex: 1; }

/* Transferência persistente sem abandonar a Central */
#file-transfer-root[hidden] { display: none; }
.file-transfer-panel {
  position: fixed;
  z-index: 80;
  right: 12px;
  bottom: 12px;
  width: min(560px, calc(100vw - 20px));
  height: min(360px, calc(100dvh - 52px));
  min-width: 330px;
  min-height: 180px;
  display: grid;
  grid-template-rows: 28px minmax(0, 1fr);
  overflow: hidden;
  resize: both;
  border: 1px solid #476071;
  border-radius: 6px;
  background: #071019;
  box-shadow: 0 24px 80px rgb(0 0 0 / 64%);
}
.file-transfer-header { min-width: 0; display: flex; align-items: center; gap: 4px; border-bottom: 1px solid #263c4c; background: #0a141d; padding: 3px 4px 3px 6px; }
.file-transfer-mark { width: 16px; display: inline-grid; place-items: center; color: #78c5ff; }
.file-transfer-mark .ui-icon { width: 13px; height: 13px; }
.file-transfer-title { min-width: 0; flex: 1; display: grid; line-height: 1.05; }
.file-transfer-title strong, .file-transfer-title small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-transfer-title strong { font-size: 10px; }
.file-transfer-title small { margin-top: 1px; color: var(--muted); font-size: 8px; }
.file-transfer-state { min-width: 62px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; color: var(--muted-strong); font-size: 8px; }
.file-transfer-state i { width: 5px; height: 5px; border-radius: 50%; background: var(--amber); }
.file-transfer-state[data-state="ready"] i { background: var(--green); }
.file-transfer-state[data-state="error"] i { background: var(--red); }
.file-transfer-state[data-state="closed"] i { background: var(--muted); }
.file-transfer-header .icon-button { width: 23px; height: 23px; border-radius: 3px; }
.file-transfer-header .icon-button .ui-icon { width: 11px; height: 11px; }
.file-transfer-panel iframe { width: 100%; height: 100%; min-width: 0; min-height: 0; border: 0; background: #06101a; }
.file-transfer-panel.maximized { inset: 8px; width: auto; height: auto; min-width: 0; min-height: 0; resize: none; }
.file-transfer-panel.minimized { width: min(280px, calc(100vw - 16px)); height: 28px; min-width: 0; min-height: 0; resize: none; }
.file-transfer-panel.minimized iframe, .file-transfer-panel.minimized .file-maximize { display: none; }

/* Gestão e inscrição do agente */
.modal-backdrop {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgb(2 5 8 / 72%);
  padding: 8px;
}

.modal-panel {
  width: min(560px, 100%);
  max-height: min(620px, calc(100dvh - 16px));
  overflow: auto;
  border: 1px solid #3b4651;
  border-radius: 6px;
  background: #11161c;
  box-shadow: 0 28px 80px rgb(0 0 0 / 55%);
}

.modal-panel > header,
.modal-panel > footer {
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid var(--line);
  padding: 4px 7px 4px 10px;
}

.modal-panel > header h2 { flex: 1; margin: 0; font-size: 13px; }
.modal-panel > footer { justify-content: flex-end; border-top: 1px solid var(--line); border-bottom: 0; }
.modal-panel > header .icon-button { width: 25px; height: 25px; font-size: 14px; }
.modal-panel > footer .footer-spacer { flex: 1; }
.compact-form { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 5px; padding: 7px 8px 8px; }
.compact-form .field { margin: 0; }
.compact-form .field { gap: 3px; }
.compact-form .field > span { font-size: 10px; }
.compact-form input,
.compact-form select,
.compact-form textarea { width: 100%; min-height: 28px; border: 1px solid var(--line); border-radius: 4px; background: #0d1217; color: var(--text); padding: 4px 6px; font-size: 11px; }
.compact-form textarea { min-height: 48px; resize: vertical; }
.field-name { grid-column: span 6; }
.field-document, .field-phone, .field-status, .field-asset, .field-criticality { grid-column: span 3; }
.field-email, .field-site, .field-id { grid-column: span 4; }
.field-client, .field-tags { grid-column: span 6; }
.field-notes, .dialog-error, .compact-form footer { grid-column: 1 / -1; }
.compact-form footer { display: flex; justify-content: flex-end; gap: 7px; padding-top: 4px; }
.dialog-error { margin: 0; }

/* Seletores internos e cadastros mestres */
.form-picker {
  position: relative;
  min-width: 0;
  color: var(--text);
}
.form-picker > summary { list-style: none; user-select: none; }
.form-picker > summary::-webkit-details-marker { display: none; }
.form-picker > input[type="hidden"] { display: none; }
.form-picker-trigger {
  width: 100%;
  min-width: 0;
  min-height: 30px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 9px;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #0d1217;
  color: var(--text);
  padding: 4px 7px;
  text-align: left;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 2%);
}
.form-picker-trigger:hover:not(:disabled) { border-color: #42677f; background: #101922; }
.form-picker[open] > .form-picker-trigger,
.form-picker.is-open > .form-picker-trigger,
.form-picker-trigger[aria-expanded="true"] {
  border-color: var(--blue);
  background: #101d28;
  box-shadow: 0 0 0 1px rgb(35 138 245 / 24%);
}
.form-picker-trigger:focus-visible {
  outline: 2px solid #69b9ff;
  outline-offset: 1px;
}
.form-picker-value {
  min-width: 0;
  display: grid;
  gap: 1px;
  overflow: hidden;
  font-size: 11px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.form-picker-value strong,
.form-picker-value span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.form-picker-value small,
.form-picker-meta { color: var(--muted); font-size: 9px; font-weight: 500; }
.form-picker-placeholder { color: #74828d; font-weight: 500; }
.form-picker-caret {
  width: 6px;
  height: 6px;
  justify-self: end;
  border-right: 1.5px solid #8fb7d2;
  border-bottom: 1.5px solid #8fb7d2;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .14s ease;
}
.form-picker[open] .form-picker-caret,
.form-picker.is-open .form-picker-caret,
.form-picker-trigger[aria-expanded="true"] .form-picker-caret { transform: translateY(2px) rotate(225deg); }
.form-picker-popover {
  position: absolute;
  z-index: 160;
  top: calc(100% + 4px);
  left: 0;
  width: max(100%, 280px);
  max-width: min(380px, calc(100vw - 24px));
  max-height: min(292px, calc(100dvh - 104px));
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid #3a5a70;
  border-radius: 5px;
  background: #0a1219;
  box-shadow: 0 18px 46px rgb(0 0 0 / 62%);
  padding: 4px;
}
.form-picker.align-end .form-picker-popover,
.form-picker[data-align="end"] .form-picker-popover { right: 0; left: auto; }
.form-picker.opens-up .form-picker-popover,
.form-picker[data-placement="top"] .form-picker-popover { top: auto; bottom: calc(100% + 4px); }
.form-picker-search {
  position: sticky;
  z-index: 1;
  top: -4px;
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  margin: -1px -1px 3px;
  border-bottom: 1px solid var(--line);
  background: #0a1219;
  padding: 4px;
}
.form-picker-search .ui-icon { width: 12px; height: 12px; color: var(--muted); }
.form-picker-search input {
  width: 100%;
  min-height: 27px;
  border: 1px solid #2b4050;
  border-radius: 3px;
  background: #070c11;
  color: var(--text);
  padding: 3px 6px;
  font-size: 10px;
}
.form-picker-search input:focus { border-color: var(--blue); outline: 0; }
.form-picker-options { display: grid; gap: 1px; }
.form-picker-option {
  --picker-indent: 0px;
  width: 100%;
  min-width: 0;
  min-height: 30px;
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--muted-strong);
  padding: 4px 6px 4px calc(6px + var(--picker-indent));
  text-align: left;
}
.form-picker-option[data-depth="1"] { --picker-indent: 13px; }
.form-picker-option[data-depth="2"] { --picker-indent: 26px; }
.form-picker-option[data-depth="3"] { --picker-indent: 39px; }
.form-picker-option[data-depth="4"] { --picker-indent: 52px; }
.form-picker-option[data-depth="5"] { --picker-indent: 65px; }
.form-picker-option[data-depth="6"] { --picker-indent: 78px; }
.form-picker-option::before {
  content: "";
  width: 6px;
  height: 6px;
  justify-self: center;
  border: 1px solid #526778;
  border-radius: 50%;
  background: #101820;
}
.form-picker-option:hover:not(:disabled),
.form-picker-option:focus-visible { background: #132433; color: #f3f9fd; }
.form-picker-option:focus-visible { outline: 1px solid #68baff; outline-offset: -1px; }
.form-picker-option[aria-selected="true"],
.form-picker-option.selected { background: #12334a; color: #e6f5ff; }
.form-picker-option[aria-selected="true"]::before,
.form-picker-option.selected::before { border-color: #79c8ff; background: var(--blue); box-shadow: inset 0 0 0 2px #12334a; }
.form-picker-option-main { min-width: 0; display: grid; gap: 1px; }
.form-picker-option-main strong,
.form-picker-option-main span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.form-picker-option-main strong { color: inherit; font-size: 10px; font-weight: 650; }
.form-picker-option-main small { overflow: hidden; color: var(--muted); font-size: 8.5px; text-overflow: ellipsis; white-space: nowrap; }
.form-picker-option-meta { color: #8ba5b7; font-size: 8.5px; white-space: nowrap; }
.form-picker-option.is-create,
.form-picker-create { border-top: 1px solid var(--line); color: #9dd8ff; }
.form-picker-empty { padding: 14px 10px; color: var(--muted); font-size: 10px; text-align: center; }
.form-picker[aria-disabled="true"],
.form-picker.is-disabled { pointer-events: none; opacity: .55; }

/* O app compartilha a estrutura do filter-picker; estes seletores especializam o uso em formulários. */
.form-picker.filter-picker { height: auto; min-height: 30px; }
.form-picker > .filter-picker-trigger {
  height: auto;
  min-height: 30px;
  border-color: var(--line);
  background: #0d1217;
  padding-inline: 7px;
}
.form-picker:hover > .filter-picker-trigger { border-color: #42677f; background: #101922; }
.form-picker[open] > .filter-picker-trigger {
  border-color: var(--blue);
  background: #101d28;
  box-shadow: 0 0 0 1px rgb(35 138 245 / 24%);
}
.form-picker > .filter-picker-trigger:focus-visible {
  outline: 2px solid #69b9ff;
  outline-offset: 1px;
}
.form-picker > .filter-picker-trigger .filter-picker-label { color: var(--text); font-size: 11px; }
.form-picker > .filter-picker-popover,
[data-picker-popover] {
  z-index: 160;
  width: max(100%, 280px);
  max-width: min(380px, calc(100vw - 24px));
  max-height: min(292px, calc(100dvh - 104px));
  overscroll-behavior: contain;
  border-color: #3a5a70;
  background: #0a1219;
  box-shadow: 0 18px 46px rgb(0 0 0 / 62%);
}
.form-picker > .filter-picker-popover > [data-picker-search],
[data-picker-popover] > [data-picker-search] {
  position: sticky;
  z-index: 2;
  top: 0;
  min-height: 30px !important;
  margin: 0 0 4px !important;
  border: 1px solid #2b4050;
  border-radius: 3px;
  background: #070c11;
  color: var(--text);
  padding: 4px 7px;
  font-size: 10px;
}
.form-picker > .filter-picker-popover > [data-picker-search]:focus,
[data-picker-popover] > [data-picker-search]:focus { border-color: var(--blue); outline: 0; }
.form-picker .filter-picker-option,
[data-picker-popover] .filter-picker-option { min-height: 30px; }
.form-picker .filter-picker-option:focus-visible,
[data-picker-popover] .filter-picker-option:focus-visible { outline: 1px solid #68baff; outline-offset: -1px; }
.form-picker .filter-picker-option[aria-selected="true"],
[data-picker-popover] .filter-picker-option[aria-selected="true"] { background: #12334a; color: #e6f5ff; }

.group-manager-panel {
  width: min(680px, 100%);
  max-height: min(680px, calc(100dvh - 16px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.group-manager {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 6px;
  padding: 7px 8px 8px;
}
.group-manager-header,
.group-manager-toolbar {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.group-manager-heading { min-width: 0; flex: 1; display: grid; gap: 1px; }
.group-manager-heading strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.group-manager-heading small { color: var(--muted); font-size: 9px; }
.group-manager-actions,
.client-action-bar,
.client-actions-bar {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}
.client-action-bar,
.client-actions-bar {
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line-soft);
  background: #0a1016;
  padding: 5px 7px;
}
.client-action-bar > :first-child,
.client-actions-bar > :first-child { margin-left: auto; }
.client-edit-action { border-color: #315d7c; color: #b9e2ff; }
.client-row .compact-actions { min-width: 53px; position: relative; isolation: isolate; }
.client-row .compact-actions [data-action="edit-client"] {
  border-color: #315d7c;
  background: #0e2130;
  color: #b9e2ff;
}
.client-row .compact-actions [data-action="edit-client"]:hover:not(:disabled) {
  border-color: #58a8df;
  background: #123149;
  color: #e7f6ff;
}
.group-manager-list {
  min-width: 0;
  min-height: 86px;
  max-height: min(410px, calc(100dvh - 174px));
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #090e13;
}
.group-manager-row {
  --group-indent: 0px;
  min-width: 0;
  min-height: 34px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  border-bottom: 1px solid var(--line-soft);
  background: #0b1117;
  padding: 3px 5px 3px 0;
}
.group-manager-row:last-child { border-bottom: 0; }
.group-manager-row:nth-child(even) { background: #0a1015; }
.group-manager-row:hover { background: #101b24; }
.group-manager-row:focus-within { background: #102130; box-shadow: inset 2px 0 0 var(--blue); }
.group-manager-row[aria-current="true"],
.group-manager-row.selected { background: #10283a; }
.group-manager-row[data-depth="1"] { --group-indent: 15px; }
.group-manager-row[data-depth="2"] { --group-indent: 30px; }
.group-manager-row[data-depth="3"] { --group-indent: 45px; }
.group-manager-row[data-depth="4"] { --group-indent: 60px; }
.group-manager-row[data-depth="5"] { --group-indent: 75px; }
.group-manager-row[data-depth="6"] { --group-indent: 90px; }
.group-manager-main {
  position: relative;
  min-width: 0;
  display: grid;
  gap: 1px;
  padding: 3px 5px 3px calc(9px + var(--group-indent));
}
.group-manager-row[data-depth]:not([data-depth="0"]) .group-manager-main::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(5px + var(--group-indent));
  border-left: 1px solid #294354;
}
.group-manager-path,
.group-manager-label { overflow: hidden; color: #e5eef4; font-size: 10.5px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.group-manager-meta { overflow: hidden; color: var(--muted); font-size: 8.5px; text-overflow: ellipsis; white-space: nowrap; }
.group-manager-row-actions { display: inline-flex; align-items: center; gap: 3px; }
.group-manager-row-actions .icon-button { width: 25px; height: 25px; border-color: transparent; background: transparent; }
.group-manager-row:hover .group-manager-row-actions .icon-button,
.group-manager-row:focus-within .group-manager-row-actions .icon-button { border-color: #294355; background: #0c1821; }
.group-manager-empty { display: grid; place-items: center; min-height: 96px; padding: 14px; color: var(--muted); font-size: 10px; text-align: center; }
.group-manager-form { grid-column: 1 / -1; }
.group-manager-form .field { margin: 0; }

/* Hooks usados pelo gerenciador renderizado dinamicamente. */
.modal-panel:has([data-group-management-list]) {
  width: min(780px, 100%);
  max-height: calc(100dvh - 16px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.modal-panel:has([data-group-management-list]) > div { min-width: 0; min-height: 0; }
.modal-panel:has([data-group-management-list]) aside { min-width: 0; background: #0a1015; }
[data-group-management-search] {
  width: 100%;
  min-width: 0;
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #080d12;
  color: var(--text);
  padding: 4px 7px;
  font-size: 10px;
}
[data-group-management-search]:focus { border-color: var(--blue); outline: 0; box-shadow: 0 0 0 1px rgb(35 138 245 / 22%); }
[data-group-management-list] {
  min-width: 0;
  overscroll-behavior: contain;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #080d12;
  padding: 3px;
}
[data-group-management-item] {
  position: relative;
  border-radius: 3px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 2%);
}
[data-group-management-item]:hover:not(:disabled) { filter: brightness(1.13); }
[data-group-management-item]:focus-visible { outline: 1px solid #6bbcff; outline-offset: -1px; }
[data-group-management-item][aria-current="true"] { box-shadow: inset 2px 0 0 #69bfff; }
[data-group-management-item] > span { font-size: 10px; font-weight: 650; }
[data-group-management-item] > small { font-variant-numeric: tabular-nums; }
[data-group-management-empty] { min-height: 64px; place-items: center; text-align: center; }
#group-form { min-width: 0; min-height: 0; align-content: start; }
#group-form .field-name { min-width: 0; }

@media (min-width: 761px) {
  .modal-panel:has(.form-picker[open]),
  .modal-panel:has(.form-picker.is-open),
  .installation-panel:has(.form-picker[open]),
  .compact-form:has(.form-picker[open]) { overflow: visible; }
}

.danger-primary {
  min-height: 26px;
  border: 1px solid #a4484d;
  border-radius: 4px;
  background: #8a272d;
  color: #fff;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 700;
}
.danger-primary:hover { background: #a43138; }
.confirm-panel { width: min(370px, 100%); }
.confirm-body { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 8px; padding: 9px 10px; }
.confirm-body .confirm-icon { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid #784044; border-radius: 50%; background: #30191c; color: #ff9b9b; font-size: 12px; font-weight: 800; }
.confirm-body strong { display: block; font-size: 12px; }
.confirm-body p { margin: 3px 0 4px; color: var(--muted-strong); font-size: 10px; line-height: 1.35; }
.confirm-body small { color: var(--muted); font-size: 9px; }
.confirm-error { padding: 0 10px; }
.confirm-panel > footer { display: flex; justify-content: flex-end; gap: 7px; }

.enrollment-panel { width: min(540px, 100%); }
.enrollment-body { display: grid; gap: 7px; padding: 8px 10px; }
.enrollment-body p { margin: 0; color: var(--muted-strong); font-size: 11px; }
.enrollment-steps { margin: 0; padding-left: 17px; color: var(--text); font-size: 11px; line-height: 1.38; }
.enrollment-steps li + li { margin-top: 2px; }
.enrollment-body label { display: grid; gap: 3px; color: var(--muted); font-size: 9px; }
.download-agent { width: max-content; text-decoration: none; }
.download-options { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.advanced-install { border-top: 1px solid var(--line); padding-top: 6px; }
.advanced-install summary { width: max-content; cursor: pointer; color: var(--muted-strong); font-size: 11px; }
.advanced-install[open] summary { margin-bottom: 8px; }
.copy-field { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 32px; align-items: stretch; gap: 5px; }
.copy-field code { min-width: 0; overflow: auto; border: 1px solid var(--line); border-radius: 4px; background: #090d11; color: #cfe7fa; padding: 5px 6px; font: 10px/1.35 Consolas, monospace; white-space: nowrap; }
.copy-field.command code { white-space: pre-wrap; overflow-wrap: anywhere; }
.security-note { border-left: 3px solid var(--green); background: #0d2119; color: #aee7c7; padding: 6px 8px; font-size: 10px; }

.security-backdrop { background: rgba(0, 4, 8, .84); }
.security-panel { width: min(610px, 100%); border-color: #1e4c70; box-shadow: 0 22px 70px rgba(0, 0, 0, .55), 0 0 0 1px rgba(35, 138, 245, .08); }
.security-header { min-height: 46px; background: #07131d; }
.security-header .dialog-brand img { width: 30px; height: 30px; }
.security-header .dialog-brand strong { font-size: 14px; }
.security-header .dialog-brand small { color: #75baf2; }
.security-setup-body { display: grid; gap: 10px; padding: 12px; }
.security-setup-body p { margin: 0; color: var(--muted-strong); font-size: 11px; line-height: 1.42; }
.security-intro { min-width: 0; display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 11px; border-left: 3px solid #238af5; background: linear-gradient(90deg, #0b2235 0%, #0b1822 64%, #0b1319 100%); padding: 10px 11px; }
.security-intro.enabled { border-left-color: var(--green); background: linear-gradient(90deg, #0d271d 0%, #0b1815 66%, #0b1312 100%); }
.security-seal { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid #238af5; border-radius: 50%; background: #092a44; color: #79c4ff; font-size: 12px; font-weight: 800; }
.security-intro.enabled .security-seal { border-color: #25b875; background: #103c2a; color: #7be5ad; font-size: 18px; }
.security-kicker { color: #63b8ff !important; font-size: 9px !important; font-weight: 800; text-transform: uppercase; }
.security-intro.enabled .security-kicker { color: #65d99c !important; }
.security-intro h3 { margin: 1px 0 2px; color: var(--text); font-size: 15px; line-height: 1.2; }
.security-progress { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.security-progress > span { position: relative; min-width: 0; display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; gap: 5px; padding: 3px 6px 7px; color: var(--muted); }
.security-progress > span:not(:last-child)::after { content: ""; position: absolute; right: 0; width: 1px; height: 18px; background: var(--line); }
.security-progress b { width: 20px; height: 20px; display: grid; place-items: center; border: 1px solid #334453; border-radius: 50%; font-size: 9px; }
.security-progress small { overflow: hidden; font-size: 9px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.security-progress .active { color: #91cdff; }
.security-progress .active b { border-color: #238af5; background: #0d4e82; color: white; }
.security-progress .done { color: #79dba7; }
.security-progress .done b { border-color: #208c5b; background: #124d36; color: white; }
.security-policy { display: flex; align-items: center; gap: 0; color: var(--muted); font-size: 9px; }
.security-policy span { min-width: 0; flex: 1; padding: 0 8px; text-align: center; }
.security-policy span + span { border-left: 1px solid var(--line); }
.security-policy b { color: #b7dcf8; font-size: 10px; }
.security-summary { max-width: 550px; }
.security-verify-grid { min-width: 0; display: grid; grid-template-columns: minmax(290px, 1.25fr) minmax(235px, 1fr); gap: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.security-qr-section { min-width: 0; display: grid; grid-template-columns: 152px minmax(0, 1fr); align-items: start; gap: 10px; }
.security-qr-frame { width: 152px; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; border: 1px solid #2b628d; border-radius: 4px; background: #fff; box-shadow: 0 0 0 3px rgba(35, 138, 245, .08); }
.security-qr-frame img { width: 100%; height: 100%; display: block; object-fit: contain; }
.security-qr-unavailable { color: #812d32; font-size: 9px; font-weight: 700; }
.security-instructions { min-width: 0; display: grid; align-content: start; gap: 6px; }
.security-instructions > strong { font-size: 11px; }
.security-steps { display: grid; gap: 3px; margin: 0; padding-left: 18px; color: var(--muted-strong); font-size: 10px; line-height: 1.38; }
.security-credentials { min-width: 0; display: grid; gap: 6px; }
.security-manual { border: 1px solid var(--line); border-radius: 4px; background: #0a1117; }
.security-manual summary { cursor: pointer; padding: 6px 8px; color: #a9cfe9; font-size: 10px; font-weight: 700; }
.security-manual-fields { display: grid; gap: 6px; border-top: 1px solid var(--line); padding: 7px; }
.security-manual-fields > label { min-width: 0; display: grid; gap: 3px; color: var(--muted); font-size: 9px; }
.security-credentials .copy-field { grid-template-columns: minmax(0, 1fr) 27px; }
.security-credentials .copy-field code { min-height: 27px; display: flex; align-items: center; }
.authenticator-link { width: max-content; min-height: 27px; display: inline-flex; align-items: center; padding: 4px 8px; font-size: 10px; text-decoration: none; }
.totp-confirm-form { display: grid; grid-template-columns: minmax(100px, 125px) minmax(118px, auto); align-items: end; gap: 6px; }
.totp-confirm-form .field { gap: 3px; margin: 0; }
.totp-confirm-form .field input { min-height: 29px; padding: 4px 7px; font: 700 13px/1 Consolas, monospace; letter-spacing: 0; text-align: center; }
.security-start { min-width: 130px; }
.security-setup-body > .dialog-error { margin: 0; }

@media (max-width: 560px) {
  .security-panel { width: min(460px, 100%); }
  .security-verify-grid { grid-template-columns: 1fr; gap: 8px; }
  .security-instructions { grid-template-columns: minmax(0, 1fr) auto; }
  .security-instructions > strong, .security-instructions .security-steps { grid-column: 1 / -1; }
  .security-qr-section { grid-template-columns: 132px minmax(0, 1fr); }
  .security-qr-frame { width: 132px; }
}

@media (max-width: 390px) {
  .security-setup-body { gap: 8px; padding: 8px; }
  .security-intro { grid-template-columns: 38px minmax(0, 1fr); gap: 8px; padding: 8px; }
  .security-seal { width: 34px; height: 34px; font-size: 10px; }
  .security-intro h3 { font-size: 13px; }
  .security-policy span { padding-inline: 4px; }
  .security-progress small { font-size: 8px; }
  .totp-confirm-form { grid-template-columns: minmax(90px, 1fr) auto; }
  .security-qr-section { grid-template-columns: 112px minmax(0, 1fr); gap: 8px; }
  .security-qr-frame { width: 112px; }
}

.installation-panel {
  width: min(560px, 100%);
  max-height: calc(100dvh - 24px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.installation-panel > header,
.installation-panel > footer { flex: 0 0 auto; }
.installation-panel > header { min-height: 40px; padding-block: 5px; }
.dialog-brand { min-width: 0; flex: 1; display: flex; align-items: center; gap: 7px; }
.dialog-brand img { width: 26px; height: 26px; }
.dialog-brand span { min-width: 0; display: grid; gap: 1px; }
.dialog-brand strong { font-size: 13px; }
.dialog-brand small { color: var(--muted); font-size: 9px; }
.installation-form {
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 8px 10px 10px;
  scrollbar-gutter: stable;
}
.installation-form .field { gap: 3px; }
.installation-form .field > span { font-size: 10px; }
.installation-form input,
.installation-form select,
.installation-form textarea { min-height: 30px; padding: 4px 7px; font-size: 11px; }
.installation-form textarea { height: 30px; min-height: 30px; max-height: 80px; }
.installation-form .field-name,
.installation-form .field-client,
.installation-form .field-tags,
.installation-form .field-site,
.installation-form .field-asset { grid-column: span 3; }
.installation-form .field-criticality { grid-column: span 2; }
.installation-form .field-notes { grid-column: span 4; }
.installation-summary { min-width: 0; min-height: 75px; grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(36px, auto); gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: 5px; background: var(--line); }
.installation-summary > div { min-width: 0; display: grid; gap: 2px; background: #0d1217; padding: 6px 8px; }
.installation-summary .summary-wide { grid-column: span 2; }
.installation-summary span { color: var(--muted); font-size: 9px; text-transform: uppercase; }
.installation-summary strong { min-width: 0; overflow: hidden; color: var(--text); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.installation-callout { min-width: 0; grid-column: 1 / -1; display: flex; align-items: center; gap: 7px; border-left: 3px solid #19b879; background: #0b251b; color: #bdebd4; padding: 6px 8px; }
.installation-callout > span { width: 20px; height: 20px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: #147b55; color: white; font-size: 11px; font-weight: 800; }
.installation-callout div { min-width: 0; display: grid; gap: 1px; }
.installation-callout strong { font-size: 11px; }
.installation-callout small { color: #8ec7ad; font-size: 9px; overflow-wrap: anywhere; }
.installation-callout.warning { border-left-color: #f2a51a; background: #2a210d; color: #ffe2a4; }
.installation-callout.warning > span { background: #9b6500; }
.installation-callout.warning small { color: #d8bc80; }
.installation-confirm { display: flex; align-items: center; gap: 6px; margin-top: 3px; color: #fff0c9; font-size: 9px; font-weight: 700; }
.installation-confirm input { width: 13px; height: 13px; min-height: 0; margin: 0; padding: 0; accent-color: #f2a51a; }
.installation-form footer { min-width: 0; align-items: center; flex-wrap: wrap; gap: 6px; padding-top: 2px; }
.installation-form footer button { min-height: 30px; padding: 4px 9px; font-size: 11px; white-space: nowrap; }
.installation-form .footer-spacer { flex: 1; }
.danger-secondary { min-height: 30px; border: 1px solid #713536; border-radius: 4px; background: #241315; color: #ff9d9d; padding: 5px 10px; cursor: pointer; }
.installation-result { min-height: 150px; flex: 1 1 auto; overflow-y: auto; display: grid; place-content: center; justify-items: center; gap: 6px; padding: 14px; text-align: center; }
.installation-result > span:not(.spinner) { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #123d2b; color: #55dda0; font-size: 18px; font-weight: 800; }
.installation-result.error > span { background: #3d1c1f; color: #ff8181; }
.installation-result h3 { margin: 1px 0 0; font-size: 13px; }
.installation-result p { width: min(420px, 100%); margin: 0; color: var(--muted-strong); font-size: 11px; line-height: 1.35; }

.installation-queue-panel { width: min(600px, 100%); }
.installation-queue-panel > header > div { min-width: 0; flex: 1; }
.installation-queue-panel > header small { color: var(--muted); font-size: 9px; }
.installation-queue-list { display: grid; gap: 1px; max-height: min(430px, calc(100dvh - 150px)); overflow: auto; margin: 0; padding: 5px; list-style: none; background: #081018; }
.installation-queue-row { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 7px; border: 1px solid #213849; border-radius: 4px; background: #0d1720; padding: 6px 7px; }
.installation-queue-row > div:first-child { min-width: 0; display: grid; gap: 2px; }
.installation-queue-row strong, .installation-queue-row small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.installation-queue-row strong { font-size: 11px; }
.installation-queue-row small { color: var(--muted); font-size: 9px; }
.installation-queue-status { border: 1px solid #5a552b; border-radius: 3px; background: #211d0c; color: #f0d37c; padding: 3px 5px; font-size: 9px; white-space: nowrap; }
.installation-queue-status.approved { border-color: #226249; background: #0e271c; color: #83dfaa; }
.installation-queue-actions { display: flex; gap: 3px; }
.installation-queue-actions .icon-button { width: 25px; height: 25px; }
.danger-icon { color: #ffaaa7; border-color: #73393b; }
.installation-queue-empty { padding: 18px; color: var(--muted); font-size: 11px; text-align: center; }
.installation-cancel-panel { width: min(405px, 100%); }

@media (max-width: 560px) {
  .installation-queue-row { grid-template-columns: minmax(0, 1fr) auto; }
  .installation-queue-status { grid-column: 1; justify-self: start; }
  .installation-queue-actions { grid-column: 2; grid-row: 1 / span 2; }
}

@media (max-width: 1180px) {
  .control-bar { grid-template-columns: minmax(235px, 310px) minmax(365px, 1fr) minmax(205px, 1fr); }
  .client-controls { grid-template-columns: minmax(260px, 1fr) auto minmax(250px, 1fr); }
  .view-summary { grid-column: 1 / -1; justify-self: end; margin-top: -4px; }
  .col-group { width: 15%; }
  .col-access { width: 15%; }
}

@media (max-width: 900px) {
  .app-shell { overflow: visible; }
  .control-bar { grid-template-columns: minmax(230px, .85fr) minmax(0, 1.35fr); }
  .filter-stack { grid-template-columns: 1fr; gap: 4px; }
  .search-control { grid-column: 1 / -1; }
  .view-summary { grid-column: 1 / -1; justify-self: start; margin: 0; }
  .workspace { overflow: visible; }
  .table-wrap { height: auto; overflow: visible; }
  .data-table,
  .data-table tbody { display: block; width: 100%; }
  .data-table colgroup,
  .data-table thead { display: none; }
  .data-table tr { width: 100%; }

  .device-row {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(105px, .8fr) minmax(92px, auto) 124px;
    grid-template-areas:
      "client client presence action"
      "device id health action"
      "group access access action";
    align-items: center;
    gap: 2px 8px;
    min-height: 74px;
    border-bottom: 1px solid var(--line-soft);
    padding: 6px 7px;
  }

  .device-row td,
  .client-row td,
  .session-row td { height: auto; border: 0; padding: 1px 0; }
  .device-row:hover td,
  .session-row:hover td { background: transparent !important; }
  .device-row .client-cell { grid-area: client; }
  .device-row .device-cell { grid-area: device; color: var(--muted-strong); }
  .device-row .id-cell { grid-area: id; text-align: right; }
  .device-row .presence-cell { grid-area: presence; text-align: right; }
  .device-row .health-cell { grid-area: health; text-align: right; }
  .device-row .group-cell { grid-area: group; text-align: right; }
  .device-row .access-cell { grid-area: access; color: var(--muted); font-size: 10px; }
  .device-row .access-cell::before { content: "Último acesso: "; color: #69747d; }
  .device-row .action-cell { grid-area: action; align-self: stretch; display: grid; align-items: center; justify-items: end; overflow: visible; }
  .device-row .client-cell,
  .device-row .device-cell,
  .device-row .group-cell { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .detail-row { display: block; }
  .detail-row td { display: block; }
  .details-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-inline: 9px; }
  .detail-tags,
  .detail-note { grid-column: span 3; }

  .client-row {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(58px, .4fr)) minmax(130px, .8fr) minmax(70px, auto) 64px;
    align-items: center;
    gap: 5px;
    min-height: 48px;
    border-bottom: 1px solid var(--line-soft);
    padding: 5px 7px;
  }
  .client-row:hover td { background: transparent !important; }
  .client-details { padding-inline: 9px; }

  .session-row {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(125px, .8fr) minmax(100px, auto) 54px;
    grid-template-areas:
      "sclient started result saction"
      "sdevice sid duration saction"
      "operator transport transport saction";
    align-items: center;
    gap: 2px 8px;
    min-height: 72px;
    border-bottom: 1px solid var(--line-soft);
    padding: 7px 9px;
  }

  .session-client { grid-area: sclient; }
  .session-device { grid-area: sdevice; color: var(--muted-strong); }
  .session-row .id-cell { grid-area: sid; }
  .session-row .operator-cell { grid-area: operator; color: var(--muted); font-size: 10px; }
  .session-row .operator-cell::before { content: "Operador: "; color: #69747d; }
  .session-row .started-cell { grid-area: started; }
  .session-row .duration-cell { grid-area: duration; }
  .session-row .transport-cell { grid-area: transport; color: #9dc9c5; }
  .session-row .result-cell { grid-area: result; text-align: right; }
  .session-row .action-cell { grid-area: saction; align-self: stretch; display: grid; align-items: center; justify-items: end; }
  .session-client,
  .session-device,
  .operator-cell { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media (max-width: 760px) {
  .topbar { min-height: 46px; padding: 6px 7px; gap: 6px; }
  .topbar .brand small { font-size: 10px; }
  .system-state { display: none; }
  .user-state { min-width: 0; max-width: 110px; }
  .top-action { width: 27px; height: 27px; }
  .tabbar { flex-wrap: wrap; gap: 0; padding: 0 7px 7px; }
  .tabs { width: 100%; }
  .tab { min-width: 0; flex: 1; }
  .direct-connect { width: 100%; max-width: none; margin: 6px 0 0; }
  .direct-connect .primary { min-width: 104px; }
  .control-bar { grid-template-columns: 1fr; padding: 6px 7px; }
  .client-controls { grid-template-columns: minmax(0, 1fr) auto; }
  .client-controls .search-control,
  .client-controls .view-summary { grid-column: 1 / -1; }
  .filter-stack { display: flex; gap: 5px; overflow-x: auto; scrollbar-width: thin; }
  .filter-stack .segmented { width: max-content; min-width: max-content; }
  .filter-stack .segment { min-width: 64px; }
  .scope-filters { grid-template-columns: minmax(0, 1fr) minmax(112px, .55fr); }
  .search-control,
  .view-summary { grid-column: 1; }
  .segmented { width: 100%; }
  .segment { padding: 4px 5px; }
  .refresh-line { top: 171px; }
  .notice { padding-inline: 8px; }
  .statusbar { gap: 10px; overflow: hidden; }
  .compact-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .compact-form .field { grid-column: span 1; }
  .compact-form .field-name,
  .compact-form .field-email,
  .compact-form .field-client,
  .compact-form .field-tags,
  .compact-form .field-notes,
  .compact-form .dialog-error,
  .compact-form footer { grid-column: 1 / -1; }
  .installation-summary { min-height: 112px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .installation-summary .summary-wide { grid-column: span 1; }
  .installation-summary .summary-versions { grid-column: 1 / -1; }
  .installation-form .field-name,
  .installation-form .field-client,
  .installation-form .field-tags,
  .installation-form .field-site,
  .installation-form .field-asset,
  .installation-form .field-criticality { grid-column: span 1; }
  .installation-form .field-notes { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .user-state small { display: none; }
  .installation-panel { max-height: calc(100dvh - 12px); }
  .installation-form { grid-template-columns: repeat(2, minmax(0, 1fr)); scrollbar-gutter: auto; }
  .installation-form .field-name,
  .installation-form .field-client,
  .installation-form .field-tags,
  .installation-form .field-site,
  .installation-form .field-asset,
  .installation-form .field-criticality { grid-column: span 1; }
  .installation-form .field-notes { grid-column: 1 / -1; }
  .installation-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .installation-summary .summary-wide { grid-column: span 1; }
  .installation-form .footer-spacer { display: none; }
  .device-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "client presence"
      "device action"
      "id action"
      "group group"
      "access access";
    min-height: 96px;
    gap: 2px 7px;
    padding: 6px;
  }

  .device-row .group-cell { text-align: left; font-size: 10px; }
  .device-row .health-cell { display: none; }
  .device-row .action-cell { justify-items: end; }
  .device-row .compact-actions { align-self: start; }
  .status { padding-inline: 5px; }
  .details-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 6px 7px 7px; }
  .detail-tags,
  .detail-note { grid-column: span 2; }
  .detail-wide { grid-column: span 2; }
  .detail-actions { justify-content: flex-start; overflow-x: auto; }
  .detail-command { white-space: nowrap; }

  .client-row {
    grid-template-columns: minmax(0, 1fr) auto 64px;
    grid-template-areas:
      "cname cstatus caction"
      "cdevices conline caction"
      "cissues cactivity cactivity";
    min-height: 74px;
    gap: 2px 7px;
  }
  .client-row .client-cell { grid-area: cname; display: block; }
  .client-row .numeric-cell:nth-of-type(2) { grid-area: cdevices; }
  .client-row .numeric-cell:nth-of-type(3) { grid-area: conline; }
  .client-row .numeric-cell:nth-of-type(4) { grid-area: cissues; }
  .client-row .access-cell { grid-area: cactivity; font-size: 10px; }
  .client-row td:nth-of-type(6) { grid-area: cstatus; text-align: right; }
  .client-row .action-cell { grid-area: caction; overflow: visible; }
  .client-row .numeric-cell:nth-of-type(2)::before { content: "Dispositivos: "; color: var(--muted); }
  .client-row .numeric-cell:nth-of-type(3)::before { content: "Online: "; color: var(--muted); }
  .client-row .numeric-cell:nth-of-type(4)::before { content: "Alertas: "; color: var(--muted); }
  .client-row .access-cell::before { content: "Última atividade: "; color: var(--muted); }
  .client-details { padding: 7px; }
  .client-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .client-device-list { grid-template-columns: 1fr; }

  .session-row {
    grid-template-columns: minmax(0, 1fr) auto 36px;
    grid-template-areas:
      "sclient result saction"
      "sdevice sid saction"
      "started duration saction"
      "operator transport saction";
    min-height: 88px;
    padding: 6px 7px;
  }

  .session-row .started-cell { font-size: 10px; }
  .session-row .started-cell::before { content: "Início: "; color: #69747d; }
  .session-row .transport-cell { text-align: right; font-size: 10px; }
  .session-status { padding-inline: 5px; }
  .statusbar span:nth-child(2),
  .statusbar-spacer { display: none; }
  .statusbar span:last-child { margin-left: auto; overflow: hidden; text-overflow: ellipsis; }
  .file-transfer-panel { inset: auto 4px 4px; width: calc(100vw - 8px); height: min(42dvh, 330px); min-width: 0; min-height: 175px; resize: none; }
  .file-transfer-panel.maximized { inset: 4px; }
  .file-transfer-state { min-width: 0; }
  .file-transfer-state { font-size: 0; }
  .file-transfer-panel.minimized { right: 4px; bottom: 4px; width: min(280px, calc(100vw - 8px)); }
}

@media (max-width: 390px) {
  .login-shell { padding: 12px; }
  .login-panel { padding: 18px; }
  .topbar .brand img { width: 25px; height: 25px; }
  .topbar .brand strong { font-size: 12px; }
  .user-state { max-width: 86px; }
  .segment { gap: 3px; font-size: 9px; }
  .segment b { min-width: 12px; font-size: 9px; }
  .filter-dot { display: none; }
  .view-summary { font-size: 9px; }
  .details-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-inline: 7px; }
  .detail-tags,
  .detail-note,
  .detail-wide { grid-column: span 2; }
  .client-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .modal-backdrop { padding: 4px; }
  .modal-panel { max-height: calc(100dvh - 8px); }
  .modal-panel > header,
  .modal-panel > footer { min-height: 32px; padding: 3px 6px 3px 8px; }
  .confirm-body { padding: 8px; }
  .compact-form { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 8px; gap: 6px; }
  .compact-form .field-name,
  .compact-form .field-email,
  .compact-form .field-client,
  .compact-form .field-tags,
  .compact-form .field-notes,
  .compact-form .dialog-error,
  .compact-form footer { grid-column: 1 / -1; }
  .installation-form { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; padding: 7px; }
  .installation-form .field { grid-column: span 1; }
  .installation-form .field-notes,
  .installation-form .dialog-error,
  .installation-form footer { grid-column: 1 / -1; }
}

/* Painel operacional compacto: mantém filtros e ações utilizáveis em qualquer largura. */
@media (max-width: 1180px) {
  .operations-bar,
  .operations-bar.view-sessions {
    grid-template-columns: auto 142px minmax(180px, 1fr) auto;
    grid-template-areas:
      "tabs direct search summary"
      "scope scope state state";
  }

  .operations-bar.view-clients {
    grid-template-columns: auto 142px minmax(180px, 1fr) auto;
    grid-template-areas:
      "tabs direct search summary"
      "scope scope scope scope";
  }

  .view-summary { justify-self: end; }
  .scope-filters { width: 258px; justify-self: start; }
  .filter-stack { width: 320px; justify-self: start; }
  .search-control { width: min(340px, 100%); justify-self: start; }
}

@media (max-width: 900px) {
  .operations-bar { padding: 3px 6px; }
  .filter-stack { display: grid; grid-template-columns: minmax(84px, 1fr) minmax(96px, 1fr); gap: 3px; overflow: visible; }
  .filter-stack .filter-picker { width: auto; min-width: 0; }

  .device-row {
    grid-template-columns: minmax(132px, 1.35fr) minmax(88px, .72fr) minmax(72px, auto) 128px;
    grid-template-areas:
      "client id presence action"
      "device group access action";
    min-height: 43px;
    gap: 1px 6px;
    padding: 3px 5px;
  }

  .device-row .health-cell { display: none; }
  .device-row .action-cell { align-self: center; }
  .device-row .access-cell::before { content: none; }
  .details-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .detail-tags,
  .detail-note { grid-column: span 2; }
}

@media (max-width: 760px) {
  .topbar { min-height: 36px; padding: 4px 6px; gap: 4px; }
  .top-action { width: 26px; height: 26px; }
  .operations-bar,
  .operations-bar.view-sessions {
    grid-template-columns: 110px 142px minmax(0, 1fr);
    grid-template-areas:
      "tabs direct search"
      "scope scope state";
    gap: 3px;
    padding: 3px 5px;
  }

  .operations-bar.view-clients {
    grid-template-columns: 110px 142px minmax(0, 1fr);
    grid-template-areas:
      "tabs direct search"
      "scope scope scope";
  }

  .tabs { width: auto; }
  .tab { min-width: 0; flex: 0 0 35px; }
  .direct-connect { width: 142px; max-width: 142px; margin: 0; }
  .direct-connect .direct-connect-button { min-width: 0; }
  .scope-filters { grid-template-columns: minmax(106px, 1fr) minmax(76px, .58fr); }
  .scope-filters.single-scope { grid-template-columns: 1fr; }
  .scope-filters.client-scope { grid-template-columns: minmax(88px, 1fr) 28px; }
  .filter-stack { display: grid; min-width: 0; overflow: visible; }
  .scope-filters,
  .filter-stack,
  .search-control { width: 100%; }
  .search-control { grid-column: auto; }
  .view-summary { display: none; }
  .refresh-line { top: 73px; }
}

@media (max-width: 560px) {
  .topbar .brand img { width: 22px; height: 22px; }
  .topbar .brand strong { font-size: 10px; }
  .topbar .brand small { font-size: 8px; }
  .user-state { max-width: 72px; }
  .operations-bar,
  .operations-bar.view-sessions {
    grid-template-columns: 101px 116px minmax(0, 1fr);
    grid-template-areas:
      "tabs direct search"
      "scope scope state";
  }

  .operations-bar.view-clients {
    grid-template-columns: 101px 116px minmax(0, 1fr);
    grid-template-areas:
      "tabs direct search"
      "scope scope scope";
  }

  .tab { flex-basis: 32px; width: 32px; height: 26px; }
  .tab .ui-icon { width: 13px; height: 13px; }
  .tab-count { font-size: 7px; }
  .direct-connect { width: 116px; grid-template-columns: minmax(0, 1fr) 26px 26px; }
  .direct-connect input,
  .direct-connect .direct-connect-button { height: 26px; min-height: 26px; }
  .direct-connect .direct-connect-button { width: 26px; }
  .filter-picker { height: 26px; }
  .filter-picker-trigger { height: 26px; grid-template-columns: 12px minmax(0, 1fr) 7px; gap: 3px; padding-inline: 5px; }
  .filter-picker-trigger > .ui-icon { width: 11px; height: 11px; }
  .filter-picker-label { font-size: 8.5px; }
  .filter-picker-caret { width: 4px; height: 4px; }
  .filter-picker-popover { max-width: min(290px, calc(100vw - 12px)); }
  .filter-picker-option { min-height: 25px; font-size: 9px; }
  .scope-filters { grid-template-columns: minmax(96px, 1fr) minmax(66px, .52fr); }
  .scope-filters.client-scope { grid-template-columns: minmax(88px, 1fr) 26px; }
  .new-client { width: 26px; height: 26px; }
  .filter-stack { grid-template-columns: minmax(58px, .9fr) minmax(72px, 1.1fr); }
  .search-control { min-height: 26px; padding-inline: 5px; }
  .search-control input { height: 24px; font-size: 9px; }
  .search-control > .ui-icon { width: 11px; height: 11px; }

  .device-row {
    grid-template-columns: minmax(0, 1fr) 64px 120px;
    grid-template-areas:
      "client presence action"
      "device id action";
    min-height: 48px;
    gap: 1px 5px;
    padding: 3px 5px;
  }

  .device-row .client-cell {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "dot name" ". meta";
    align-items: center;
    column-gap: 5px;
  }
  .device-row .client-cell .dot { grid-area: dot; margin: 0; }
  .device-row .client-cell strong { grid-area: name; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-group { grid-area: meta; display: block; overflow: hidden; color: #83c8c2; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
  .device-row .device-cell { display: grid; min-width: 0; line-height: 1.15; }
  .device-row .device-cell > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-access { display: block; overflow: hidden; color: #74808a; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
  .device-row .id-cell { font-size: 9px; }
  .device-row .group-cell,
  .device-row .access-cell { display: none; }
  .device-row .presence-cell { align-self: start; }
  .device-row .action-cell { align-self: stretch; }
  .device-row .compact-actions { align-self: center; gap: 1px; }
  .compact-actions .icon-button { width: 23px; height: 23px; }
  .status { min-height: 17px; padding-inline: 4px; font-size: 8px; }
  .details-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 4px 5px 5px;
  }
  .details-grid dl { padding: 3px 4px 3px 0; }
  .details-grid dt { margin-bottom: 1px; font-size: 7px; line-height: 1.1; }
  .details-grid dd { font-size: 8.5px; line-height: 1.2; }
  .detail-tags,
  .detail-note,
  .detail-wide { grid-column: span 2; }
  .detail-actions {
    display: flex;
    width: max-content;
    max-width: 100%;
    gap: 3px;
    min-height: 0;
    margin-top: 3px;
    padding-top: 4px;
    overflow: visible;
  }
  .detail-command { width: 25px; min-width: 25px; min-height: 23px; justify-content: center; gap: 0; padding: 2px; }
  .detail-command .ui-icon { width: 11px; height: 11px; }
  .detail-command-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }

  .client-row { min-height: 52px; padding: 3px 5px; }
  .session-row { min-height: 60px; padding: 4px 5px; }
}

@media (max-width: 390px) {
  .operations-bar,
  .operations-bar.view-sessions,
  .operations-bar.view-clients {
    grid-template-columns: 95px 108px minmax(0, 1fr);
    padding-inline: 3px;
  }
  .tab { flex-basis: 30px; width: 30px; }
  .direct-connect { width: 108px; }
  .device-row { grid-template-columns: minmax(0, 1fr) 60px 114px; padding-inline: 4px; }
  .compact-actions .icon-button { width: 22px; height: 22px; }
  .compact-actions .ui-icon { width: 11px; height: 11px; }
}

/* Pickers e cadastros mestres preservam densidade sem cortar menus. */
@media (max-width: 900px) {
  .group-manager-panel { width: min(680px, 100%); }
  .group-manager-list { max-height: min(390px, calc(100dvh - 160px)); }
  .modal-panel:has([data-group-management-list]) > div {
    grid-template-columns: minmax(210px, .85fr) minmax(0, 1.15fr) !important;
  }
  .form-picker-popover,
  .form-picker > .filter-picker-popover { max-width: min(360px, calc(100vw - 16px)); }
  .client-action-bar,
  .client-actions-bar { justify-content: flex-start; }
}

@media (max-width: 760px) {
  .form-picker { position: relative; }
  .form-picker[open],
  .form-picker.is-open { z-index: 170; }
  .form-picker .form-picker-popover,
  .form-picker > .filter-picker-popover,
  .form-picker.align-end .form-picker-popover,
  .form-picker[data-align="end"] .form-picker-popover,
  .form-picker.opens-up .form-picker-popover,
  .form-picker[data-placement="top"] .form-picker-popover {
    position: fixed;
    z-index: 180;
    top: auto;
    right: max(8px, env(safe-area-inset-right));
    bottom: max(8px, env(safe-area-inset-bottom));
    left: max(8px, env(safe-area-inset-left));
    width: auto;
    max-width: none;
    max-height: min(48dvh, 340px);
    border-color: #4b718a;
    border-radius: 6px;
    box-shadow: 0 22px 64px rgb(0 0 0 / 76%);
  }
  .form-picker-trigger,
  .form-picker > .filter-picker-trigger { min-height: 30px; }
  .form-picker-option,
  .form-picker .filter-picker-option { min-height: 32px; }
  .form-picker-search input,
  .form-picker [data-picker-search] { min-height: 30px !important; }
  .group-manager-panel { max-height: calc(100dvh - 12px); }
  .group-manager { padding: 6px; }
  .group-manager-list { max-height: min(430px, calc(100dvh - 154px)); }
  .group-manager-row { gap: 4px; }
  .modal-panel:has([data-group-management-list]) > div {
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(150px, .85fr) minmax(0, 1.15fr);
    min-height: 0 !important;
    max-height: calc(100dvh - 52px) !important;
  }
  .modal-panel:has([data-group-management-list]) aside {
    border-right: 0 !important;
    border-bottom: 1px solid var(--line);
  }
  [data-group-management-list] { max-height: min(31dvh, 240px) !important; }
  #group-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .client-action-bar,
  .client-actions-bar {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
  }
  .client-action-bar > :first-child,
  .client-actions-bar > :first-child { margin-left: 0; }
  .client-action-bar button,
  .client-actions-bar button { flex: 0 0 auto; white-space: nowrap; }
}

@media (max-width: 560px) {
  .form-picker .form-picker-popover,
  .form-picker > .filter-picker-popover,
  .form-picker.align-end .form-picker-popover,
  .form-picker[data-align="end"] .form-picker-popover,
  .form-picker.opens-up .form-picker-popover,
  .form-picker[data-placement="top"] .form-picker-popover {
    right: max(4px, env(safe-area-inset-right));
    bottom: max(4px, env(safe-area-inset-bottom));
    left: max(4px, env(safe-area-inset-left));
    max-height: min(54dvh, 360px);
  }
  .form-picker-value,
  .form-picker .filter-picker-label { font-size: 10px; }
  .form-picker-option,
  .form-picker .filter-picker-option { min-height: 34px; padding-block: 5px; }
  .form-picker-option-main strong { font-size: 10px; }
  .group-manager-header,
  .group-manager-toolbar { align-items: stretch; flex-wrap: wrap; }
  .group-manager-heading { flex-basis: 100%; }
  .group-manager-actions { width: 100%; justify-content: flex-start; }
  .group-manager-row {
    min-height: 38px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding-right: 3px;
  }
  .group-manager-main { padding-right: 2px; }
  .group-manager-path,
  .group-manager-label { font-size: 10px; }
  .group-manager-row-actions { gap: 1px; }
  .group-manager-row-actions .icon-button { width: 28px; height: 28px; }
  .modal-panel:has([data-group-management-list]) aside { padding: 6px !important; }
  [data-group-management-list] { max-height: min(28dvh, 210px) !important; }
  #group-form { padding: 7px; }
  #group-form .field-name,
  #group-form .dialog-error,
  #group-form footer { grid-column: 1 / -1; }
  .client-action-bar,
  .client-actions-bar { padding-inline: 5px; }
}

/* Workspace Web multiaba: a Central permanece montada sob as sessões remotas. */
.remote-session-workspace[hidden] { display: none; }
.remote-session-workspace {
  position: fixed;
  z-index: 220;
  inset: 0;
  pointer-events: none;
  color: var(--text);
}

.remote-session-shell {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: 34px minmax(0, 1fr);
  pointer-events: auto;
  background: #020406;
}

.remote-session-toolbar {
  min-width: 0;
  display: grid;
  grid-template-columns: 27px minmax(0, 1fr) 27px;
  align-items: center;
  gap: 4px;
  border-bottom: 1px solid #263b4a;
  background: #071019;
  padding: 3px 5px;
  box-shadow: 0 4px 14px rgb(0 0 0 / 28%);
}

.remote-session-toolbar > .icon-button {
  width: 27px;
  height: 27px;
  border-color: #29465a;
  background: #0b1a25;
}

.remote-session-tabs {
  min-width: 0;
  height: 28px;
  display: flex;
  align-items: stretch;
  gap: 3px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
}
.remote-session-tabs::-webkit-scrollbar { display: none; }

.remote-session-tab {
  min-width: 142px;
  max-width: 224px;
  height: 28px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 23px;
  flex: 0 1 190px;
  overflow: hidden;
  border: 1px solid #263b4a;
  border-radius: 4px 4px 2px 2px;
  background: #0a141d;
}

.remote-session-tab.active {
  border-color: #238af5;
  background: #0b2132;
  box-shadow: inset 0 -2px 0 #12c7da;
}

.remote-session-tab-main {
  min-width: 0;
  display: grid;
  grid-template-columns: 7px minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  border: 0;
  background: transparent;
  color: var(--text);
  padding: 2px 3px 2px 6px;
  text-align: left;
}

.remote-session-tab-main:hover { background: rgb(35 138 245 / 9%); }
.remote-session-tab-state,
.remote-session-device-state {
  width: 7px;
  height: 7px;
  display: inline-block;
  border-radius: 50%;
  background: var(--amber);
}
.remote-session-tab-state.ready,
.remote-session-device-state.online { background: var(--green); }
.remote-session-device-state.offline { background: var(--red); }
.remote-session-device-state.unknown { background: var(--amber); }

.remote-session-tab-copy {
  min-width: 0;
  display: grid;
  gap: 0;
  line-height: 1.05;
}
.remote-session-tab-copy strong,
.remote-session-tab-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.remote-session-tab-copy strong { font-size: 9px; }
.remote-session-tab-copy small { color: #8ba1b1; font-size: 7px; }

.remote-session-tab-close {
  width: 23px;
  height: 26px;
  border: 0;
  border-left: 1px solid #203442;
  background: transparent;
  color: #9fb0bd;
  padding: 0;
  font-size: 15px;
  line-height: 1;
}
.remote-session-tab-close:hover { background: #32171b; color: #ff9a9a; }

.remote-session-frames {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #000;
}
.remote-session-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  border: 0;
  background: #000;
}
.remote-session-frame[hidden] { display: none; }
.remote-session-status {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 14px;
  background: #05090d;
}
.remote-session-status[hidden] { display: none; }
.remote-session-status-card {
  width: min(360px, 100%);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 3px 10px;
  align-items: center;
  border: 1px solid #244154;
  border-radius: 5px;
  background: #0a141d;
  padding: 12px 14px;
  color: var(--text);
  box-shadow: 0 14px 34px rgb(0 0 0 / 36%);
}
.remote-session-status-card > .ui-icon,
.remote-session-status-card > .spinner { grid-row: 1 / span 2; width: 20px; height: 20px; color: #39aaf8; }
.remote-session-status-card strong { font-size: 12px; }
.remote-session-status-card small { color: var(--muted); font-size: 9px; line-height: 1.35; }
.remote-session-status-card.error { border-color: #61383e; background: #1b1014; }
.remote-session-status-card.error > .ui-icon { color: #ff858a; }
.remote-session-status-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 5px;
  margin-top: 8px;
}
.remote-session-status-actions button { display: inline-flex; align-items: center; gap: 5px; }
.remote-session-status-actions .ui-icon { width: 12px; height: 12px; }

.remote-session-picker-layer {
  position: absolute;
  z-index: 4;
  inset: 34px 0 0;
  pointer-events: auto;
}
.remote-session-picker-layer[hidden] { display: none; }
.remote-session-picker-dismiss {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: rgb(0 0 0 / 46%);
  padding: 0;
}
.remote-session-picker {
  position: absolute;
  top: 4px;
  right: 5px;
  width: min(390px, calc(100vw - 10px));
  max-height: min(480px, calc(100dvh - 44px));
  display: grid;
  grid-template-rows: 29px 30px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid #33536a;
  border-radius: 5px;
  background: #071019;
  box-shadow: 0 18px 58px rgb(0 0 0 / 72%);
}
.remote-session-picker > header {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  border-bottom: 1px solid #1c303e;
  padding: 4px 7px;
}
.remote-session-picker > header strong { font-size: 10px; }
.remote-session-picker > header small { margin-left: auto; color: var(--muted); font-size: 8px; }
.remote-session-picker-search {
  min-width: 0;
  display: grid;
  grid-template-columns: 13px minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  border-bottom: 1px solid #1c303e;
  background: #09141d;
  padding: 3px 7px;
  color: #8eb4cc;
}
.remote-session-picker-search .ui-icon { width: 12px; height: 12px; }
.remote-session-picker-search input {
  width: 100%;
  height: 23px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  padding: 0;
  font-size: 9px;
}
.remote-session-picker-list {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2px;
}
.remote-session-device {
  width: 100%;
  min-width: 0;
  min-height: 35px;
  display: grid;
  grid-template-columns: 7px minmax(0, 1fr) auto 16px;
  align-items: center;
  gap: 6px;
  border: 0;
  border-bottom: 1px solid #162733;
  background: transparent;
  color: var(--text);
  padding: 3px 5px;
  text-align: left;
}
.remote-session-device:hover,
.remote-session-device:focus-visible { background: #0c2231; }
.remote-session-device-copy { min-width: 0; display: grid; gap: 1px; }
.remote-session-device-copy strong,
.remote-session-device-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.remote-session-device-copy strong { font-size: 9px; }
.remote-session-device-copy small { color: #8498a8; font-size: 8px; }
.remote-session-device-badge {
  border: 1px solid #705d27;
  border-radius: 3px;
  background: #211c0d;
  color: #ebc76c;
  padding: 2px 4px;
  font-size: 7px;
  white-space: nowrap;
}
.remote-session-device-badge.online,
.remote-session-device-badge.open { border-color: #216847; background: #0b281c; color: #68dda0; }
.remote-session-device-badge.offline { border-color: #71383a; background: #2a1518; color: #ff9b9b; }
.remote-session-device > .ui-icon { width: 12px; height: 12px; color: #59b8f6; }
.remote-session-picker-empty { margin: 0; padding: 18px 8px; color: var(--muted); font-size: 9px; text-align: center; }

.remote-workspace-launcher {
  position: fixed;
  right: max(7px, env(safe-area-inset-right));
  bottom: max(7px, env(safe-area-inset-bottom));
  min-height: 28px;
  display: none;
  align-items: center;
  gap: 6px;
  pointer-events: auto;
  border: 1px solid #3a7dab;
  border-radius: 4px;
  background: #0a2232;
  color: #eaf7ff;
  padding: 4px 7px;
  box-shadow: 0 8px 26px rgb(0 0 0 / 54%);
  font-size: 9px;
  font-weight: 700;
}
.remote-workspace-launcher .ui-icon { width: 13px; height: 13px; color: #38bdf8; }
.remote-workspace-launcher b {
  min-width: 16px;
  border-radius: 3px;
  background: #167dde;
  padding: 2px 4px;
  font-size: 8px;
  text-align: center;
}
.remote-session-workspace.is-collapsed .remote-session-shell { display: none; }
.remote-session-workspace.is-collapsed .remote-workspace-launcher { display: inline-flex; }

@media (max-width: 760px) {
  .remote-session-shell { grid-template-rows: 32px minmax(0, 1fr); }
  .remote-session-toolbar { grid-template-columns: 26px minmax(0, 1fr) 26px; gap: 3px; padding: 2px 4px; }
  .remote-session-toolbar > .icon-button { width: 26px; height: 26px; }
  .remote-session-tabs { height: 27px; }
  .remote-session-tab { min-width: 120px; max-width: 176px; height: 27px; flex-basis: 154px; grid-template-columns: minmax(0, 1fr) 21px; }
  .remote-session-tab-close { width: 21px; height: 25px; }
  .remote-session-picker-layer { inset-block-start: 32px; }
  .remote-session-picker { top: 3px; right: 4px; width: min(360px, calc(100vw - 8px)); max-height: min(450px, calc(100dvh - 39px)); }
}

@media (max-width: 430px) {
  .remote-session-tab { min-width: 106px; max-width: 146px; flex-basis: 124px; }
  .remote-session-tab-copy strong { font-size: 8px; }
  .remote-session-tab-copy small { font-size: 6.5px; }
  .remote-session-picker { left: 3px; right: 3px; width: auto; }
  .remote-workspace-launcher span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  .spinner,
  .refresh-line { animation: none; }
  .form-picker-caret { transition: none; }
}

@media (display-mode: standalone) {
  .topbar {
    padding-top: max(7px, env(safe-area-inset-top));
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(10px, env(safe-area-inset-right));
  }

  .statusbar {
    padding-bottom: max(4px, env(safe-area-inset-bottom));
  }
}

.offline-shell {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 20px;
  background: #090b0e;
}

.offline-panel {
  width: min(420px, 100%);
  display: grid;
  gap: 12px;
  justify-items: start;
  padding: 22px;
  border: 1px solid #26303a;
  border-radius: 8px;
  background: #111419;
}

.offline-panel img { width: 42px; height: 42px; }
.offline-panel h1 { margin: 0; font-size: 20px; }
.offline-panel p { margin: 0; color: #a7b0b8; line-height: 1.45; }
.offline-panel a { text-decoration: none; }