@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600;700&display=swap");

/* ============================================================
   Splendom theme pack for MeshCentral (30-10-2026)
   Same tokens as the Dashboard (app/globals.css): navy #003479, warm paper,
   champagne-gold accent, Fraunces for titles and Inter for text.
   Lives in data/theme-pack/splendom and loads on top of the modern UI
   (siteStyle 3): MeshCentral's own files are never edited, so an update keeps
   it. After every update, check it again (UPDATE-NOTES.md).
   ============================================================ */
:root,
[data-bs-theme="light"] {
  --sp-navy-50: #eef3fb;
  --sp-navy-100: #d7e3f5;
  --sp-navy-200: #aec6ea;
  --sp-navy-500: #1a4d9c;
  --sp-navy: #003479;
  --sp-navy-700: #002c66;
  --sp-navy-900: #00193c;
  --sp-gold-300: #ddc79a;
  --sp-gold: #c2a36b;
  --sp-gold-600: #a9874c;
  --sp-paper: #faf8f4;
  --sp-paper-200: #f1ede5;
  --sp-ink: #16233b;
  --sp-muted: #5a667a;
  --sp-line: #e6e1d7;
  --sp-ok: #1f7a54;
  --sp-warn: #b5701a;
  --sp-danger: #a33131;
  --sp-display: "Fraunces", Georgia, serif;
  --sp-body: "Inter", system-ui, sans-serif;
  --sp-shadow: 0 24px 50px -28px rgba(0, 25, 60, 0.4);

  --bs-body-font-family: var(--sp-body);
  --bs-body-bg: var(--sp-paper);
  --bs-body-color: var(--sp-ink);
  --bs-primary: var(--sp-navy);
  --bs-primary-rgb: 0, 52, 121;
  --bs-secondary-color: var(--sp-muted);
  --bs-link-color: var(--sp-navy);
  --bs-link-color-rgb: 0, 52, 121;
  --bs-link-hover-color: var(--sp-navy-700);
  --bs-link-hover-color-rgb: 0, 44, 102;
  --bs-border-color: var(--sp-line);
  --bs-border-radius: 0.5rem;
  --bs-tertiary-bg: var(--sp-paper-200);
  --bs-secondary-bg: var(--sp-paper-200);
  --bs-emphasis-color: var(--sp-ink);
  --bs-focus-ring-color: rgba(0, 52, 121, 0.18);
  --sub-menu-bg: #fff;
  --sub-menu-color: var(--sp-muted);
}

html,
body {
  background: var(--sp-paper) !important;
}
body,
body * {
  font-family: var(--sp-body);
}
body {
  color: var(--sp-ink);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection {
  background-color: var(--sp-navy);
  color: #fff;
}
* {
  text-shadow: none !important;
}
a,
a:not(.btn):not(.nav-link):not(.dropdown-item) {
  color: var(--sp-navy) !important;
  text-underline-offset: 3px;
}
#userDropdown,
.user-menu-container {
  background: transparent !important;
}
a:hover {
  color: var(--sp-navy-700);
}

/* Scrollbars: no grey track, a thin navy thumb (as in the Dashboard). */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 52, 121, 0.22) transparent;
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(0, 52, 121, 0.22);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 52, 121, 0.4);
  background-clip: padding-box;
}

/* ---------- Page frame ---------- */
.fullscreen #container {
  grid-template-columns: 232px minmax(0, 1fr);
  grid-template-rows: 72px auto minmax(0, 1fr) 0;
  background: var(--sp-paper);
}
#container,
#column_l,
.night #column_l {
  background: var(--sp-paper) !important;
  color: var(--sp-ink);
}
#column_l {
  padding: 8px 32px 32px !important;
  overflow: auto;
}

