/* Niyya look: the selector family (firewall, server, thin-client, WAF).
   They share one stylesheet design; each app's own file adds its extras.
   Vendor/OEM colours (--vendor, --oem), pass/fail colours and the
   Word / PowerPoint / Excel badges are kept: they carry meaning. */

:root {
  --ink: var(--niyya-ink);
  --ink-soft: var(--niyya-text-2);
  --muted: var(--niyya-muted);
  --line: var(--niyya-line);
  --line-soft: var(--niyya-paper-2);
  --bg: var(--niyya-paper);
  --surface: #fff;
  --navy: var(--niyya-ink);
  --navy-soft: var(--niyya-ink-3);
  --accent: var(--niyya-pink-ink);
  --brand: var(--niyya-pink);
}
body { background: var(--niyya-paper); }

/* ---- top bar: ink, as the site header ---- */
.topbar { background: var(--niyya-ink); border-bottom-color: var(--niyya-ink); }
.brand-mark svg { border-radius: 7px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .16); }
.brand-text strong { color: #fff; }
.brand-text small { color: var(--niyya-on-dark-2); }
.topnav a { position: relative; color: var(--niyya-on-dark); }
.topnav a:hover { background: var(--niyya-dark-hover); color: #fff; }
.topnav a.is-active { background: transparent; color: #fff; font-weight: 600; }
.topnav a.is-active::after {
  content: ""; position: absolute; inset-inline: 13px; bottom: 1px; height: 2px; border-radius: 2px;
  background: var(--niyya-rainbow);
}
.nav-count { background: var(--niyya-pink); color: var(--niyya-ink); }
.topnav a.is-active .nav-count { background: #fff; color: var(--niyya-ink); }
.topbar .who, .topbar .who.muted { color: var(--niyya-on-dark); }
.avatar { background: var(--niyya-pink); color: var(--niyya-ink); }
.topbar .btn-outline { background: transparent; border-color: rgba(255, 255, 255, .3); color: #fff; }
.topbar .btn-outline:hover { background: var(--niyya-dark-hover); border-color: #fff; }
.topbar .btn-ghost { color: var(--niyya-on-dark); }
.topbar .btn-ghost:hover { background: var(--niyya-dark-hover); color: #fff; }
.topbar .btn-primary { background: #fff; color: var(--niyya-ink); }
.topbar .btn-primary:hover { background: var(--niyya-paper-2); }

/* ---- buttons and fields ---- */
.btn-primary:hover { background: var(--niyya-ink-3); }
.btn-outline:hover, .btn-export:hover, .check:hover { border-color: var(--niyya-line-2); }
.btn-danger:hover { background: #FEF3F2; }
input:focus, select:focus, textarea:focus { outline-color: rgba(240, 111, 168, .35); border-color: var(--niyya-pink); }
.btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, .th-sort:focus-visible { outline-color: var(--niyya-pink); }
.range-row input[type=range], .check input, .chip input, .col-compare input, .seg input { accent-color: var(--niyya-ink); }

/* ---- ticked: warm paper; the one pick: a pink wash ---- */
.check:has(input:checked), .chip:has(input:checked) { border-color: var(--niyya-ink); background: var(--niyya-paper-2); color: var(--niyya-ink); }
.vendor:has(input:checked), .chip-check:has(input:checked), tr.is-ticked { background: var(--niyya-paper-2); }
.vcard.is-selected { background: var(--niyya-pink-soft); box-shadow: 0 0 0 2px rgba(240, 111, 168, .22); }
.table tr.is-chosen td { background: var(--niyya-pink-soft); }
.vcard:hover { box-shadow: 0 6px 20px rgba(11, 11, 11, .08); }

/* ---- quiet surfaces: paper instead of blue-grey ---- */
.table tbody tr:hover { background: var(--niyya-paper); }
.table-kv th, .picker, .compare-rowhead, .compare-need,
.compare-table tr.group th, .spec-table tr.group th, .method .formula { background: var(--niyya-paper-2); }
.notice, .flash-info { background: var(--niyya-paper-2); border-color: var(--niyya-line); color: var(--niyya-text-2); }
.panel-export { border-color: var(--niyya-line); background: linear-gradient(180deg, var(--niyya-paper), #fff); }
.tab.is-active { color: var(--niyya-ink); box-shadow: 0 1px 2px rgba(11, 11, 11, .08); }
.tray { box-shadow: 0 -6px 18px rgba(11, 11, 11, .06); }

/* ---- category pills: blues and indigos become the Niyya accents ---- */
.pill-support, .pill-module { background: var(--niyya-pink-soft); color: var(--niyya-pink-ink); }
.pill-platform, .pill-info { background: var(--niyya-amber-soft); color: var(--niyya-amber-ink); }
.pill-management { background: var(--niyya-paper-2); color: var(--niyya-text-2); }
.pill-selected { background: var(--niyya-ink); color: #fff; }