/* ============================================================
   STICKERBOOK ADMIN - DASHBOARD (admin-dashboard.js)
   Builds on the shared light styles in admin-theme.css (rp-*).
   ============================================================ */

.db-wrap { max-width: 1080px; }
.db-top { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin: -44px 0 18px; min-height: 26px; font-size: 11px; color: var(--sb-muted); }
.db-refresh { border: none; background: none; padding: 0; font-family: inherit; font-size: 11px; font-weight: 600; color: var(--sb-accent); cursor: pointer; }
.db-lbl { font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sb-muted); margin: 22px 0 8px; }
.db-lbl-row { display: flex; align-items: center; gap: 10px; }
.db-ranges { margin-left: auto; letter-spacing: 0; text-transform: none; }
.db-load { padding: 24px 0; }
.db-chev { width: 14px; height: 14px; color: #A1A1AA; margin-left: auto; flex-shrink: 0; }
.db-error { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; background: var(--sb-red-soft); border: 1px solid rgba(220,38,38,0.25); border-radius: 12px; padding: 10px 14px; font-size: 12px; color: var(--sb-text-2); margin-bottom: 12px; }
.db-error b { color: var(--sb-red); }

/* Shared card look (cards are buttons, so reset the button styles) */
.db-em, .db-card, .db-pc, .db-tot { box-sizing: border-box; font-family: inherit; text-align: left; color: var(--sb-text); cursor: pointer; }
.db-em:hover, .db-card:hover, .db-pc:hover, .db-tot:hover { background: #FAFAFB; }

/* Emergency strip */
.db-em { display: flex; align-items: center; gap: 10px; width: 100%; background: var(--sb-surface); border: 1px solid var(--sb-border); border-radius: 12px; padding: 11px 14px; font-size: 13px; color: var(--sb-text-2); }
.db-em small { color: var(--sb-muted); font-size: 11px; }
.db-grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.db-inline { display: block; }
.db-dot { width: 8px; height: 8px; border-radius: 50%; background: #14B8A6; box-shadow: 0 0 0 4px rgba(20,184,166,0.15); flex-shrink: 0; }
.db-em-live { background: #FFF7F7; border-color: rgba(220,38,38,0.4); box-shadow: inset 3px 0 0 var(--sb-red); color: var(--sb-text); }
.db-em-live:hover { background: #FFF1F1; }
.db-em-live > .sb-ico:first-child { color: var(--sb-red); }
.db-em-line b { color: #B91C1C; font-weight: 600; }
.db-em-line small { display: block; margin-top: 1px; }

/* Needs you */
.db-att { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.db-att-quiet { grid-template-columns: 2fr 1fr; }
.db-att-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (min-width: 769px) and (max-width: 1180px) { .db-att-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.db-card { display: flex; flex-direction: column; gap: 4px; width: 100%; background: var(--sb-surface); border: 1px solid var(--sb-border); border-radius: 12px; padding: 14px 16px; }
.db-card-top { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--sb-text-2); }
.db-card-top .sb-ico:not(.db-chev) { width: 16px; height: 16px; }
.db-big { font-size: 26px; font-weight: 700; line-height: 1.15; }
.db-zero { color: var(--sb-muted); }
.db-sub { font-size: 12px; color: var(--sb-muted); line-height: 1.5; }
.db-sub .rp-sev { font-size: 11px; }
.db-warn { color: var(--sb-amber); font-weight: 600; }
.db-hot { border-color: rgba(217,119,6,0.4); box-shadow: inset 3px 0 0 #D97706; }
.db-hot .db-big { color: var(--sb-amber); }
.db-urgent { border-color: rgba(220,38,38,0.4); box-shadow: inset 3px 0 0 var(--sb-red); }
.db-urgent .db-big { color: #B91C1C; }
.db-clear { display: flex; align-items: center; gap: 12px; background: var(--sb-surface); border: 1px solid var(--sb-border); border-radius: 12px; padding: 14px 16px; font-size: 13px; color: var(--sb-text-2); }
.db-clear b { display: block; color: var(--sb-text); font-weight: 600; }
.db-clear span span { font-size: 12px; color: var(--sb-muted); }
.db-ok { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(15,118,110,0.1); color: #0F766E; flex-shrink: 0; }
.db-ok .sb-ico { width: 16px; height: 16px; stroke-width: 2.6; }

/* Find a user */
.db-srch { position: relative; max-width: 640px; }
.db-sbox { max-width: none; }
.db-sbox .sb-ico { width: 16px; height: 16px; color: var(--sb-muted); }
.db-res { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20; display: none; background: var(--sb-surface); border: 1px solid var(--sb-border); border-radius: 12px; box-shadow: 0 10px 30px rgba(24,24,27,0.1); overflow: hidden; }
.db-res.on { display: block; }
.db-ri { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-top: 1px solid var(--sb-border); cursor: pointer; }
.db-ri:first-child { border-top: none; }
.db-ri:hover { background: var(--sb-surface-2); }
.db-av { width: 28px; height: 28px; font-size: 11px; }
.db-ri-nm { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--sb-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-ri-nm > span { display: block; font-size: 11px; font-weight: 400; color: var(--sb-muted); overflow: hidden; text-overflow: ellipsis; }
.db-ri-nm em { font-style: normal; color: var(--sb-accent); font-weight: 600; }
.db-ri-none { cursor: default; font-size: 12px; color: var(--sb-muted); }
.db-ri-none:hover { background: none; }
.db-ri-all { padding: 9px 12px; border-top: 1px solid var(--sb-border); background: #FAFAFB; font-size: 11px; font-weight: 600; color: var(--sb-accent); cursor: pointer; }

/* Pulse */
.db-pulse { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; transition: opacity 0.15s; }
.db-dim { opacity: 0.5; }
.db-pc { display: flex; flex-direction: column; gap: 2px; width: 100%; background: var(--sb-surface); border: 1px solid var(--sb-border); border-radius: 12px; padding: 13px 15px; }
.db-pc .db-card-top { font-size: 11px; color: var(--sb-muted); }
.db-pc b { font-size: 24px; font-weight: 700; line-height: 1.2; }
.db-flat { cursor: default; }
.db-flat:hover { background: var(--sb-surface); }
.db-delta { font-size: 11px; font-weight: 600; }
.db-delta span { font-weight: 400; color: var(--sb-muted); }
.db-up { color: #0F766E; }
.db-dn { color: var(--sb-red); }
.db-eq { color: var(--sb-muted); }

/* Totals */
.db-tots { display: flex; background: var(--sb-surface); border: 1px solid var(--sb-border); border-radius: 12px; overflow: hidden; }
.db-tot { flex: 1; min-width: 0; padding: 11px 14px; background: none; border: none; border-left: 1px solid var(--sb-border); }
.db-tot:first-child { border-left: none; }
.db-tot span { display: block; font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sb-muted); }
.db-tot b { font-size: 16px; font-weight: 700; }

/* Desktop with a person panel docked: three across gets tight */
@media (min-width: 769px) and (max-width: 1280px) {
  body.us-docked .db-att, body.us-docked .db-pulse { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.us-docked .db-att-quiet { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .db-top { margin: -38px 0 14px; }
  .db-att, .db-att-quiet { grid-template-columns: 1fr; }
  .db-pulse { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .db-pc b { font-size: 21px; }
  .db-tots { display: grid; grid-template-columns: 1fr 1fr; }
  .db-tot { border-left: none; border-top: 1px solid var(--sb-border); }
  .db-tot:nth-child(-n+2) { border-top: none; }
  .db-tot:nth-child(even) { border-left: 1px solid var(--sb-border); }
  .db-tot:last-child { grid-column: 1 / -1; }
}