/* Header: white, 72 px, the Splendom logo and "DEVICES" under the name. */
#masthead {
  height: 72px;
  background: #fff !important;
  background-image: none !important;
  border-bottom: 1px solid var(--sp-line);
  padding: 0 1.25rem 0 1.5rem;
}
.masthead-left {
  gap: 0.75rem;
}
.masthead-title {
  width: 34px;
  height: 34px;
  background: url("../images/splendom-logo.png") center / contain no-repeat;
  cursor: pointer;
}
.masthead-titles-container {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
}
#masthead .title {
  color: var(--sp-ink) !important;
  font-family: var(--sp-display) !important;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.015em;
}
#masthead .title2 {
  color: var(--sp-ink) !important;
  opacity: 0.7;
  font-size: 0.62rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  padding: 0;
  line-height: 1;
}
.masthead-right .text-white,
#notificationCount svg {
  color: var(--sp-navy) !important;
}

/* The person menu, like the Dashboard's ghost buttons. */
#userDropdownButton {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 36px;
  padding: 0 0.9rem 0 0.35rem;
  border: 1px solid var(--sp-line);
  border-radius: 999px;
  background: transparent !important;
  color: var(--sp-navy) !important;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  transition: border-color 0.07s ease-out, background-color 0.07s ease-out;
}
#userDropdownButton:hover {
  border-color: var(--sp-navy);
  background: #fff !important;
}
#userDropdownButton span,
#userDropdownButton svg,
.LogoffLinkColor {
  color: var(--sp-navy) !important;
}
#userDropdownImage {
  width: 26px;
  height: 26px;
  border-radius: 999px;
}
#userDropdownMenu {
  background: #fff !important;
  border: 1px solid var(--sp-line) !important;
  border-radius: 0.75rem !important;
  box-shadow: var(--sp-shadow) !important;
  overflow: hidden;
  padding: 0.35rem 0;
}
.userDropdownMenuItem {
  color: var(--sp-ink) !important;
  padding: 0.55rem 1rem !important;
  transition: background-color 0.07s ease-out;
}
.userDropdownMenuItem:hover {
  background: var(--sp-paper-200) !important;
  color: var(--sp-navy) !important;
}

/* Side menu: white, icon + name, the gold rule on the open page. */
#page_leftbar {
  width: 232px !important;
  background: #fff !important;
  border-right: 1px solid var(--sp-line);
  padding: 1rem 0.75rem;
  overflow-y: auto !important;
}
#page_leftbar .nav {
  gap: 0.25rem;
}
#page_leftbar .nav-link {
  position: relative;
  display: flex !important;
  align-items: center;
  gap: 0.75rem;
  width: 100% !important;
  margin: 0 !important;
  padding: 0.6rem 0.85rem !important;
  border-radius: 0.6rem !important;
  color: var(--sp-muted) !important;
  background: transparent !important;
  text-align: left !important;
  font-weight: 500;
  font-size: 0.9rem;
  opacity: 1 !important;
  transition: background-color 0.07s ease-out, color 0.07s ease-out;
}
#page_leftbar .nav-link svg {
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  flex: none;
  font-size: 18px !important;
}
#page_leftbar .nav-link:hover {
  background: var(--sp-paper-200) !important;
  color: var(--sp-navy) !important;
}
#page_leftbar .nav-link.lbbuttonsel,
#page_leftbar .nav-link.lbbuttonsel2 {
  background: var(--sp-navy-50) !important;
  color: var(--sp-navy) !important;
  font-weight: 600;
}
#page_leftbar .nav-link.lbbuttonsel2::before,
#page_leftbar .nav-link.lbbuttonsel::before {
  content: "";
  position: absolute;
  left: -0.75rem;
  top: 0.45rem;
  bottom: 0.45rem;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--sp-gold);
}
.sp-navlabel {
  white-space: nowrap;
}

