/* Administration > Side panel, and the Owner's marker on side-panel items hidden from employees. Tokens from app.css. */
.nav-restricted { margin-left: auto; display: inline-flex; align-items: center; color: var(--side-muted); flex: none; }
.nav-restricted + .nav-badge { margin-left: 0; }

.sp-intro a { font-weight: 500; }
.sp-default { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.sp-layout { position: relative; }
.sp-always > li { padding: var(--s3) var(--s5); align-items: flex-start; }
.sp-always > li > .icon { margin-top: 2px; color: var(--muted); flex: none; }
.sp-always-name { font-weight: 600; }
.sp-always .chip { flex: none; }
.sp-sections { display: flex; flex-direction: column; gap: var(--s4); }
.sp-section-head { flex-wrap: wrap; gap: var(--s3); }
.sp-head-tools { margin-left: auto; display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.sp-section-note { display: flex; align-items: center; gap: var(--s2); margin: 0; padding: var(--s2) var(--s5); background: var(--warn-soft); color: var(--warn); }
.sp-move-pair { display: inline-flex; gap: var(--s1); }
.sp-move { width: 32px; height: 32px; }
.sp-move:disabled { opacity: .35; cursor: default; }
.sp-item { position: relative; margin: 0; padding: var(--s4) var(--s5); padding-right: calc(var(--s5) + 76px); border: 0;
  border-top: 1px solid var(--border); min-width: 0; }
.sp-item.restricted { background: var(--surface-2); }
.sp-item-name { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; padding: 0; font-weight: 600; float: left; width: 100%; }
.sp-item-name + * { clear: both; }
.sp-item-name .icon { color: var(--muted); }
.sp-item-name .status { font-weight: 600; }
.sp-item-move { position: absolute; top: var(--s3); right: var(--s5); }
.sp-locked { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; margin: 0; }
.sp-access { margin: var(--s1) 0 var(--s2); padding-top: var(--s1); }
.sp-modes { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); }
.sp-modes .check input, .sp-role-grid .check input { flex: none; }
.sp-roles { margin-top: var(--s3); }
.sp-roles > summary { cursor: pointer; font-size: 13.5px; color: var(--accent-text); font-weight: 500; min-height: 24px; }
.sp-role-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--s2) var(--s4); margin: var(--s3) 0 var(--s2); }
.sp-role-grid .check { font-size: 13.5px; }
.sp-save .reason-line .btn { flex: none; }
.sp-aside { position: sticky; top: calc(var(--topbar-h) + var(--s4)); align-self: start; }
.sp-as .reason-line { margin: var(--s2) 0 var(--s4); }
.sp-as select { flex: 1 1 160px; min-width: 0; }

/* the preview: a small copy of the side panel, night in every theme like the real one */
.sp-preview-for { margin: 0 0 var(--s2); }
.sp-mini { background: var(--side-bg); color: var(--side-text); border-radius: var(--r-lg); padding: var(--s3); margin-bottom: var(--s3); }
.sp-mini ul { list-style: none; margin: 0 0 var(--s2); padding: 0; }
.sp-mini-label { font: 600 11px/1.2 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--side-muted); padding: var(--s2) var(--s2) var(--s1); }
.sp-mini-item, .sp-mini-foot { display: flex; align-items: center; gap: var(--s2); padding: 5px var(--s2); font-size: 13.5px; border-radius: 8px; }
.sp-mini-item .icon, .sp-mini-foot .icon { color: var(--side-muted); flex: none; }
.sp-mini-note { margin-left: auto; color: var(--lavender); }
.sp-mini-foot { border-top: 1px solid var(--side-line); border-radius: 0; font-size: 12.5px; color: var(--side-muted); }
.sp-mini-sep { flex: 1; }
.sp-mini-empty { margin: var(--s2); font-size: 13px; color: var(--side-muted); }
.sp-preview-box.loading .sp-mini { opacity: .6; transition: opacity .15s; }

@media (max-width: 1080px) { .sp-aside { position: static; } }
@media (max-width: 640px) {
  .sp-item { padding: var(--s4); padding-right: calc(var(--s4) + 72px); }
  .sp-item-move { right: var(--s3); }
  .sp-modes { flex-direction: column; }
  .sp-always > li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s3); row-gap: var(--s2); padding: var(--s3) var(--s4); }
  .sp-always > li > .chip { grid-column: 2; justify-self: start; }
  .sp-section-note { padding: var(--s2) var(--s4); }
}