/* Miniatures of administration-overview.css, scoped to the two demonstrations. */
:where(.clocher-demo, .song-library-demo) {
  --admin-demo-bg: #e9f7e9;
  --admin-demo-surface: #fff;
  --admin-demo-surface-2: #f3f9f0;
  --admin-demo-text: #111318;
  --admin-demo-muted: #718077;
  --admin-demo-border: #d6e2d5;
  --admin-demo-field-border: #c8ced8;
  --admin-demo-accent: #183d2c;
  --admin-demo-accent-soft: #d2f7d2;
  --admin-demo-card-shadow: #45664e;
  color: var(--admin-demo-text);
  font-family: var(--font-body);
}
.admin-demo-sidebar {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  padding: 18px 6px 14px;
  border-right: 1px solid var(--admin-demo-border);
  background: var(--admin-demo-surface);
}
.admin-demo-logo { width: 29px; height: 29px; object-fit: contain; border-radius: 50%; }
.admin-demo-nav { display: grid; gap: 11px; justify-items: center; width: 100%; margin-top: 29px; }
.admin-demo-nav > span { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid transparent; border-radius: 5px; }
.admin-demo-nav > .is-active { border-color: #90af97; background: var(--admin-demo-accent-soft); }
.admin-demo-nav img { width: 18px; height: 18px; object-fit: contain; border-radius: 3px; background: #ddfbef; box-shadow: 0 0 0 3px #ddfbef; }
.admin-demo-nav .is-active img { background: #2f4858; box-shadow: 0 0 0 3px #2f4858; }
.admin-demo-sidebar-bottom { display: grid; place-items: center; width: 24px; height: 24px; margin-top: auto; }
.admin-demo-sidebar-bottom img { width: 13px; height: 13px; }
.admin-demo-kicker { display: block; margin-bottom: 5px; color: var(--admin-demo-muted); font-size: 7px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; }
.admin-demo-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.admin-demo-action { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 25px; padding: 5px 7px; border: 1px solid var(--admin-demo-field-border); border-radius: 4px; color: var(--admin-demo-text); background: var(--admin-demo-surface); font: 400 8px/1.4 var(--font-body); white-space: nowrap; }
.admin-demo-action img { width: 11px; height: 11px; }
.admin-demo-action--primary { color: #fff; border-color: var(--admin-demo-accent); background: var(--admin-demo-accent); }
.admin-demo-action--primary img { filter: brightness(0) invert(1); }
.admin-demo-action--publish { color: #526559; border-color: #79ad8b; background: var(--admin-demo-accent-soft); }
.admin-demo-label { display: flex; align-items: center; gap: 5px; margin-bottom: 6px; font-size: 8px; font-weight: 400; line-height: 1.5; }
.admin-demo-label i { display: inline-grid; place-items: center; width: 10px; height: 10px; color: #8995a6; border: 1px solid #dfe3ea; border-radius: 50%; font-size: 6px; font-style: normal; }