/* Tabs above the content (a device's General / Desktop / Terminal / Files...). */
#topbar {
  background: transparent !important;
  padding: 0 32px;
}
#topbar table.style1 {
  border-collapse: collapse;
  border-bottom: 1px solid var(--sp-line);
  margin-top: 0.5rem;
}
.topbar_td,
.topbar_td.style3x,
.topbar_td.style3sel,
.topbar_td_end,
.style3,
.style3x,
.style3sel {
  background: transparent !important;
  color: var(--sp-muted) !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  padding: 0.65rem 0.9rem !important;
  font-size: 0.875rem;
  font-weight: 500;
  height: auto !important;
  transition: color 0.07s ease-out, border-color 0.07s ease-out;
}
.topbar_td.style3x:hover,
.style3x:hover {
  color: var(--sp-navy) !important;
  border-bottom-color: var(--sp-navy-200) !important;
}
.topbar_td.style3sel,
.topbar_td.style3x.fullselect,
.topbar_td.style3x.semiselect,
.style3sel,
.style3x.fullselect {
  color: var(--sp-navy) !important;
  font-weight: 600;
  border-bottom-color: var(--sp-navy) !important;
}

/* Footer: out of the way, just the line under the page. */
#footer {
  display: none !important;
}

/* ---------- Titles ---------- */
#column_l .fs-4.fw-bold,
.fs-4.fw-bold,
h1,
h2,
h3,
h4,
.modal-title {
  font-family: var(--sp-display) !important;
  font-weight: 500 !important;
  letter-spacing: -0.015em;
  color: var(--sp-navy-900);
}
#column_l .fs-4.fw-bold {
  font-size: 2rem !important;
  line-height: 1.15;
  margin: 1.25rem 0 0.25rem;
}
#column_l [id$="title"] {
  margin-bottom: 1rem;
}
#column_l [id$="title"]::after {
  content: none;
}
.text-secondary {
  color: var(--sp-muted) !important;
}

/* ---------- Buttons: navy pills, the Dashboard's hover ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  border-radius: 999px !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  padding: 0.4rem 1rem !important;
  box-shadow: none;
  transition: transform 0.08s ease-out, background-color 0.07s ease-out, color 0.07s ease-out,
    box-shadow 0.1s ease-out, border-color 0.07s ease-out !important;
}
.btn-sm {
  padding: 0.3rem 0.85rem !important;
  font-size: 0.8rem !important;
  min-height: 32px;
}
.btn-primary,
.btn-primary:focus {
  background: var(--sp-navy) !important;
  border: 1px solid var(--sp-navy) !important;
  color: #fff !important;
}
.btn-primary:hover:not(:disabled) {
  background: var(--sp-navy-700) !important;
  border-color: var(--sp-navy-700) !important;
  transform: translateY(-1px);
  box-shadow: 0 14px 30px -12px rgba(0, 52, 121, 0.55);
}
.btn-secondary,
.btn-secondary:focus,
.btn-outline-primary,
.btn-outline-secondary,
.btn-light,
.btn-outline-success {
  background: transparent !important;
  border: 1px solid var(--sp-line) !important;
  color: var(--sp-navy) !important;
}
.btn-secondary:hover:not(:disabled),
.btn-outline-primary:hover:not(:disabled),
.btn-outline-secondary:hover:not(:disabled),
.btn-light:hover:not(:disabled),
.btn-outline-success:hover:not(:disabled) {
  background: #fff !important;
  border-color: var(--sp-navy) !important;
  color: var(--sp-navy) !important;
}
.btn-danger,
.btn-outline-danger {
  background: transparent !important;
  border: 1px solid rgba(163, 49, 49, 0.35) !important;
  color: var(--sp-danger) !important;
}
.btn-danger:hover:not(:disabled),
.btn-outline-danger:hover:not(:disabled) {
  background: var(--sp-danger) !important;
  border-color: var(--sp-danger) !important;
  color: #fff !important;
}
.btn:disabled,
.btn.disabled {
  opacity: 0.55;
}
.btn-close {
  border-radius: 999px !important;
  opacity: 0.6;
  transition: opacity 0.07s ease-out, background-color 0.07s ease-out;
}
.btn-close:hover {
  opacity: 1;
  background-color: var(--sp-paper-200);
}

/* ---------- Fields ---------- */
.form-control,
.form-select,
.form-control-sm,
.form-select-sm,
input[type="text"],
input[type="password"],
input[type="number"],
input[type="email"],
input[type="search"],
select,
textarea {
  border: 1px solid var(--sp-line) !important;
  border-radius: 0.5rem !important;
  background-color: #fff;
  color: var(--sp-ink) !important;
  font-size: 0.875rem;
  min-height: 34px;
  padding: 0.35rem 0.75rem;
  transition: border-color 0.07s ease-out, box-shadow 0.1s ease-out;
}
.form-control:focus,
.form-select:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--sp-navy) !important;
  box-shadow: 0 0 0 3px rgba(0, 52, 121, 0.14) !important;
  outline: none !important;
}
.form-check-input {
  border-color: var(--sp-navy-200);
  cursor: pointer;
}
.form-check-input:checked {
  background-color: var(--sp-navy) !important;
  border-color: var(--sp-navy) !important;
}

