/* ===========================================================
   VPN Coordinator Hub — app-specific styles (Aviro360 design)
   =========================================================== */

html, body { height: 100%; }
body {
  background: var(--av-surface-page);
  color: var(--av-ink-900);
  font-family: var(--av-font-sans);
  font-size: var(--av-text-sm);
  letter-spacing: -0.01em;
}

/* ---- App shell ------------------------------------------------ */
.app {
  min-width: 1100px;
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: 100vh;
}
.app[data-rail="collapsed"] { grid-template-columns: 64px 1fr; }

/* ---- Sidebar / rail ------------------------------------------- */
.rail {
  position: sticky; top: 0; align-self: start;
  height: 100vh;
  background: linear-gradient(180deg, #ffffff 0%, #F1FAFE 100%);
  border-right: 1px solid var(--av-line-100);
  display: flex; flex-direction: column;
  padding: 18px 0 14px;
  z-index: 5;
}
.rail__brand {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 18px 18px;
  height: 44px;
}
.rail__brand img { height: 22px; width: auto; filter: brightness(0) saturate(100%) invert(27%) sepia(97%) saturate(800%) hue-rotate(183deg) brightness(97%) contrast(103%); }
.rail__brand .wordmark { display: flex; flex-direction: column; line-height: 1; }
.rail__brand .wordmark b { font-weight: 700; font-size: 14px; letter-spacing: -0.02em; color: var(--av-ink-900); }
.rail__brand .wordmark span { font-size: 10px; color: var(--av-ink-500); margin-top: 2px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; }
.app[data-rail="collapsed"] .rail__brand { display: none; }
/* topbar logo: hidden by default in app shell, revealed only when rail is collapsed */
.app .topbar__brand { display: none; }
.app[data-rail="collapsed"] .topbar__brand { display: flex; }

.rail__section {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--av-ink-500);
  padding: 14px 22px 6px;
}
.app[data-rail="collapsed"] .rail__section { display: none; }

