/* Sidebar de navegació (2026-09-08). Tokens Plexum (--px-*) del layout.
   Tres talls: rail 280 (≥1280) · col·lapsat 64 (1024–1279, body.sb-collapsed)
   · drawer 300 amb overlay (<1024, .sb.is-open). */
.sb {
  position: fixed; top: 0; left: 0; bottom: 0; width: 280px; z-index: 40;
  display: flex; flex-direction: column;
  background: rgb(var(--px-surface-rgb)); color: rgb(var(--px-text-rgb));
  border-right: 1px solid rgb(var(--px-ring-rgb));
  font-family: 'Geist', 'Inter', system-ui, sans-serif;
  transform: translateX(-100%); transition: transform .18s ease, width .18s ease;
}
@media (min-width: 1024px) { .sb { transform: none; } }
@media (max-width: 1023.98px) {
  .sb { width: min(300px, 86vw); box-shadow: 24px 0 48px -20px rgba(0,0,0,.45); }
  .sb.is-open { transform: none; }
  .sb-overlay { position: fixed; inset: 0; z-index: 39; background: rgba(0,0,16,.5); }
  .sb-overlay[hidden] { display: none; }
  body.sb-open { overflow: hidden; }
  .sb-collapse { display: none !important; }
}
@media (min-width: 1024px) {
  .sb-overlay { display: none !important; }
  .sb-close { display: none !important; }
}
@media (min-width: 1280px) { .sb-collapse { display: none !important; } }

/* ── Capçalera ── */
.sb-top { display: flex; align-items: center; gap: 8px; padding: 14px 14px 10px; }
.sb-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-decoration: none; min-width: 0; flex: 1; }
.sb-brand-logo { height: 30px; width: auto; }
.sb-brand-by { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: rgb(var(--px-muted-rgb)); }
.sb-brand-by b { color: rgb(var(--px-accent-rgb)); font-weight: 700; letter-spacing: -.01em; text-transform: none; font-size: 12px; }
.sb-collapse, .sb-close {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border-radius: 8px; border: 1px solid transparent; background: transparent; color: rgb(var(--px-muted-rgb)); cursor: pointer;
}
.sb-collapse:hover, .sb-close:hover { background: rgb(var(--px-hover-overlay, 255 255 255) / .06); color: rgb(var(--px-text-rgb)); }

/* ── Cercador (fix, no fa scroll amb la llista) ── */
.sb-search { padding: 4px 12px 10px; border-bottom: 1px solid rgb(var(--px-ring-rgb)); position: relative; }
.sb-search-box {
  display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px;
  border: 1px solid rgb(var(--px-ring-rgb)); border-radius: 10px; background: rgb(var(--px-input-bg-rgb, var(--px-card-rgb)));
  color: rgb(var(--px-muted-rgb));
}
.sb-search-box:focus-within { border-color: rgb(var(--px-accent-rgb)); box-shadow: 0 0 0 3px rgb(var(--px-accent-rgb) / .18); }
.sb-search-box input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: rgb(var(--px-text-rgb)); font: inherit; font-size: 13.5px; }
.sb-search-box input::placeholder { color: rgb(var(--px-muted-rgb)); }
.sb-search-box input::-webkit-search-cancel-button { -webkit-appearance: none; }
.sb-kbd { font-size: 10px; border: 1px solid rgb(var(--px-ring-rgb)); border-radius: 4px; padding: 1px 5px; color: rgb(var(--px-muted-rgb)); font-family: inherit; }
.sb-results { list-style: none; margin: 8px 0 0; padding: 0; max-height: 60vh; overflow-y: auto; }
.sb-results[hidden] { display: none; }
.sb-result { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: rgb(var(--px-text-rgb)); font-size: 13.5px; }
.sb-result:hover, .sb-result.is-sel { background: rgb(var(--px-accent-rgb) / .12); color: rgb(var(--px-accent-rgb)); }
.sb-result mark { background: transparent; color: inherit; font-weight: 700; text-decoration: underline; text-decoration-color: rgb(var(--px-accent-rgb)); }
.sb-result-group { font-size: 11px; color: rgb(var(--px-muted-rgb)); white-space: nowrap; }
.sb-noresult { padding: 10px; font-size: 13px; color: rgb(var(--px-muted-rgb)); }