/* ---------- Toolbar of the device list ---------- */
#devListToolbarSpan,
#p1title + div,
.areaHead {
  background: #fff !important;
  border: 1px solid var(--sp-line) !important;
  border-radius: 0.75rem !important;
  padding: 0.6rem 0.75rem !important;
  gap: 0.5rem;
}
#devListToolbar,
#devListToolbar > * {
  gap: 0.35rem;
}
#SearchInput {
  min-width: 220px;
}
#devViewButton1,
#devViewButton2,
#devViewButton3,
#devViewButton4,
#devViewButton5 {
  color: var(--sp-muted);
  border-radius: 0.5rem;
  padding: 4px;
  cursor: pointer;
  transition: color 0.07s ease-out, background-color 0.07s ease-out;
}
#devViewButton1:hover,
#devViewButton2:hover,
#devViewButton3:hover,
#devViewButton4:hover,
#devViewButton5:hover {
  color: var(--sp-navy);
  background: var(--sp-paper-200);
}
.viewSelectorSel {
  color: var(--sp-navy) !important;
  background: var(--sp-navy-50) !important;
}

/* ---------- Device groups and devices ---------- */
#xdevices {
  margin-top: 1rem;
}
.DevSt,
.DevSt > span[id^="Mx"] {
  font-family: var(--sp-display) !important;
}
.DevSt {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 0.25rem 0.5rem !important;
  border-bottom: 1px solid var(--sp-line);
  font-family: var(--sp-display);
  font-size: 1.15rem;
  color: var(--sp-navy-900);
}
.DevSt > span[style*="float"] {
  order: 9;
  margin-left: auto;
  font-family: var(--sp-body);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--sp-gold-600);
}
.devHeaderx {
  color: var(--sp-gold-600) !important;
}
.DevSt a {
  font-family: var(--sp-body);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--sp-navy);
  border: 1px solid var(--sp-line);
  border-radius: 999px;
  padding: 0.2rem 0.75rem;
  transition: border-color 0.07s ease-out, background-color 0.07s ease-out;
}
.DevSt a:hover {
  border-color: var(--sp-navy);
  background: #fff;
}
.DevSt svg {
  color: var(--sp-muted);
}
[id^="DevxCol"] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.85rem 0;
}
[name^="xxdevice"] {
  height: auto !important;
  min-height: 64px;
  padding: 0 !important;
  background: #fff;
  border: 1px solid var(--sp-line);
  border-radius: 0.75rem;
  transition: transform 0.12s ease-out, box-shadow 0.12s ease-out, border-color 0.08s ease-out;
}
[name^="xxdevice"]:hover {
  transform: translateY(-2px);
  border-color: var(--sp-navy-100);
  box-shadow: var(--sp-shadow);
}
[name^="xxdevice"] table {
  height: 64px !important;
}
[name^="xxdevice"] td {
  padding: 0.35rem 0.5rem;
  background: transparent !important;
  background-image: none !important;
}
[name^="xxdevice"] .g1,
[name^="xxdevice"] .g2,
[name^="xxdevice"] [style*="background"] {
  background: transparent !important;
}
.g1,
.g1s,
.g1t,
.g2,
.g2s,
.g2t,
.e2,
.e2s,
.e2t {
  background-image: none !important;
  background-color: transparent !important;
}

