/* QRNode brand palette: black + lime green */
:root {
  --qr-bg:#0f1113;
  --qr-panel:#1a1d21;
  --qr-accent:#8CC63F;        /* brand lime green */
  --qr-accent-hover:#7ab32f;
  --qr-on-accent:#10240a;     /* dark text on green */
}
body { background: var(--qr-bg); }
.navbar-brand .logo { width: 26px; height: 26px; vertical-align: -6px; }
.navbar-brand { font-weight: 800; letter-spacing: .02em; }
.sidebar .nav-link { color: #adb5bd; border-radius: .5rem; }
.sidebar .nav-link.active { background: var(--qr-panel); color: #fff; box-shadow: inset 3px 0 0 var(--qr-accent); }
.sidebar .nav-link:hover { color: #fff; }
.card { background: var(--qr-panel); border: 1px solid rgba(255,255,255,.06); }
.table { --bs-table-bg: transparent; color: #e9ecef; }
code.url { color: var(--qr-accent); word-break: break-all; }
.qr-tile img, .qr-tile svg { width: 180px; height: 180px; background:#fff; padding:8px; border-radius:8px; }
.cap-pill { font-size:.72rem; }

/* Notification bell + inbox */
#notif-bell { position: relative; }
.notif-badge { position: absolute; top: -6px; right: -6px; font-size: .65rem; padding: .25em .45em; line-height: 1; }
.notif-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--qr-accent); flex: none; }

/* Recolour Bootstrap accents (warning = primary action) to brand green */
.btn-warning {
  --bs-btn-bg: var(--qr-accent); --bs-btn-border-color: var(--qr-accent);
  --bs-btn-hover-bg: var(--qr-accent-hover); --bs-btn-hover-border-color: var(--qr-accent-hover);
  --bs-btn-active-bg: var(--qr-accent-hover); --bs-btn-active-border-color: var(--qr-accent-hover);
  --bs-btn-color: var(--qr-on-accent); --bs-btn-hover-color: var(--qr-on-accent); --bs-btn-active-color: var(--qr-on-accent);
}
.btn-outline-warning {
  --bs-btn-color: var(--qr-accent); --bs-btn-border-color: var(--qr-accent);
  --bs-btn-hover-bg: var(--qr-accent); --bs-btn-hover-border-color: var(--qr-accent); --bs-btn-hover-color: var(--qr-on-accent);
  --bs-btn-active-bg: var(--qr-accent); --bs-btn-active-border-color: var(--qr-accent);
}
.text-warning { color: var(--qr-accent) !important; }
.text-bg-info { background-color: var(--qr-accent) !important; color: var(--qr-on-accent) !important; }
a { color: var(--qr-accent); }
.cust-logo { height: 28px; max-width: 160px; object-fit: contain; margin-left: 12px; vertical-align: middle; }

/* Print: only the active QR sheet */
@media print {
  body * { visibility: hidden; }
  #print-area, #print-area * { visibility: visible; }
  #print-area { position: absolute; inset: 0; background:#fff; color:#000; padding:24px; }
  .qr-print-card { page-break-inside: avoid; border:1px solid #ccc; border-radius:8px; padding:16px; text-align:center; }
  .qr-print-card img, .qr-print-card svg { width: 240px; height: 240px; }
}

/* Grouped sidebar (navigation rework) */
.sidebar .nav-section { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: #6c757d; padding: .9rem .75rem .25rem; list-style: none; }
.sidebar .nav-section:first-child { padding-top: .25rem; }
.sidebar .nav-hint { list-style: none; padding: 0 .75rem; line-height: 1.35; }

/* Top-bar company picker ("Working on") */
.ctx-box { min-width: 0; }
.ctx-box label { white-space: nowrap; }
.ctx-pick { max-width: 280px; min-width: 180px; border-color: var(--qr-accent); }
.ctx-chip { font-weight: 600; font-size: .8rem; }
@media (max-width: 576px) { .ctx-box label { display: none; } .ctx-pick { min-width: 120px; max-width: 160px; } }

/* Settings hub */
.set-card { color: inherit; transition: border-color .12s ease; }
.set-card:hover { border-color: var(--qr-accent); }

/* Phone: the grouped menu collapses behind a toggle instead of pushing the page down */
@media (max-width: 767.98px) {
  .sidebar #nav-menu { display: none; }
  .sidebar.open #nav-menu { display: flex; }
}