/* ── Llista ── */
.sb-scroll { flex: 1; overflow-y: auto; padding: 10px 10px 12px; scrollbar-width: thin; }
.sb-scroll[hidden] { display: none; }
.sb-section { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.sb-eyebrow { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: rgb(var(--px-muted-rgb)); font-weight: 600; padding: 10px 12px 4px; }

.sb-item, .sb-group-h {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px;
  font-size: 14px; font-weight: 500; color: rgb(var(--px-muted-rgb)); text-decoration: none;
  transition: background-color .15s, color .15s; cursor: pointer; position: relative; min-height: 38px;
}
.sb-item:hover, .sb-group-h:hover { background: rgb(var(--px-hover-overlay, 255 255 255) / .06); color: rgb(var(--px-text-rgb)); }
.sb-item.is-active {
  background: rgb(var(--px-accent-rgb) / .10); color: rgb(var(--px-accent2-rgb, var(--px-accent-rgb))); font-weight: 600;
  box-shadow: inset 3px 0 0 rgb(var(--px-accent-rgb));
}
.sb-item:focus-visible, .sb-group-h:focus-visible, .sb-util:focus-visible, .sb-kiosk:focus-visible {
  outline: 2px solid rgb(var(--px-accent-rgb)); outline-offset: 2px;
}
.sb-item-ic { display: inline-flex; width: 18px; justify-content: center; flex: 0 0 18px; }
.sb-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-item.is-child { padding-left: 40px; font-size: 13.5px; min-height: 34px; }
.sb-children { display: flex; flex-direction: column; gap: 1px; padding: 2px 0 6px; }

/* Grups: <details> nadiu, accessible amb teclat */
.sb-group, .sb-pinned-group { border-radius: 10px; }
.sb-group > summary, .sb-pinned-group > summary { list-style: none; }
.sb-group > summary::-webkit-details-marker, .sb-pinned-group > summary::-webkit-details-marker { display: none; }
.sb-group-h { color: rgb(var(--px-text-rgb)); font-weight: 600; }
.sb-chev { display: inline-flex; color: rgb(var(--px-muted-rgb)); transition: transform .18s; margin-left: auto; }
details[open] > summary .sb-chev { transform: rotate(180deg); }
.sb-summary { padding: 0 8px 0 0; }
.sb-summary-link { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; padding: 8px 0 8px 12px; color: inherit; text-decoration: none; }
.sb-summary.is-active .sb-summary-link { color: rgb(var(--px-accent2-rgb, var(--px-accent-rgb))); }

/* Badges: només feina pendent; ocults a zero (el template no els pinta) */
.sb-badge {
  margin-left: auto; font-size: 10.5px; font-weight: 700; line-height: 1; padding: 3px 6px; border-radius: 999px;
  background: rgb(var(--px-warning-rgb) / .18); color: rgb(var(--px-warning-rgb)); font-variant-numeric: tabular-nums;
}
.sb-item-label + .sb-badge, .sb-badge + .sb-badge { margin-left: 6px; }
.sb-badge.is-crit { background: rgb(var(--px-error-rgb) / .18); color: rgb(var(--px-error-rgb)); }
.sb-badge.is-info { background: rgb(var(--px-info-rgb) / .18); color: rgb(var(--px-info-rgb)); }
.sb-badge.is-dept { background: rgb(var(--px-accent-rgb) / .14); color: rgb(var(--px-accent-rgb)); }
.sb-badge.hidden { display: none; }
.sb-dot { width: 7px; height: 7px; border-radius: 99px; background: rgb(var(--px-warning-rgb)); margin-left: auto; flex: 0 0 7px; }
details[open] > summary .sb-dot { display: none; }

/* Kiosks: llançador */
.sb-kiosk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 0 2px; }
.sb-kiosk {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; font-size: 12.5px; font-weight: 500;
  color: rgb(var(--px-muted-rgb)); border: 1px solid rgb(var(--px-ring-rgb)); text-decoration: none; min-height: 36px;
}
.sb-kiosk:hover { color: rgb(var(--px-text-rgb)); border-color: rgb(var(--px-accent-rgb) / .5); }
.sb-kiosk span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Peu */
.sb-foot { border-top: 1px solid rgb(var(--px-ring-rgb)); padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 2px; }
.sb-utils { display: flex; flex-direction: column; gap: 1px; }
.sb-util {
  display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-radius: 8px; font-size: 13px; font-weight: 500;
  color: rgb(var(--px-muted-rgb)); text-decoration: none; background: transparent; border: 0; cursor: pointer; text-align: left; font-family: inherit; width: 100%;
}
.sb-util:hover { background: rgb(var(--px-hover-overlay, 255 255 255) / .06); color: rgb(var(--px-text-rgb)); }
.sb-util.is-active { color: rgb(var(--px-accent-rgb)); }
.sb-user { display: flex; align-items: center; gap: 10px; padding: 8px 6px 4px 8px; }
.sb-user-avatar { width: 30px; height: 30px; border-radius: 99px; background: rgb(var(--px-accent-rgb)); color: rgb(var(--px-accent-ink-rgb, 0 0 16)); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex: 0 0 30px; }
.sb-user-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.2; }
.sb-user-name { font-size: 12.5px; font-weight: 600; color: rgb(var(--px-text-rgb)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-user-mail { font-size: 10.5px; color: rgb(var(--px-muted-rgb)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-logout { display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; border-radius: 8px; color: rgb(var(--px-error-rgb)); }
.sb-logout:hover { background: rgb(var(--px-error-rgb) / .12); }
.sb-deploy { display: block; padding: 0 8px 2px; font-size: 10px; color: rgb(var(--px-muted-rgb)); opacity: .7; }
.sb-deploy code { font-size: 10px; }

/* ── Col·lapsat (1024–1279): només icones, tooltip amb el títol ── */
.sb.is-collapsed { width: 64px; }
.sb.is-collapsed .sb-brand-by, .sb.is-collapsed .sb-search, .sb.is-collapsed .sb-item-label, .sb.is-collapsed .sb-chev,
.sb.is-collapsed .sb-children, .sb.is-collapsed .sb-eyebrow, .sb.is-collapsed .sb-util-label, .sb.is-collapsed .sb-user-txt,
.sb.is-collapsed .sb-deploy, .sb.is-collapsed .sb-badge, .sb.is-collapsed .sb-kiosk span { display: none; }
.sb.is-collapsed .sb-top { flex-direction: column; gap: 6px; padding: 12px 8px 8px; }
.sb.is-collapsed .sb-brand-logo { height: 24px; }
.sb.is-collapsed .sb-item, .sb.is-collapsed .sb-group-h, .sb.is-collapsed .sb-util, .sb.is-collapsed .sb-kiosk { justify-content: center; padding: 9px 0; }
.sb.is-collapsed .sb-summary-link { padding: 9px 0; justify-content: center; }
.sb.is-collapsed .sb-kiosk-grid { grid-template-columns: 1fr; }
.sb.is-collapsed .sb-dot { position: absolute; top: 6px; right: 10px; margin: 0; }
.sb.is-collapsed .sb-item:hover::after, .sb.is-collapsed .sb-group-h:hover::after, .sb.is-collapsed .sb-util:hover::after {
  content: attr(data-tip); position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%);
  background: rgb(var(--px-elevated2-rgb, var(--px-card-rgb))); color: rgb(var(--px-text-rgb)); border: 1px solid rgb(var(--px-ring-rgb));
  border-radius: 6px; padding: 4px 8px; font-size: 12px; white-space: nowrap; z-index: 60; pointer-events: none;
}

/* ── Freqüents i estrelles ── */
.sb-favs[hidden] { display: none; }
.sb-item.is-fav .sb-item-ic { color: rgb(var(--px-warm-rgb)); }
.sb-star {
  display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 6px;
  border: 0; background: transparent; color: rgb(var(--px-muted-rgb)); cursor: pointer; opacity: 0; transition: opacity .12s, color .12s;
  margin-left: auto; flex: 0 0 24px;
}
.sb-item:hover .sb-star, .sb-star:focus-visible, .sb-star.is-on { opacity: 1; }
.sb-star.is-on { color: rgb(var(--px-warm-rgb)); }
.sb-star.is-on svg { fill: rgb(var(--px-warm-rgb)); }
.sb-star:hover { color: rgb(var(--px-warm-rgb)); background: rgb(var(--px-warm-rgb) / .12); }
.sb-item .sb-star + .sb-badge, .sb-item .sb-star ~ .sb-badge { margin-left: 4px; }
.sb.is-collapsed .sb-star, .sb.is-collapsed .sb-favs { display: none; }
/* Tema: icona SVG segons html.theme-dark (el text el posa el JS compartit) */
.sb-theme-ic { display: inline-flex; width: 18px; }
.sb-theme-moon { display: none; }
html.theme-dark .sb-theme-sun { display: none; }
html.theme-dark .sb-theme-moon { display: inline-flex; }

/* ── Colors per departament (Àlex 2026-09-09) ──
   Triplets RGB; en tema fosc pugen de lluminositat per llegir-se sobre #0a0a14.
   Es pinten: icona del grup, punt de pendents, ítem actiu i barra esquerra. */
.sb {
  --sbc-teal: 13 148 136; --sbc-amber: 217 119 6; --sbc-green: 21 128 61; --sbc-gold: 161 98 7;
  --sbc-blue: 37 99 235; --sbc-violet: 109 40 217; --sbc-rose: 190 24 93; --sbc-slate: 91 100 112;
}
html.theme-dark .sb {
  --sbc-teal: 65 217 203; --sbc-amber: 251 191 36; --sbc-green: 52 211 153; --sbc-gold: 212 179 112;
  --sbc-blue: 96 165 250; --sbc-violet: 167 139 250; --sbc-rose: 244 114 182; --sbc-slate: 154 160 171;
}
[data-color="teal"]   { --sbc: var(--sbc-teal); }
[data-color="amber"]  { --sbc: var(--sbc-amber); }
[data-color="green"]  { --sbc: var(--sbc-green); }
[data-color="gold"]   { --sbc: var(--sbc-gold); }
[data-color="blue"]   { --sbc: var(--sbc-blue); }
[data-color="violet"] { --sbc: var(--sbc-violet); }
[data-color="rose"]   { --sbc: var(--sbc-rose); }
[data-color="slate"]  { --sbc: var(--sbc-slate); }

.sb-group[data-color] .sb-group-h .sb-item-ic { color: rgb(var(--sbc)); }
.sb-group[data-color] .sb-group-h::before {
  content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 3px;
  background: rgb(var(--sbc)); opacity: .55;
}
.sb-group[data-color][open] .sb-group-h::before { opacity: 1; }
.sb-group[data-color] .sb-dot { background: rgb(var(--sbc)); }
.sb-group[data-color] .sb-children { border-left: 2px solid rgb(var(--sbc) / .25); margin-left: 20px; }
.sb-group[data-color] .sb-item.is-child { padding-left: 18px; }
.sb-group[data-color] .sb-item.is-child.is-active {
  background: rgb(var(--sbc) / .12); color: rgb(var(--sbc)); box-shadow: inset 3px 0 0 rgb(var(--sbc));
}
.sb-group[data-color] .sb-item.is-child:hover { color: rgb(var(--sbc)); }
.sb-group[data-color] .sb-badge-dept { background: rgb(var(--sbc) / .16); color: rgb(var(--sbc)); }
.sb.is-collapsed .sb-group[data-color] .sb-group-h::before { top: 6px; bottom: 6px; }
.sb-result-dot { display: inline-block; width: 7px; height: 7px; border-radius: 99px; background: rgb(var(--sbc, var(--px-muted-rgb))); margin-right: 6px; vertical-align: middle; }

/* ── Icones emoji com l'admin B2B (Àlex 2026-09-09: «es veuen més clares») ── */
.sb-emoji { font-size: 16px; line-height: 1; width: 20px; text-align: center; display: inline-block; font-style: normal; }
.sb-item-ic.sb-emoji { flex: 0 0 20px; width: 20px; }
.sb-group[data-color] .sb-group-h .sb-item-ic { color: inherit; }
.sb-item.is-fav .sb-item-ic { color: inherit; }
.sb.is-collapsed .sb-emoji { font-size: 18px; }