/* ---------- Cards, panels, tables ---------- */
.card,
.pTable,
#p2info > div,
.p2AccountActions,
#serverStats > div,
.serverStateTableCell {
  border-color: var(--sp-line) !important;
}
.card {
  border-radius: 0.75rem !important;
  overflow: hidden;
}
.card-header {
  background: #fff !important;
  border-bottom: 1px solid var(--sp-line) !important;
  font-weight: 600;
  color: var(--sp-navy-900);
}
.table {
  --bs-table-bg: #fff;
  --bs-table-hover-bg: var(--sp-paper);
  --bs-table-striped-bg: var(--sp-paper);
  --bs-table-active-bg: var(--sp-navy-50);
  border-color: var(--sp-line) !important;
  border-radius: 0.75rem;
  overflow: hidden;
}
.table th,
thead td {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--sp-muted) !important;
  background: #fff !important;
}
.table td,
.table th {
  border-color: var(--sp-line) !important;
  vertical-align: middle;
}
.pTable {
  width: 100%;
  background: #fff;
  border: 1px solid var(--sp-line);
  border-radius: 0.75rem;
  border-collapse: separate !important;
  overflow: hidden;
}
.style10,
.style10s,
.style6,
.style14,
.auto-style1,
.h1,
.h2,
.bar,
.sbar,
.bar18 {
  background-image: none !important;
  background-color: transparent !important;
  color: var(--sp-ink) !important;
}

/* ---------- Dialogs (Bootstrap modals) ---------- */
.modal-content {
  border: 1px solid var(--sp-line) !important;
  border-radius: 1rem !important;
  background: #fff !important;
  box-shadow: 0 40px 80px -30px rgba(0, 25, 60, 0.45) !important;
  overflow: hidden;
  color: var(--sp-ink);
}
.modal-header,
#dialogHeader {
  background: #fff !important;
  color: var(--sp-navy-900) !important;
  border-bottom: 1px solid var(--sp-line) !important;
  padding: 1rem 1.25rem !important;
  cursor: default;
}
.modal-header .modal-title,
#dialogHeader .modal-title {
  color: var(--sp-navy-900) !important;
  font-size: 1.25rem;
}
.modal-body {
  padding: 1.25rem !important;
}
.modal-footer {
  border-top: 1px solid var(--sp-line) !important;
  background: var(--sp-paper);
  padding: 0.75rem 1.25rem !important;
}
.modal-backdrop.show {
  background: rgba(0, 25, 60, 0.35);
  opacity: 1 !important;
  backdrop-filter: blur(2px);
}

/* ---------- Context menus, dropdowns, tabs, badges ---------- */
.contextMenu,
.dropdown-menu {
  background: #fff !important;
  border: 1px solid var(--sp-line) !important;
  border-radius: 0.75rem !important;
  box-shadow: var(--sp-shadow) !important;
  padding: 0.35rem 0 !important;
  overflow: hidden;
}
.cmtext,
.dropdown-item {
  color: var(--sp-ink) !important;
  padding: 0.5rem 1rem !important;
  font-size: 0.875rem;
  transition: background-color 0.07s ease-out;
}
.cmtext:hover,
.dropdown-item:hover,
.dropdown-item:focus {
  background: var(--sp-paper-200) !important;
  color: var(--sp-navy) !important;
}
.nav-tabs {
  border-bottom: 1px solid var(--sp-line) !important;
}
.nav-tabs .nav-link {
  color: var(--sp-muted) !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  background: transparent !important;
  font-weight: 500;
}
.nav-tabs .nav-link:hover {
  color: var(--sp-navy) !important;
}
.nav-tabs .nav-link.active {
  color: var(--sp-navy) !important;
  border-bottom-color: var(--sp-navy) !important;
  font-weight: 600;
}
.badge.bg-danger {
  background: var(--sp-danger) !important;
}
.alert {
  border-radius: 0.75rem;
}
.text-danger {
  color: var(--sp-danger) !important;
}
.text-success {
  color: var(--sp-ok) !important;
}

