/* v16.37 Online now (mockups online-now): KPI strip, saved views, one-line filters, calm table, drawer, bulk bar, mobile cards.
   Logical properties only, so Arabic mirrors without overrides. */
.on16 { display: flex; flex-direction: column; gap: 12px; }
.on16-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.on16-head h2 { margin: 0; font-size: 20px; }
.on16-head .sub { color: var(--color-text-muted); font-size: 13px; }
.on16-head .sp { flex: 1; }
.on16-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface); font-size: 13px; white-space: nowrap; }
.on16-chip.live { border-color: var(--color-ok-fg); color: var(--color-ok-fg); }
.on16-chip.paused { color: var(--color-text-muted); }
.on16-chip .dot { inline-size: 8px; block-size: 8px; border-radius: 50%; background: currentColor; }
.on16-chip button { all: unset; cursor: pointer; padding: 0 4px; border-inline-start: 1px solid var(--color-border); margin-inline-start: 4px; font-weight: 600; }
.on16-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface); font-size: 13px; cursor: pointer; }
.on16-toggle[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.on16-toggle { font: inherit; color: var(--color-text); }
.on16-sw { position: relative; inline-size: 34px; block-size: 20px; border-radius: 999px; background: var(--color-border-control); flex: 0 0 auto; transition: background-color .15s; }
.on16-sw::after { content: ""; position: absolute; inset-block-start: 2px; inset-inline-start: 2px; inline-size: 16px; block-size: 16px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-1); transition: inset-inline-start .15s; }
.on16-toggle[aria-checked="true"] .on16-sw { background: var(--color-brand); }
.on16-toggle[aria-checked="true"] .on16-sw::after { inset-inline-start: 16px; }

.on16-kpis { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; }
.on16-kpi { all: unset; box-sizing: border-box; display: flex; flex-direction: column; gap: 4px; padding: 12px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); cursor: pointer; min-inline-size: 0; }
.on16-kpi:hover, .on16-kpi:focus-visible { border-color: var(--color-brand); }
.on16-kpi .l { font-size: 12.5px; color: var(--color-text-secondary); display: flex; gap: 6px; align-items: center; }
.on16-kpi .v { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.on16-kpi .s { font-size: 12px; color: var(--color-text-muted); }
.on16-kpi.warn { border-color: var(--color-warn-fg); background: var(--color-warn-bg); }
.on16-kpi.bad { border-color: var(--color-bad-fg); background: var(--color-bad-bg); }
.on16-kpi.bad .v, .on16-kpi.bad .l { color: var(--color-bad-fg); }
.on16-kpi.zero.bad { border-color: var(--color-border); background: var(--color-surface); }
.on16-kpi.zero.bad .v, .on16-kpi.zero.bad .l { color: inherit; }
.on16-up { color: var(--color-ok-fg); } .on16-down { color: var(--color-bad-fg); }

.on16-views { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.on16-view { all: unset; cursor: pointer; display: inline-flex; white-space: nowrap; gap: 6px; align-items: center; padding: 5px 12px; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface); font-size: 13px; }
.on16-view .n { font-size: 12px; padding: 0 7px; border-radius: 999px; background: var(--color-neutral-bg); font-variant-numeric: tabular-nums; }
.on16-view[aria-pressed="true"] { border-color: var(--color-brand); color: var(--color-brand-text); font-weight: 600; box-shadow: 0 0 0 1px var(--color-brand) inset; }
.on16-view[aria-pressed="true"] .n { background: var(--color-brand); color: var(--color-text-on-brand); }
.on16-view.bad { color: var(--color-bad-fg); border-color: var(--color-bad-border, var(--color-bad-fg)); }
.on16-view.bad .n { background: var(--color-bad-solid); color: #fff; }
.on16-view.warn .n { background: var(--color-warn-bg); }

.on16-card { border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); }
.on16-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 10px 12px; border-block-end: 1px solid var(--color-border); }
#on16 .on16-bar input, #on16 .on16-bar select, #on16 .on16-foot select, #on16 .on16-pop input { block-size: 34px; min-block-size: 34px; padding-block: 0; font-size: 13px; margin: 0; }
#on16 .on16-bar .q { flex: 1 1 180px; min-inline-size: 150px; max-inline-size: 210px; inline-size: auto; }
#on16 .on16-sel { max-inline-size: 150px; }
#on16 #on16sort { max-inline-size: 175px; }
.on16 .on16-sel { inline-size: auto; block-size: 34px; border: 1px solid var(--color-border); border-radius: 8px; background-color: var(--color-surface); padding-inline: 8px 26px; font-size: 13px; max-inline-size: 180px; color: var(--color-text); }
.on16-sel.on { border-color: var(--color-brand); color: var(--color-brand-text); font-weight: 600; }
.on16-pop { position: absolute; z-index: 30; inset-block-start: calc(100% + 6px); inline-size: 330px; padding: 14px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); box-shadow: var(--shadow-3); }
.on16-pop h4 { margin: 10px 0 6px; font-size: 13px; }
.on16-pop .chips { display: flex; gap: 6px; flex-wrap: wrap; }
.on16-pop .chips button { all: unset; cursor: pointer; padding: 4px 10px; border: 1px solid var(--color-border); border-radius: 8px; font-size: 13px; }
.on16-pop .chips button[aria-pressed="true"] { border-color: var(--color-brand); color: var(--color-brand-text); background: var(--color-brand-soft, var(--color-blue-50)); }
.on16-rel { position: relative; }