.rail__nav { display: flex; flex-direction: column; gap: 1px; padding: 0 8px; }
.rail__item {
  position: relative;
  display: flex; align-items: center; gap: 11px;
  padding: 7px 12px;
  height: 34px;
  border-radius: var(--av-radius-sm);
  text-decoration: none;
  color: var(--av-ink-700);
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  background: none; border: none; width: 100%; text-align: left;
  transition: background var(--av-dur-fast) var(--av-ease-out), color var(--av-dur-fast) var(--av-ease-out);
  letter-spacing: -0.01em;
}
.rail__item:hover { background: var(--av-brand-primary-softer); color: var(--av-ink-900); }
.rail__item svg { width: 18px; height: 18px; flex: none; }
.rail__item.is-active { background: var(--av-brand-primary-soft); color: var(--av-brand-primary); font-weight: 600; }
.rail__item.is-active::before {
  content: ""; position: absolute; left: -8px; top: 6px; bottom: 6px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--av-brand-primary);
}
.rail__item .rail__count {
  margin-left: auto;
  background: var(--av-line-100); color: var(--av-ink-700);
  font-size: 11px; font-weight: 600;
  padding: 1px 7px; border-radius: var(--av-radius-pill);
  min-width: 22px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.rail__item.is-active .rail__count { background: var(--av-brand-primary); color: #fff; }
.rail__item .rail__count--crit { background: var(--av-crit-500); color: #fff; }
.rail__item .rail__count--warn { background: var(--av-warn-500); color: var(--av-ink-900); }
.app[data-rail="collapsed"] .rail__item { padding: 7px; justify-content: center; }
.app[data-rail="collapsed"] .rail__item span:not(.rail__count) { display: none; }
.app[data-rail="collapsed"] .rail__item .rail__count { display: none; }

.rail__foot { margin-top: auto; padding: 12px 18px 0; border-top: 1px solid var(--av-line-100); }
.rail__user { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.rail__user .av { width: 28px; height: 28px; border-radius: 50%; background: var(--av-brand-primary-soft); color: var(--av-brand-primary); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 11px; flex: none; }
.rail__user .who { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.rail__user .who b { font-size: 12px; font-weight: 600; color: var(--av-ink-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail__user .who span { font-size: 11px; color: var(--av-ink-500); }
.app[data-rail="collapsed"] .rail__user .who { display: none; }
.app[data-rail="collapsed"] .rail__foot { padding: 12px 8px 0; }

.rail__collapse {
  position: absolute; right: -10px; top: 16px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; border: 1px solid var(--av-line-200);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--av-ink-700);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  z-index: 6;
}
.rail__collapse:hover { color: var(--av-brand-primary); border-color: var(--av-brand-primary-soft); }
.rail__collapse svg { width: 12px; height: 12px; }

/* ---- Page ------------------------------------------------------ */
.page { display: flex; flex-direction: column; min-width: 0; background: var(--av-surface-page); }

/* ---- Top bar --------------------------------------------------- */
.topbar {
  display: flex; align-items: center; gap: 16px;
  height: 56px; padding: 0 22px;
  border-bottom: 1px solid var(--av-line-100);
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(10px);
  position: sticky; top: 0; z-index: 4;
}
.topbar__brand { display: flex; align-items: center; padding-right: 12px; margin-right: 10px; border-right: 1px solid var(--av-line-200); height: 32px; }
.topbar__brand img { height: 22px; width: auto; display: block; filter: brightness(0) saturate(100%) invert(27%) sepia(97%) saturate(800%) hue-rotate(183deg) brightness(97%) contrast(103%); }
.topbar__title { display: flex; flex-direction: column; line-height: 1.1; }
.topbar__title b { font-size: 16px; font-weight: 600; color: var(--av-ink-900); letter-spacing: -0.02em; }
.topbar__title span { font-size: 11px; color: var(--av-ink-500); margin-top: 2px; }
.topbar__spacer { flex: 1; }
.topbar__refresh { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--av-ink-500); padding: 0 10px; }
.topbar__refresh .pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--av-ok-500); box-shadow: 0 0 0 0 rgba(0,183,163,0.6); animation: pulse 2s ease-out infinite; }
.topbar__refresh .pulse.is-paused { background: var(--av-ink-400); box-shadow: none; animation: none; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(0,183,163,0.6); } 70% { box-shadow: 0 0 0 6px rgba(0,183,163,0); } 100% { box-shadow: 0 0 0 0 rgba(0,183,163,0); } }

.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; border-radius: var(--av-radius-sm); background: transparent; border: 1px solid transparent; cursor: pointer; color: var(--av-ink-700); transition: all var(--av-dur-fast) var(--av-ease-out); }
.icon-btn:hover { background: var(--av-brand-primary-softer); color: var(--av-ink-900); border-color: var(--av-line-100); }
.icon-btn svg { width: 16px; height: 16px; }

.topbar__divider { width: 1px; height: 22px; background: var(--av-line-200); }
.theme-toggle { display: inline-flex; align-items: center; height: 28px; padding: 2px; background: var(--av-surface-subtle); border: 1px solid var(--av-line-200); border-radius: var(--av-radius-pill); cursor: pointer; gap: 0; }
.theme-toggle__opt { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 22px; border-radius: var(--av-radius-pill); color: var(--av-ink-500); transition: all var(--av-dur-fast) var(--av-ease-out); }
.theme-toggle__opt.is-on { background: #fff; color: var(--av-brand-primary); box-shadow: 0 1px 3px rgba(0,0,0,0.10); }

.topbar__user { display: flex; align-items: center; gap: 8px; padding: 4px 8px 4px 4px; border-radius: var(--av-radius-pill); cursor: pointer; transition: background var(--av-dur-fast) var(--av-ease-out); }
.topbar__user:hover { background: var(--av-brand-primary-softer); }
.topbar__user .av { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 11px; flex: none; background: var(--av-brand-primary-soft); color: var(--av-brand-primary); }
.topbar__user__meta { display: flex; flex-direction: column; line-height: 1.15; }
.topbar__user__meta b { font-size: 12.5px; font-weight: 600; color: var(--av-ink-900); }
.topbar__user__meta span { font-size: 10.5px; color: var(--av-ink-500); }

/* ---- Page body ------------------------------------------------- */
.body { flex: 1; padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }

/* ---- Subtoolbar ------------------------------------------------ */
.subbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.subbar__title { font-size: 22px; font-weight: 600; color: var(--av-ink-900); letter-spacing: -0.025em; line-height: 1.1; }
.subbar__title small { font-size: 12px; color: var(--av-ink-500); font-weight: 400; margin-left: 8px; letter-spacing: 0; }

/* ---- KPI cards ------------------------------------------------- */
.kpi-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 12px;}
.kpi-grid--4 { grid-template-columns: repeat(4, 1fr); }
.kpi-grid--5 { grid-template-columns: repeat(5, 1fr); }
.kpi {
  background: #fff; border: 1px solid var(--av-line-100); border-radius: var(--av-radius-lg);
  box-shadow: 0 10px 20px 0 rgba(214,225,245,0.25);
  padding: 6px 16px; display: flex; flex-direction: column; gap: 6px;
  position: relative; overflow: hidden;
}
.kpi__label { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 500; color: var(--av-ink-500); letter-spacing: 0.04em; text-transform: uppercase; }
.kpi__label svg { width: 12px; height: 12px; }
.kpi__value { display: flex; align-items: baseline; gap: 8px; font-family: var(--av-font-display); font-weight: 500; font-size: 32px; line-height: 1; letter-spacing: 0.01em; color: var(--av-ink-900); font-variant-numeric: tabular-nums; }
.kpi__value small { font-size: 13px; font-family: var(--av-font-sans); font-weight: 500; color: var(--av-ink-500); letter-spacing: -0.02em; }
.kpi__sub { font-size: 11px; color: var(--av-ink-500); display: flex; align-items: center; gap: 4px; }
.kpi--crit { border-color: rgba(241,33,33,0.25); background: linear-gradient(180deg, #fff 0%, #FFF6F6 100%); }
.kpi--crit .kpi__label { color: var(--av-crit-500); }
.kpi--warn .kpi__label { color: #C28800; }
.kpi--ok .kpi__label   { color: var(--av-ok-500); }

/* ---- Main split ----------------------------------------------- */
.main-split { display: grid; grid-template-columns: 1fr 360px; gap: 14px; align-items: start; }

/* ---- Panel ---------------------------------------------------- */
.panel {
  background: #fff; border: 1px solid var(--av-line-100); border-radius: var(--av-radius-lg);
  box-shadow: 0 10px 20px 0 rgba(214,225,245,0.25); overflow: hidden;
}
.panel--flat { background: transparent; border: none; box-shadow: none; overflow: visible; }

.nodes-head-box {
  background: #fff;
  border: 1px solid var(--av-line-100);
  border-radius: var(--av-radius-lg);
  overflow: hidden;
  box-shadow: 0 10px 20px 0 rgba(214,225,245,0.25);
}
.nodes-head-box .nodes-toolbar { border-bottom: none; }
.panel__head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--av-line-100);
  background: rgba(241,250,254,0.4);
}
.panel__head h3 { margin: 0; font-size: 13px; font-weight: 600; color: var(--av-ink-900); letter-spacing: -0.01em; display: flex; align-items: center; gap: 6px; }
.panel__head h3 svg { width: 14px; height: 14px; color: var(--av-brand-primary); }
.panel__head .count { font-size: 11px; font-weight: 600; color: var(--av-ink-500); background: var(--av-line-100); padding: 1px 7px; border-radius: var(--av-radius-pill); letter-spacing: 0; font-variant-numeric: tabular-nums; display: inline-block; text-align: center; min-width: 84px; }
.panel__head .count.is-filtered { background: var(--av-brand-primary); color: #fff; }
.panel__head .spacer { flex: 1; }
.panel__head .actions { display: flex; align-items: center; gap: 4px; }
.panel__body { padding: 4px 0; }
.panel__body--padded { padding: 14px 16px; }

/* ---- Nodes table ---------------------------------------------- */
.nodes-toolbar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--av-line-100); flex-wrap: wrap; }
.tag-chip {
  display: inline-flex; align-items: center; gap: 4px;
  height: 24px; padding: 0 9px;
  background: #fff; border: 1px solid var(--av-line-200);
  border-radius: var(--av-radius-pill);
  font-size: 11px; font-weight: 500; color: var(--av-ink-700);
  cursor: pointer; user-select: none;
  transition: all var(--av-dur-fast) var(--av-ease-out); white-space: nowrap;
}
.tag-chip:hover { border-color: var(--av-brand-primary-mid); color: var(--av-ink-900); }
.tag-chip.is-active { background: var(--av-brand-primary); border-color: var(--av-brand-primary); color: #fff; }
.tag-chip .count { font-size: 10px; opacity: 0.7; font-variant-numeric: tabular-nums; }
.tag-chip.tag-chip--lte     { background: linear-gradient(180deg, #FFF7E0 0%, #FFF1C7 100%); border-color: #F2D35A; color: #6B4D00; }
.tag-chip.tag-chip--gps     { background: linear-gradient(180deg, #DDF7F3 0%, #C5F0E8 100%); border-color: #5FCCB8; color: #00604F; }
.tag-chip.tag-chip--online  { background: linear-gradient(180deg, #E6FAF4 0%, #D0F5E8 100%); border-color: #5FCCB8; color: #00604F; }
.tag-chip.tag-chip--offline { background: linear-gradient(180deg, #FEF0EF 0%, #FDE0DE 100%); border-color: #F4A09A; color: #8B1A14; }
.tag-chip.tag-chip--pending { background: linear-gradient(180deg, #FFF8E6 0%, #FFF0C9 100%); border-color: #F0C040; color: #7A5500; }
.tag-chip.tag-chip--disabled{ background: linear-gradient(180deg, #F3F4F6 0%, #E9EAEC 100%); border-color: #C8CDD5; color: #4B5563; }
.tag-chip.tag-chip--outdated{ background: linear-gradient(180deg, #FFF3E8 0%, #FFE8CE 100%); border-color: #F5A64A; color: #7A3800; }
.tag-chip.tag-chip--focused { background: linear-gradient(180deg, #F5F0FF 0%, #EDE5FF 100%); border-color: #A78BFA; color: #5B21B6; }
.tag-chip.tag-chip--lte.is-active, .tag-chip.tag-chip--gps.is-active,
.tag-chip.tag-chip--online.is-active, .tag-chip.tag-chip--offline.is-active,
.tag-chip.tag-chip--pending.is-active, .tag-chip.tag-chip--disabled.is-active,
.tag-chip.tag-chip--outdated.is-active, .tag-chip.tag-chip--focused.is-active { background: var(--av-brand-primary); border-color: var(--av-brand-primary); color: #fff; }
.tag-chip.tag-chip--user  { background: linear-gradient(180deg, #EEF4FF 0%, #E1ECFF 100%); border-color: #93BBF9; color: #1D4ED8; }
.tag-chip.tag-chip--user.is-active { background: var(--av-brand-primary); border-color: var(--av-brand-primary); color: #fff; }
.tag-chip-sep { display: inline-block; width: 1px; height: 18px; background: var(--av-line-200); margin: 0 4px; vertical-align: middle; }

#nodes-container { background: var(--av-surface-subtle); margin-top: 8px; }
.nodes-tbl-panel {
  background: #fff;
  border: 1px solid var(--av-line-100);
  border-radius: var(--av-radius-lg);
  overflow: hidden;
}
.app[data-theme="dark"] .nodes-tbl-panel { background: var(--av-surface); }
.nodes-tbl-wrap { overflow-x: auto; }
.nodes-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 800px; }
.nodes-tbl thead th {
  text-align: left; font-size: 10px; font-weight: 600;
  color: var(--av-ink-500); letter-spacing: 0.06em; text-transform: uppercase;
  padding: 8px 12px; border-bottom: 1px solid var(--av-line-100);
  background: var(--av-surface-subtle); white-space: nowrap;
  cursor: pointer; user-select: none;
}
.nodes-tbl tbody td { padding: var(--row-pad-y, 8px) 12px; border-bottom: 1px solid var(--av-line-100); vertical-align: middle; color: var(--av-ink-900); }
.nodes-tbl tbody td.td-icon { padding: var(--row-pad-y, 8px) 4px; }
.nodes-tbl tbody tr { transition: background var(--av-dur-fast) var(--av-ease-out); }
.nodes-tbl tbody tr:hover { background: var(--av-brand-primary-softest); }
.nodes-tbl tbody tr.is-selected { background: var(--av-brand-primary-soft); }
.nodes-tbl tbody tr.is-disabled td { opacity: 0.55; }
.nodes-tbl tbody tr:last-child td { border-bottom: 0; }

/* density */
[data-density="compact"]     { --row-pad-y: 4px; }
[data-density="comfortable"] { --row-pad-y: 8px; }
[data-density="spacious"]    { --row-pad-y: 12px; }
[data-density="compact"] .nodes-tbl  { font-size: 12px; }
[data-density="spacious"] .nodes-tbl { font-size: 13px; }

/* hide LAN Subnet column on narrow viewports */
@media (max-width: 1199px) {
  .nodes-tbl th:nth-child(3), .nodes-tbl td:nth-child(3) { display: none; }
}

/* node name cell */
.node-name { display: flex; align-items: center; gap: 10px; min-width: 160px; }
/* global dot base — used anywhere a status dot appears */
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.dot--ok   { background: var(--av-ok-500);   box-shadow: 0 0 0 2px rgba(0,183,163,0.18); }
.dot--warn { background: var(--av-warn-500); box-shadow: 0 0 0 2px rgba(255,213,76,0.25); }
.dot--crit { background: var(--av-crit-500); box-shadow: 0 0 0 2px rgba(241,33,33,0.18); }
.dot--off  { background: var(--av-ink-400); }
.dot--pend { background: #fd7e14; }
.node-name .dot { width: 8px; height: 8px; }
.node-name b { font-weight: 600; font-size: 14.5px; color: var(--av-ink-900); letter-spacing: -0.01em; }
.node-name .desc { color: var(--av-brand-primary); font-size: 13px; }
.node-name .stack { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }

/* status badge */
.status { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px; border-radius: var(--av-radius-pill); font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; border: 1px solid transparent; }
.status--ok   { background: rgba(0,183,163,0.10); color: #006456; border-color: rgba(0,183,163,0.30); }
.status--warn { background: rgba(255,213,76,0.18); color: #6B4D00; border-color: rgba(214,164,0,0.45); }
.status--crit { background: rgba(241,33,33,0.10); color: #A20F0F; border-color: rgba(241,33,33,0.30); }
.status--info { background: rgba(19,112,241,0.10); color: #0D4CBB; border-color: rgba(19,112,241,0.30); }
.status--off  { background: var(--av-line-100); color: var(--av-ink-500); border-color: var(--av-line-200); }

/* tag */
.tag { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: var(--av-radius-xs); font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; background: var(--av-brand-primary-soft); color: var(--av-brand-primary); white-space: nowrap; }
.tag--lte { background: linear-gradient(180deg, #FFF1C7 0%, #FFE194 100%); color: #6B4D00; }
.tag--gps { background: linear-gradient(180deg, #C5F0E8 0%, #9EE0D2 100%); color: #00604F; }
.tag--ws  { background: linear-gradient(180deg, #E2EAF8 0%, #C8D8F2 100%); color: #0D4CBB; }
.tag--hw  { background: linear-gradient(180deg, #F1E4F8 0%, #E2C8F2 100%); color: #6B0D8C; }

/* mono */
.mono { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 12px; color: var(--av-ink-700); font-variant-numeric: tabular-nums; }

/* signal bars */
.signal { display: inline-flex; align-items: flex-end; gap: 1px; height: 12px; }
.signal i { width: 3px; background: var(--av-line-200); border-radius: 1px; display: block; }
.signal i.on { background: var(--av-brand-primary); }
.signal i:nth-child(1) { height: 3px; }
.signal i:nth-child(2) { height: 6px; }
.signal i:nth-child(3) { height: 9px; }
.signal i:nth-child(4) { height: 12px; }
.signal--good i.on { background: var(--av-ok-500); }
.signal--warn i.on  { background: var(--av-warn-500); }
.signal--crit i.on  { background: var(--av-crit-500); }

/* version badge */
.ver { font-size: 11px; color: var(--av-ink-700); font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 4px; }
.ver .dot-out { width: 6px; height: 6px; border-radius: 50%; background: var(--av-warn-500); }
.ver--current { color: var(--av-ink-500); }

/* row menu */
.row-menu { display: flex; align-items: center; gap: 2px; white-space: nowrap; }
.row-menu .icon-btn { width: 26px; height: 26px; }
.row-menu .icon-btn svg { width: 14px; height: 14px; }

/* IP stack cell */
.ip-stack { display: flex; flex-direction: column; line-height: 1.3; }
.ip-stack__lan { color: var(--av-ink-900); font-size: 13px; }
.ip-stack__vpn { color: var(--av-ink-500); font-size: 12px; }

/* Focus count cell */
.focus-count-btn { position: relative; color: var(--av-ink-400); }
.focus-count-btn.has-focus { color: var(--av-brand-primary); }
.focus-count-btn:hover { color: var(--av-brand-primary); }
.focus-count-badge { position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; border-radius: 8px; background: var(--av-brand-primary); color: #fff; font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 3px; line-height: 1; }

/* Node notes cell */
.notes-btn { color: var(--av-ink-400); }
.notes-btn.has-notes { color: var(--av-brand-primary); }
.notes-btn:hover { color: var(--av-brand-primary); }

/* Node focus modal */
.nfm-section__head { padding: 10px 16px 6px; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--av-ink-500); }
.nfm-row { display: flex; align-items: center; gap: 10px; padding: 8px 16px; border-bottom: 1px solid var(--av-line-100); }
.nfm-row:last-child { border-bottom: 0; }
.nfm-row__info { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; flex-wrap: wrap; }
.nfm-row__user { font-size: 12px; color: var(--av-ink-500); }

/* RustDesk cell */
.rd-cell { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.rd-cell .id  { font-family: ui-monospace,Menlo,Consolas,monospace; font-size: 13px; font-weight: 400; color: var(--av-brand-primary); }
.rd-cell .srv { font-size: 10.5px; color: var(--av-ink-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* tag list in table cell */
.tag-list { display: flex; flex-wrap: wrap; gap: 3px; max-width: 16rem; }
.tag-list .tag { height: 16px; padding: 0 5px; font-size: 9.5px; letter-spacing: 0.04em; }

/* ---- Side-stack right panels ---------------------------------- */
.side-stack { display: flex; flex-direction: column; gap: 14px; }

/* Focus dashboard */
.focus-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 8px 14px; gap: 8px; font-size: 12px; border-bottom: 1px solid var(--av-line-100); }
.focus-row:last-child { border-bottom: 0; }
.focus-row .who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.focus-row .who .av { width: 22px; height: 22px; border-radius: 50%; background: var(--av-brand-primary-soft); color: var(--av-brand-primary); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 10px; flex: none; }
.focus-row .who .stack { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.focus-row .who .stack b { font-weight: 600; font-size: 12px; color: var(--av-ink-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.focus-row .who .stack span { font-size: 10.5px; color: var(--av-ink-500); }
.focus-row .arrow { color: var(--av-brand-primary); font-size: 14px; }
.focus-row .target { font-weight: 600; font-size: 11.5px; color: var(--av-ink-900); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.focus-row .target span { display: block; font-size: 10.5px; color: var(--av-ink-500); font-weight: 400; font-family: ui-monospace,Menlo,Consolas,monospace; }

/* Audit log */
.audit-row { display: grid; grid-template-columns: 56px 1fr; gap: 10px; padding: 8px 14px; font-size: 13px; border-bottom: 1px solid var(--av-line-100); align-items: flex-start; }
.audit-row:last-child { border-bottom: 0; }
.audit-row .time { color: var(--av-ink-500); font-size: 12px; font-variant-numeric: tabular-nums; line-height: 1.4; padding-top: 1px; }
.audit-row .detail { line-height: 1.4; }
.audit-row .detail b { font-weight: 600; color: var(--av-ink-900); }
.audit-row .detail .sub { color: var(--av-ink-500); font-size: 12px; margin-top: 1px; }

/* ---- Empty / loading states ---------------------------------- */
.empty { padding: 28px; text-align: center; color: var(--av-ink-500); font-size: 12px; }

/* ---- Users screen -------------------------------------------- */
.users-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 12px; }
.user-card { background: #fff; border: 1px solid var(--av-line-100); border-radius: var(--av-radius-lg); box-shadow: 0 10px 20px 0 rgba(214,225,245,0.25); padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 10px; position: relative; }
.user-card.is-disabled { opacity: 0.55; }
.user-card__head { display: flex; align-items: center; gap: 10px; }
.user-card__head .av { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px; background: var(--av-brand-primary-soft); color: var(--av-brand-primary); flex: none; }
.user-card__head .meta { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.user-card__head .meta b { font-weight: 600; font-size: 14px; color: var(--av-ink-900); letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-card__head .meta span { font-size: 11.5px; color: var(--av-ink-500); }
.user-card__actions { display: flex; gap: 4px; flex-wrap: wrap; padding-top: 8px; border-top: 1px solid var(--av-line-100); }
.user-card__badges { display: flex; gap: 4px; flex-wrap: wrap; }
.user-card__tags { font-size: 11px; color: var(--av-ink-500); border-top: 1px solid var(--av-line-100); padding-top: 8px; }
.user-card__tags b { font-weight: 600; color: var(--av-ink-900); }

.role-badge { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; border-radius: var(--av-radius-pill); }
.role-badge--admin    { background: var(--av-brand-primary); color: #fff; }
.role-badge--operator { background: var(--av-brand-primary-soft); color: var(--av-brand-primary); }
.role-badge--viewer   { background: var(--av-line-100); color: var(--av-ink-700); }

.user-devices { display: flex; flex-direction: column; gap: 4px; background: var(--av-surface-subtle); border-radius: var(--av-radius-md); padding: 8px 10px; }
.user-device { display: flex; flex-direction: column; gap: 0; font-size: 11.5px; padding: 4px 0; }
.user-device + .user-device { border-top: 1px solid var(--av-line-100); padding-top: 8px; margin-top: 4px; }
.user-device .nm { display: flex; align-items: center; gap: 6px; min-width: 0; }
.user-device .nm b { font-weight: 600; color: var(--av-ink-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-device .nm .dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.user-device .nm-sub { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding-left: 12px; }
.user-device .nm .dot.on  { background: var(--av-ok-500); }
.user-device .nm .dot.off { background: var(--av-ink-400); }
.user-device .nm { flex-wrap: nowrap; }

/* ---- VPN Status screen --------------------------------------- */
.vpn-split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tunnels-tbl, .routes-tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.tunnels-tbl thead th, .routes-tbl thead th { text-align: left; font-size: 10px; font-weight: 600; color: var(--av-ink-500); letter-spacing: 0.06em; text-transform: uppercase; padding: 8px 12px; background: var(--av-surface-subtle); border-bottom: 1px solid var(--av-line-100); white-space: nowrap; cursor: pointer; user-select: none; }
.tunnels-tbl tbody td, .routes-tbl tbody td { padding: 7px 12px; border-bottom: 1px solid var(--av-line-100); vertical-align: middle; }
.tunnels-tbl tbody tr:hover, .routes-tbl tbody tr:hover { background: var(--av-brand-primary-softest); }
.tunnels-tbl tbody tr:last-child td, .routes-tbl tbody tr:last-child td { border-bottom: 0; }

.handshake { display: inline-flex; align-items: center; gap: 5px; font-variant-numeric: tabular-nums; }
.handshake .dot { width: 6px; height: 6px; border-radius: 50%; }
.handshake .dot--ok   { background: var(--av-ok-500); }
.handshake .dot--warn { background: var(--av-warn-500); }
.handshake .dot--crit { background: var(--av-crit-500); }

/* ---- Operations screen --------------------------------------- */
.ops-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }

/* ---- Settings screen ----------------------------------------- */
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.secret-row { display: grid; grid-template-columns: 1fr 70px; gap: 12px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--av-line-100); }
.secret-row:last-of-type { border-bottom: 0; }
.secret-row .meta { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; gap: 2px; }
.secret-row .meta b { font-weight: 600; font-size: 13px; color: var(--av-ink-900); }
.secret-row .meta span.path { font-family: ui-monospace,Menlo,Consolas,monospace; font-size: 11px; color: var(--av-ink-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.username-row { display: flex; align-items: center; gap: 6px; padding: 8px 16px; border-bottom: 1px solid var(--av-line-100); font-family: ui-monospace,Menlo,Consolas,monospace; font-size: 12px; color: var(--av-ink-900); }
.username-row:last-of-type { border-bottom: 0; }
.username-row .icon-btn { margin-left: auto; }

/* form rows */
.form-row { padding: 14px 16px; }
.form-row + .form-row { border-top: 1px solid var(--av-line-100); }
.form-row label.lbl { display: block; font-size: 11px; font-weight: 600; color: var(--av-ink-700); margin-bottom: 6px; letter-spacing: 0.02em; }
.form-row .ctrl { display: flex; align-items: center; gap: 8px; }
.input { height: 32px; padding: 0 10px; background: #fff; border: 1px solid var(--av-line-200); border-radius: var(--av-radius-sm); font: 13px/1 var(--av-font-sans); color: var(--av-ink-900); flex: 1; min-width: 0; }
.input.mono { font-family: ui-monospace,Menlo,Consolas,monospace; font-size: 12px; }
.input:focus { outline: 0; border-color: var(--av-brand-primary-mid); box-shadow: var(--av-shadow-focus); }

/* utility */
.dim    { color: var(--av-ink-500); }
.muted  { color: var(--av-ink-500); }
.nowrap { white-space: nowrap; }

/* ==========================================================================
   User portal screen
   ========================================================================== */
.portal-hero { display: grid; grid-template-columns: 1fr 340px; gap: 14px; align-items: start; }
.device-hero { padding: 18px 22px 14px; display: flex; flex-direction: column; gap: 18px; }
.device-hero__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.device-hero__title h2 { font-size: 22px; font-weight: 600; letter-spacing: -0.025em; color: var(--av-ink-900); margin: 4px 0; }
.device-hero__sub { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--av-ink-700); }
.device-hero__status { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }

.focus-diagram { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; background: linear-gradient(135deg, var(--av-brand-primary-softest) 0%, var(--av-brand-primary-softer) 100%); border: 1px solid var(--av-line-100); border-radius: var(--av-radius-lg); padding: 20px 12px; gap: 0; color: var(--av-brand-primary); position: relative; overflow: hidden; }
.focus-diagram.is-empty { color: var(--av-ink-500); background: linear-gradient(135deg, #FAFBFD 0%, #F2F8FB 100%); }
.focus-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 14px 10px; background: #fff; border: 1px solid var(--av-line-100); border-radius: var(--av-radius-md); box-shadow: 0 6px 14px rgba(0,116,184,0.06); text-align: center; margin: 0 8px; min-height: 120px; }
.focus-tile--empty { cursor: pointer; border-style: dashed; border-color: var(--av-line-300); background: rgba(255,255,255,0.6); }
.focus-tile--empty:hover { border-color: var(--av-brand-primary-mid); background: #fff; }
.focus-tile__icon { width: 40px; height: 40px; border-radius: 50%; background: var(--av-brand-primary-soft); display: flex; align-items: center; justify-content: center; color: var(--av-brand-primary); }
.focus-tile__label { font-weight: 600; font-size: 13px; color: var(--av-ink-900); letter-spacing: -0.015em; }
.focus-tile__sub { font-size: 11px; color: var(--av-ink-500); }
.focus-tile__chip { font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--av-brand-primary); background: var(--av-brand-primary-soft); padding: 2px 8px; border-radius: var(--av-radius-pill); margin-top: 2px; }
.focus-link { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.focus-link__label { font-size: 10px; font-weight: 500; color: var(--av-ink-500); text-align: center; padding: 0 4px; }
.focus-link__label.is-on { color: var(--av-brand-primary); font-weight: 600; }

/* My devices side panel */
.device-list .panel__body { padding: 6px 0; }
.device-pick { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; width: 100%; padding: 10px 14px; background: transparent; border: 0; border-left: 3px solid transparent; cursor: pointer; text-align: left; font-family: inherit; transition: background var(--av-dur-fast) var(--av-ease-out); }
.device-pick:hover { background: var(--av-brand-primary-softest); }
.device-pick.is-active { background: var(--av-brand-primary-soft); border-left-color: var(--av-brand-primary); }
.device-pick__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--av-ink-500); flex: none; }
.device-pick__dot.is-on  { background: var(--av-ok-500); box-shadow: 0 0 0 2px rgba(0,183,163,0.18); }
.device-pick__body { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.device-pick__body b { font-weight: 600; font-size: 13px; color: var(--av-ink-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.device-pick__body .mono { font-size: 11px; }
.device-pick__body .dim  { font-size: 11px; }

/* Available sites grid */
.avail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; padding: 10px 14px; }
#avail-grid-container { max-height: 290px; overflow-y: auto; }
.avail-card { background: #fff; border: 1px solid var(--av-line-100); border-radius: var(--av-radius-md); padding: 8px 10px; display: flex; flex-direction: column; gap: 3px; cursor: pointer; text-align: left; font-family: inherit; border-style: solid; transition: all var(--av-dur-fast) var(--av-ease-out); position: relative; width: 100%; }
.avail-card:hover { border-color: var(--av-brand-primary-mid); transform: translateY(-1px); box-shadow: 0 10px 22px rgba(0,116,184,0.10); }
.avail-card.is-focused { border-color: var(--av-brand-primary); background: linear-gradient(135deg, #fff 0%, var(--av-brand-primary-softer) 100%); box-shadow: 0 0 0 1px var(--av-brand-primary) inset; }
.avail-card.is-disabled { opacity: 0.5; }
.avail-card__head { display: flex; align-items: center; gap: 6px; }
.avail-card__head b { font-weight: 600; font-size: 12px; color: var(--av-ink-900); }
.avail-card__pin { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--av-brand-primary); background: var(--av-brand-primary-soft); padding: 1px 6px; border-radius: var(--av-radius-pill); }
.avail-card__desc { font-size: 10.5px; color: var(--av-brand-primary); line-height: 1.3; font-weight: 600;}
.avail-card__net  { font-size: 10.5px; color: var(--av-ink-700); }
.avail-card__tags { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 1px; }
.avail-card__tags .tag { font-size: 9px; height: 14px; padding: 0 4px; }

/* User portal layout (no rail) */
.app[data-role="user"] { grid-template-columns: 1fr; }
.app[data-role="user"] .rail { display: none; }
.app[data-role="user"] .topbar__brand { display: flex; }
.app[data-role="user"] .body { max-width: 1400px; margin: 0 auto; width: 100%; }

/* ==========================================================================
   Dark theme — applied via .app[data-theme="dark"]
   Also mirror key ink/surface vars on [data-bs-theme="dark"] so Bootstrap
   modals (rendered outside .app) inherit correct colors.
   ========================================================================== */
[data-bs-theme="dark"] {
  --av-ink-900: #E8EDF5;
  --av-ink-800: #D0D6DF;
  --av-ink-700: #B0B8C4;
  --av-ink-500: #6F7886;
  --av-ink-400: #555E6B;
  --av-line-100: #1E252F;
  --av-line-200: #283040;
  --av-surface: #11161D;
  --av-surface-subtle: #161C25;
  --av-surface-page: #0B0F14;
  --av-brand-primary: #2B9AE0;
}
.app[data-theme="dark"] {
  --av-surface:        #11161D;
  --av-surface-subtle: #161C25;
  --av-surface-page:   #0B0F14;
  --av-ink-900: #E8EDF5;
  --av-ink-800: #D0D6DF;
  --av-ink-700: #B0B8C4;
  --av-ink-500: #6F7886;
  --av-ink-400: #555E6B;
  --av-line-100: #1E252F;
  --av-line-200: #283040;
  --av-line-300: #344056;
  --av-brand-primary-soft:    #14283A;
  --av-brand-primary-softer:  #0F1E2E;
  --av-brand-primary-softest: #0C1924;
  --av-brand-primary:        #2B9AE0;
  --av-brand-primary-mid:    #2087C8;
  --av-brand-primary-hover:  #41ACEF;
  --av-shadow-card:    0 10px 20px 0 rgba(0,0,0,0.45);
  --av-shadow-card-sm: 0 5px 20px 0 rgba(0,0,0,0.45);
  --av-shadow-modal:   0 0 60px 0 rgba(0,0,0,0.65);
}
.app[data-theme="dark"] { background: var(--av-surface-page); }
body:has(.app[data-theme="dark"]) { background: #0B0F14; }

.app[data-theme="dark"] .rail { background: linear-gradient(180deg, #11161D 0%, #0E141B 100%); border-right-color: var(--av-line-100); }
.app[data-theme="dark"] .topbar { background: rgba(17,22,29,0.85); border-bottom-color: var(--av-line-100); }
.app[data-theme="dark"] .panel { background: var(--av-surface); border-color: var(--av-line-100); box-shadow: 0 10px 20px rgba(0,0,0,0.45); }
.app[data-theme="dark"] .panel__head { background: rgba(16,22,32,0.7); border-bottom-color: var(--av-line-100); }
.app[data-theme="dark"] .nodes-head-box { background: var(--av-surface); border-color: var(--av-line-100); box-shadow: 0 10px 20px rgba(0,0,0,0.45); }
.app[data-theme="dark"] .nodes-tbl thead th,
.app[data-theme="dark"] .tunnels-tbl thead th,
.app[data-theme="dark"] .routes-tbl thead th { background: #131A24; }
.app[data-theme="dark"] .nodes-tbl tbody tr:hover { background: rgba(43,154,224,0.06); }
.app[data-theme="dark"] .nodes-tbl tbody tr.is-selected { background: rgba(43,154,224,0.12); }
.app[data-theme="dark"] .kpi { background: var(--av-surface); border-color: var(--av-line-100); box-shadow: 0 10px 20px rgba(0,0,0,0.4); }
.app[data-theme="dark"] .input,
.app[data-theme="dark"] .topbar__search,
.app[data-theme="dark"] .av-input,
.app[data-theme="dark"] .av-textarea,
.app[data-theme="dark"] .av-select { background: #161C25; border-color: var(--av-line-200); color: var(--av-ink-900); }
.app[data-theme="dark"] .topbar__user:hover { background: rgba(43,154,224,0.08); }
.app[data-theme="dark"] .theme-toggle { background: #131A24; border-color: var(--av-line-200); }
.app[data-theme="dark"] .theme-toggle__opt.is-on { background: var(--av-brand-primary-soft); color: var(--av-brand-primary); }
.app[data-theme="dark"] .icon-btn { color: var(--av-ink-700); }
.app[data-theme="dark"] .icon-btn:hover { background: rgba(43,154,224,0.08); border-color: var(--av-line-100); color: var(--av-ink-900); }
.app[data-theme="dark"] .tag { background: rgba(43,154,224,0.18); color: #88CDF8; }
.app[data-theme="dark"] .tag--lte { background: rgba(255,213,76,0.18); color: #FFE194; }
.app[data-theme="dark"] .tag--gps { background: rgba(0,183,163,0.18); color: #6FE0CD; }
.app[data-theme="dark"] .tag--ws  { background: rgba(19,112,241,0.18); color: #88BBFF; }
.app[data-theme="dark"] .tag--hw  { background: rgba(225,23,151,0.18); color: #F185CD; }
.app[data-theme="dark"] .tag-chip { background: #131A24; border-color: var(--av-line-200); color: var(--av-ink-700); }
.app[data-theme="dark"] .tag-chip:hover { border-color: var(--av-brand-primary-mid); color: var(--av-ink-900); }
.app[data-theme="dark"] .tag-chip.is-active { background: var(--av-brand-primary); border-color: var(--av-brand-primary); color: #fff; }
.app[data-theme="dark"] .tag-chip.tag-chip--lte      { background: rgba(255,213,76,0.10);  border-color: rgba(255,213,76,0.30);  color: #FFE194; }
.app[data-theme="dark"] .tag-chip.tag-chip--gps      { background: rgba(0,183,163,0.10);  border-color: rgba(0,183,163,0.30);  color: #6FE0CD; }
.app[data-theme="dark"] .tag-chip.tag-chip--online   { background: rgba(0,183,163,0.10);  border-color: rgba(0,183,163,0.30);  color: #6FE0CD; }
.app[data-theme="dark"] .tag-chip.tag-chip--offline  { background: rgba(220,53,69,0.12);  border-color: rgba(220,53,69,0.35);  color: #F89898; }
.app[data-theme="dark"] .tag-chip.tag-chip--pending  { background: rgba(240,192,64,0.10); border-color: rgba(240,192,64,0.30); color: #FFE194; }
.app[data-theme="dark"] .tag-chip.tag-chip--disabled { background: rgba(120,130,145,0.12);border-color: rgba(120,130,145,0.30);color: #9AA3B0; }
.app[data-theme="dark"] .tag-chip.tag-chip--outdated { background: rgba(245,166,74,0.12); border-color: rgba(245,166,74,0.30); color: #FFBF7A; }
.app[data-theme="dark"] .tag-chip.tag-chip--focused  { background: rgba(139,92,246,0.10); border-color: rgba(139,92,246,0.30); color: #C4B5FD; }
.app[data-theme="dark"] .tag-chip.tag-chip--user     { background: rgba(99,155,255,0.10); border-color: rgba(99,155,255,0.30); color: #93BBF9; }
.app[data-theme="dark"] .tag-chip.tag-chip--lte.is-active, .app[data-theme="dark"] .tag-chip.tag-chip--gps.is-active,
.app[data-theme="dark"] .tag-chip.tag-chip--online.is-active, .app[data-theme="dark"] .tag-chip.tag-chip--offline.is-active,
.app[data-theme="dark"] .tag-chip.tag-chip--pending.is-active, .app[data-theme="dark"] .tag-chip.tag-chip--disabled.is-active,
.app[data-theme="dark"] .tag-chip.tag-chip--outdated.is-active, .app[data-theme="dark"] .tag-chip.tag-chip--focused.is-active,
.app[data-theme="dark"] .tag-chip.tag-chip--user.is-active { background: var(--av-brand-primary); border-color: var(--av-brand-primary); color: #fff; }
.app[data-theme="dark"] .user-card { background: var(--av-surface); border-color: var(--av-line-100); box-shadow: 0 10px 20px rgba(0,0,0,0.4); }
.app[data-theme="dark"] .av-btn { box-shadow: 0 5px 20px rgba(0,0,0,0.4); }
.app[data-theme="dark"] .av-btn--elevated { background: #131A24; color: #88CDF8; border-color: var(--av-line-200); }
.app[data-theme="dark"] .av-btn--secondary { background: #131A24; color: var(--av-ink-900); border-color: var(--av-line-300); }
.app[data-theme="dark"] .status--off { background: var(--av-line-100); color: var(--av-ink-500); border-color: var(--av-line-200); }
.app[data-theme="dark"] .username-row { color: var(--av-ink-900); }
.app[data-theme="dark"] .rail__collapse { background: #11161D; border-color: var(--av-line-200); color: var(--av-ink-700); }
.app[data-theme="dark"] .focus-diagram { background: linear-gradient(135deg, #11161D 0%, #0F1A26 100%); border-color: var(--av-line-100); }
.app[data-theme="dark"] .focus-tile { background: #131A24; border-color: var(--av-line-100); box-shadow: 0 6px 14px rgba(0,0,0,0.5); }
.app[data-theme="dark"] .avail-card { background: var(--av-surface); border-color: var(--av-line-100); }
.app[data-theme="dark"] .avail-card.is-focused { background: linear-gradient(135deg, var(--av-surface) 0%, rgba(43,154,224,0.10) 100%); }
.app[data-theme="dark"] .device-pick:hover { background: rgba(43,154,224,0.06); }
.app[data-theme="dark"] .device-pick.is-active { background: rgba(43,154,224,0.12); }
.app[data-theme="dark"] .table thead th { background: var(--av-surface); color: var(--av-ink-600); border-color: var(--av-line-200); }
.app[data-theme="dark"] .table tbody tr { color: var(--av-ink-900); }
.app[data-theme="dark"] .table tbody tr:hover td { background: rgba(255,255,255,0.03); }