/* Remote desktop / terminal / files: their bars match the rest. */
#deskarea1,
#deskarea4,
#termarea1,
#termarea4,
#filesarea1,
.areaHead,
.areaFoot {
  background: #fff !important;
  color: var(--sp-ink) !important;
  border-color: var(--sp-line) !important;
}
.areaFoot {
  border: 1px solid var(--sp-line);
  border-radius: 0.75rem;
  padding: 0.5rem 0.75rem;
}
.deskareaicon {
  color: var(--sp-navy);
}

/* ---------- Phone: the menu goes, the header stays ---------- */
@media (max-width: 800px) {
  .fullscreen #container {
    grid-template-columns: 0 minmax(0, 1fr);
  }
  #page_leftbar {
    display: none !important;
  }
  #column_l {
    padding: 4px 16px 24px !important;
  }
  #topbar {
    padding: 0 16px;
  }
  #SearchInput {
    min-width: 0;
  }
}

/* ---------- Sign-in (login2): never really seen, it goes straight to Authentik ---------- */
body.login,
.login #container {
  background: var(--sp-paper) !important;
  background-image: none !important;
}
.login #logincell,
#logincell {
  background: transparent !important;
}
#loginPicture {
  display: none !important;
}
/* The login page never shows: theme.js either goes on to Authentik or puts its own card on top. */
body.login:not(.sp-show) > *:not(.sp-signin) {
  visibility: hidden;
}
.sp-signin {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--sp-paper);
  z-index: 5000;
  padding: 16px;
}
.sp-signin .sp-card {
  width: min(420px, 100%);
  background: #fff;
  border: 1px solid var(--sp-line);
  border-radius: 0.75rem;
  padding: 2rem;
  text-align: center;
  box-shadow: var(--sp-shadow);
}
.sp-signin img {
  width: 48px;
  height: 48px;
}
.sp-signin .sp-eyebrow {
  margin-top: 1rem;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--sp-gold-600);
}
.sp-signin h1 {
  margin: 0.4rem 0 0;
  font-size: 1.75rem;
}
.sp-signin .sp-rule {
  width: 48px;
  height: 2px;
  margin: 0.9rem auto;
  background: var(--sp-gold);
}
.sp-signin p {
  color: var(--sp-muted);
  margin: 0 0 1.25rem;
  line-height: 1.5;
}
.sp-signin .sp-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  flex-wrap: wrap;
}
.sp-signin a.sp-btn {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 1.2rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  border: 1px solid var(--sp-line);
  color: var(--sp-navy);
  transition: transform 0.08s ease-out, background-color 0.07s ease-out, box-shadow 0.1s ease-out, border-color 0.07s ease-out;
}
.sp-signin a.sp-btn:hover {
  border-color: var(--sp-navy);
  background: #fff;
}
.sp-signin a.sp-btn.sp-primary {
  background: var(--sp-navy);
  border-color: var(--sp-navy);
  color: #fff;
}
.sp-signin a.sp-btn.sp-primary:hover {
  background: var(--sp-navy-700);
  transform: translateY(-1px);
  box-shadow: 0 14px 30px -12px rgba(0, 52, 121, 0.55);
}

/* ---------- A device's tabs and tool bars (round 2) ---------- */
#topbar,
#topbar table,
#topbar tr,
#topbar td,
#topbar div {
  background: transparent !important;
  background-image: none !important;
  height: auto !important;
  overflow: visible !important;
}
#topbar .topbar_td {
  white-space: nowrap;
  cursor: pointer;
}
[id$="BackButton"] svg {
  color: var(--sp-navy) !important;
  cursor: pointer;
  transition: transform 0.08s ease-out;
}
[id$="BackButton"]:hover svg {
  transform: translateX(-2px);
}
.btn-success,
.btn-success:focus {
  background: var(--sp-navy) !important;
  border: 1px solid var(--sp-navy) !important;
  color: #fff !important;
}
.btn-success:hover:not(:disabled) {
  background: var(--sp-navy-700) !important;
  transform: translateY(-1px);
  box-shadow: 0 14px 30px -12px rgba(0, 52, 121, 0.55);
}
.areaHead,
.areaHead > .d-flex,
#p13toolbar,
#p13toolbar .d-flex,
#p5toolbar .d-flex,
#p9toolbar .d-flex {
  flex-wrap: wrap !important;
  row-gap: 0.4rem;
}
#column_l table[id$="toolbar"],
#column_l table[id$="toolbarBottom"],
#column_l [id$="toolbar"] td {
  background: transparent !important;
  max-width: 100%;
}

