/* ============================================================
   STICKERBOOK ADMIN - ALERTS (admin-alerts.js)
   ============================================================ */
.al-card { background: var(--sb-surface); border: 1px solid var(--sb-border); border-radius: 12px; padding: 14px; margin-bottom: 14px; max-width: 760px; }
.al-ct { font-size: 13px; font-weight: 700; color: var(--sb-text); margin-bottom: 10px; }
.al-dev { display: flex; align-items: center; gap: 10px; }
.al-dot { width: 10px; height: 10px; border-radius: 50%; background: #A1A1AA; flex-shrink: 0; }
.al-dot.on { background: #0F766E; }
.al-grow { flex: 1; min-width: 0; }
.al-grow b { display: block; font-size: 13px; color: var(--sb-text); }
.al-grow b i { font-weight: 500; color: var(--sb-muted); font-style: normal; }
.al-grow span { font-size: 11px; color: var(--sb-muted); }
.al-dev .btn { flex-shrink: 0; }
.btn.rp-b.al-ghost { border-color: transparent; background: none; color: var(--sb-muted); }
.btn.rp-b.al-ghost:hover { background: var(--sb-surface-2); }
.al-hint { font-size: 12px; color: var(--sb-text-2); background: var(--sb-amber-soft); border-radius: 9px; padding: 9px 11px; margin-top: 10px; line-height: 1.5; }
.al-devs { margin-top: 12px; border-top: 1px solid var(--sb-border); }
.al-devs .al-dev { padding: 10px 0; border-bottom: 1px solid var(--sb-border); }
.al-devs .al-dev:last-child { border-bottom: none; padding-bottom: 0; }
.al-table { width: 100%; border-collapse: collapse; }
.al-table th { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sb-muted); text-align: left; padding: 6px 0; border-bottom: 1px solid var(--sb-border); }
.al-table td { padding: 11px 0; border-bottom: 1px solid var(--sb-border); font-size: 13px; color: var(--sb-text); vertical-align: middle; }
.al-table tr:last-child td { border-bottom: none; }
.al-table td small { display: block; font-size: 11px; color: var(--sb-muted); }
.al-table .al-c { text-align: center; width: 72px; }
.al-quiet { font-size: 10px; font-weight: 600; color: var(--sb-muted); background: var(--sb-surface-2); border-radius: 999px; padding: 1px 7px; margin-left: 6px; }
.al-tg { width: 38px; height: 22px; border-radius: 11px; background: #D4D4D8; position: relative; display: inline-block; cursor: pointer; border: none; padding: 0; vertical-align: middle; }
.al-tg::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left 0.15s; }
.al-tg.on { background: var(--sb-accent); }
.al-tg.on::after { left: 19px; }
.al-foot { font-size: 11px; color: var(--sb-muted); margin-top: 10px; }
@media (max-width: 768px) {
  .al-card { padding: 12px; }
  .al-dev { flex-wrap: wrap; }
  .al-dev > .btn { flex: 1 1 0; padding: 10px 12px; font-size: 13px; }
  /* This device: the words get their own line, the buttons share the line under them */
  .al-card > .al-dev > .al-grow { flex: 1 1 calc(100% - 20px); }
  .al-devs .al-dev > .btn { flex: 0 0 auto; }
  .al-table .al-c { width: 56px; }
}