.on16-bulk { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 8px 12px; background: var(--color-brand-soft, var(--color-blue-50)); border-block-end: 1px solid var(--color-border); }
.on16-bulk b { font-variant-numeric: tabular-nums; }

.on16-tw { overflow-x: auto; }
.on16-t { inline-size: 100%; border-collapse: collapse; table-layout: fixed; font-size: 13px; min-inline-size: 1080px; }
.on16-t th { text-align: start; font-weight: 600; font-size: 12.5px; color: var(--color-text-secondary); padding: 10px 8px; background: var(--color-surface-sunken); border-block-end: 1px solid var(--color-border); white-space: nowrap; }
.on16-t th button { all: unset; cursor: pointer; }
.on16-t th button[aria-sort]:not([aria-sort="none"]) { color: var(--color-brand-text); }
.on16-t td { padding: 10px 8px; border-block-end: 1px solid var(--color-border); vertical-align: middle; overflow: hidden; text-overflow: ellipsis; }
.on16.compact .on16-t td { padding-block: 5px; }
.on16-t tr:hover td { background: var(--color-surface-hover); }
.on16-t tr.sel td { background: var(--color-brand-soft, var(--color-blue-50)); }
.on16-t tr.anom td { background: var(--color-bad-bg); }
.on16-t tr.anom td:first-child { box-shadow: 3px 0 0 var(--color-bad-solid) inset; }
[dir="rtl"] .on16-t tr.anom td:first-child { box-shadow: -3px 0 0 var(--color-bad-solid) inset; }
.on16-t tr.stale td { color: var(--color-text-muted); }
.on16-t .who a { font-weight: 600; }
.on16-t .sub2 { font-size: 12px; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.on16-plan { display: inline-block; white-space: nowrap; max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; padding: 2px 8px; border-radius: 6px; background: var(--color-blue-50); color: var(--color-blue-800); font-weight: 600; font-size: 12.5px; }
.on16-plan.redir { background: var(--color-warn-bg); color: var(--color-warn-fg); }
.on16-tag { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 6px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.on16-tag.fup { background: var(--color-warn-bg); color: var(--color-warn-fg); }
.on16-tag.flap { background: var(--color-cyan-50); color: var(--color-cyan-800); }
.on16-acct { font-size: 12.5px; }
.on16-acct.warn { color: var(--color-warn-fg); font-weight: 600; }
.on16-acct.redir { display: inline-block; padding: 3px 8px; border-radius: 6px; background: var(--color-warn-bg); color: var(--color-warn-fg); font-weight: 600; }
.on16-acct.bad { display: inline-block; padding: 3px 8px; border-radius: 6px; background: var(--color-bad-bg); color: var(--color-bad-fg); font-weight: 700; }
.on16-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; direction: ltr; unicode-bidi: isolate; }
.on16-copy { all: unset; cursor: pointer; opacity: .6; padding: 0 3px; font-size: 11px; }
.on16-copy:hover { opacity: 1; }
.on16-meter { block-size: 5px; border-radius: 3px; background: var(--color-gray-100); margin-block-start: 4px; overflow: hidden; }
.on16-meter i { display: block; block-size: 100%; background: var(--color-blue-600); }
.on16-meter i.warn { background: var(--color-warn-solid); }
.on16-speed { display: flex; align-items: center; gap: 8px; }
.on16-speed .n { font-variant-numeric: tabular-nums; font-weight: 700; }
.on16-speed .hot { color: var(--color-bad-fg); }
.on16-speed .hot::before { content: "●"; font-size: 9px; margin-inline-end: 3px; vertical-align: 2px; }
.on16-spark { inline-size: 64px; block-size: 22px; flex: 0 0 auto; }
.on16-more { all: unset; cursor: pointer; inline-size: 32px; block-size: 32px; display: inline-grid; place-items: center; border-radius: 8px; border: 1px solid transparent; }
.on16-more:hover, .on16-more[aria-expanded="true"] { border-color: var(--color-border); background: var(--color-surface); }
.on16-menu { position: fixed; z-index: 60; min-inline-size: 250px; padding: 6px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); box-shadow: var(--shadow-3); }
.on16-menu button, .on16-menu a { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 10px; inline-size: 100%; min-block-size: 38px; padding-inline: 10px; border-radius: 8px; font-size: 13.5px; cursor: pointer; color: var(--color-text); }
.on16-menu button:hover, .on16-menu a:hover, .on16-menu button:focus-visible, .on16-menu a:focus-visible { background: var(--color-surface-hover); }
.on16-menu .hint { margin-inline-start: auto; font-size: 11.5px; color: var(--color-text-muted); }
.on16-menu .danger { color: var(--color-bad-fg); }
.on16-menu hr { border: 0; border-block-start: 1px solid var(--color-border); margin: 4px 0; }
.on16-menu [aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.on16-legend { display: flex; gap: 16px; flex-wrap: wrap; padding: 8px 12px; font-size: 12px; color: var(--color-text-muted); border-block-end: 1px solid var(--color-border); }
.on16-foot { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 10px 12px; font-size: 13px; }
.on16-foot .sp { flex: 1; }
.on16-pager { display: inline-flex; gap: 4px; }
.on16-pager button { all: unset; cursor: pointer; min-inline-size: 30px; block-size: 30px; display: inline-grid; place-items: center; border: 1px solid var(--color-border); border-radius: 8px; font-size: 13px; padding-inline: 4px; }
.on16-pager button[aria-current="page"] { background: var(--color-brand); color: var(--color-text-on-brand); border-color: var(--color-brand); }
.on16-pager button:disabled { opacity: .4; cursor: default; }

/* drawer */
.on16-drawer { position: fixed; z-index: 55; inset-block: 0; inset-inline-end: 0; inline-size: min(520px, 100vw); background: var(--color-surface); box-shadow: var(--shadow-3); display: flex; flex-direction: column; border-inline-start: 1px solid var(--color-border); }
.on16-drawer header { padding: 16px; border-block-end: 1px solid var(--color-border); display: flex; gap: 10px; align-items: flex-start; }
.on16-drawer header h3 { margin: 0; font-size: 18px; }
.on16-drawer .body { flex: 1; overflow: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 12px; }
.on16-drawer footer { padding: 12px 16px; border-block-start: 1px solid var(--color-border); display: flex; gap: 8px; flex-wrap: wrap; }
.on16-drawer section { border: 1px solid var(--color-border); border-radius: 12px; padding: 12px; }
.on16-drawer section h4 { margin: 0 0 8px; font-size: 14px; display: flex; gap: 8px; align-items: center; }
.on16-kv { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 6px 12px; font-size: 13px; }
.on16-kv dt { color: var(--color-text-muted); }
.on16-kv dd { margin: 0; text-align: end; }
.on16-chart { inline-size: 100%; block-size: 160px; }

/* mobile cards */
.on16-cards { display: none; }
@media (max-width: 760px) {
  .on16-kpis { display: flex; overflow-x: auto; gap: 8px; padding-block-end: 4px; }
  .on16-kpi { flex: 0 0 132px; padding: 10px; }
  .on16-kpi .v { font-size: 18px; }
  .on16-views { flex-wrap: nowrap; overflow-x: auto; }
  .on16-bar .on16-hide-m { display: none; }
  .on16-bar { flex-wrap: nowrap; overflow-x: auto; }
  .on16 .on16-bar .q { flex: 0 0 200px; }
  .on16-head { gap: 6px; }
  .on16-head .on16-chip:nth-child(2) { display: none; }
  .on16-tw, .on16-legend { display: none; }
  .on16-cards { display: flex; flex-direction: column; gap: 10px; padding: 10px; }
  .on16-c { border: 1px solid var(--color-border); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 8px; background: var(--color-surface); }
  .on16-c.anom { border-color: var(--color-bad-fg); background: var(--color-bad-bg); }
  .on16-c .row1 { display: flex; gap: 8px; align-items: flex-start; }
  .on16-c .row1 .sp { flex: 1; }
  .on16-c .row3 { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; }
  .on16-head .sub { display: none; }
  .on16-drawer { inline-size: 100vw; }
  .on16-kv { grid-template-columns: auto 1fr; }
}

/* v16.56: router maker label next to the MAC */
.on16-ven { display: inline-block; font-family: var(--font-sans); font-size: 11px; font-weight: 700; line-height: 1.5; padding: 0 7px; border-radius: 99px; color: var(--vc, var(--color-text-secondary, #475569)); background: color-mix(in srgb, var(--vc, #64748b) 12%, transparent); border: 1px solid color-mix(in srgb, var(--vc, #64748b) 30%, transparent); vertical-align: middle; white-space: nowrap; }
#on16ven { min-inline-size: 180px; }