/* The server's picture is the Splendom mark. */
#MainMeshImage {
  content: url("../images/splendom-logo.png");
  width: 140px;
  height: 140px;
  border-radius: 1rem;
  border: 1px solid var(--sp-line);
  background: #fff;
}
/* Offline devices: faded, not a grey photo. */
img.gray,
.gray {
  filter: grayscale(1) !important;
  opacity: 0.45;
}
.DevSt {
  flex-wrap: wrap;
}

/* ---------- People (theme.js, 30-10) ---------- */
#sp-people-link svg {
  width: 18px;
  height: 18px;
  flex: none;
}
.sp-lead {
  color: var(--sp-muted);
  margin: 0 0 1.25rem;
}
.sp-person {
  background: #fff;
  border: 1px solid var(--sp-line);
  border-radius: 0.75rem;
  margin-bottom: 1rem;
  overflow: hidden;
  transition: box-shadow 0.12s ease-out, border-color 0.08s ease-out;
}
.sp-person:hover {
  border-color: var(--sp-navy-100);
  box-shadow: var(--sp-shadow);
}
.sp-person header {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--sp-line);
}
.sp-face {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  object-fit: cover;
  flex: none;
}
.sp-initials {
  display: inline-grid;
  place-items: center;
  color: #fff;
  font-weight: 600;
  font-size: 0.85rem;
}
.sp-who {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.sp-who b {
  font-family: var(--sp-display) !important;
  font-weight: 500;
  font-size: 1.15rem;
  color: var(--sp-navy-900);
}
.sp-who small,
.sp-what small {
  color: var(--sp-muted);
  font-size: 0.8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sp-count {
  margin-left: auto;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--sp-gold-600);
  white-space: nowrap;
}
.sp-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.sp-cols section {
  padding: 0.85rem 1.25rem 1rem;
  min-width: 0;
}
.sp-cols section + section {
  border-left: 1px solid var(--sp-line);
}
.sp-cols h3 {
  font-family: var(--sp-body) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600 !important;
  color: var(--sp-muted) !important;
  margin: 0 0 0.5rem;
}
.sp-cols ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sp-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.5rem;
  margin: 0 -0.5rem;
  border-radius: 0.6rem;
  transition: background-color 0.07s ease-out;
}
.sp-row:hover {
  background: var(--sp-paper);
}
.sp-logo {
  width: 34px;
  height: 34px;
  border-radius: 0.6rem;
  background: var(--sp-paper);
  border: 1px solid var(--sp-line);
  display: grid;
  place-items: center;
  flex: none;
}
.sp-logo svg {
  width: 18px;
  height: 18px;
}
.sp-what {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.sp-what b {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--sp-ink);
}
.sp-act {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex: none;
}
.sp-ask {
  font-size: 0.8rem;
  color: var(--sp-muted);
}
.sp-bad {
  color: var(--sp-danger);
}
.sp-empty {
  color: var(--sp-muted);
  font-size: 0.875rem;
  padding: 0.4rem 0;
}
.sp-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--sp-muted);
  background: var(--sp-paper-200);
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  white-space: nowrap;
}
.sp-pill.sp-on {
  color: var(--sp-ok);
  background: rgba(31, 122, 84, 0.1);
}
.sp-pill.sp-on::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--sp-ok);
}
@media (max-width: 900px) {
  .sp-cols {
    grid-template-columns: 1fr;
  }
  .sp-cols section + section {
    border-left: 0;
    border-top: 1px solid var(--sp-line);
  }
  .sp-person header {
    flex-wrap: wrap;
  }
  .sp-count {
    margin-left: 0;
    width: 100%;
  }
}