/* ============================================================================
   qb_status_banner.css — global "QuickBase temporarily unavailable" banner
   Additive · prefixed `.qbsb` · shown app-wide when the QuickBase platform is
   down/under maintenance, so users see a clear message instead of raw 500s.
   ============================================================================ */

.qbsb{
  position:fixed; top:14px; left:50%; transform:translateX(-50%) translateY(-22px);
  z-index:2147482000;            /* above content, below critical modals (2147483xxx) */
  width:min(680px, calc(100vw - 28px));
  display:flex; align-items:flex-start; gap:13px;
  padding:14px 16px; border-radius:15px;
  font-family:'Inter','Plus Jakarta Sans',system-ui,sans-serif;
  background:rgba(11,17,32,.97);
  border:1px solid rgba(245,158,11,.45);
  box-shadow:0 22px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(245,158,11,.08) inset;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  opacity:0; pointer-events:none; visibility:hidden;
  transition:opacity .26s ease, transform .26s cubic-bezier(.16,1,.3,1), visibility .26s;
}
.qbsb.show{ opacity:1; pointer-events:auto; visibility:visible; transform:translateX(-50%) translateY(0); }

.qbsb::before{
  content:''; position:absolute; inset:0; border-radius:15px; pointer-events:none;
  background:radial-gradient(ellipse at top left, rgba(245,158,11,.10), transparent 60%);
}

.qbsb-icon{
  flex-shrink:0; width:40px; height:40px; border-radius:11px;
  display:flex; align-items:center; justify-content:center; font-size:20px;
  background:linear-gradient(135deg, rgba(245,158,11,.22), rgba(248,113,113,.18));
  border:1px solid rgba(245,158,11,.4);
  animation:qbsb-pulse 2.4s ease-in-out infinite;
}
@keyframes qbsb-pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(245,158,11,.28);} 50%{ box-shadow:0 0 0 7px rgba(245,158,11,0);} }

.qbsb-body{ flex:1; min-width:0; }
.qbsb-title{ font-size:13.5px; font-weight:800; color:#fde68a; letter-spacing:-.01em; line-height:1.25; display:flex; align-items:center; gap:8px; }
.qbsb-live{ font-size:9px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#fbbf24;
  background:rgba(245,158,11,.14); border:1px solid rgba(245,158,11,.35); border-radius:999px; padding:2px 7px; }
.qbsb-msg{ font-size:12px; color:#cbd5e1; margin-top:5px; line-height:1.5; }
.qbsb-msg b{ color:#f1f5f9; }

.qbsb-actions{ display:flex; align-items:center; gap:8px; margin-top:11px; flex-wrap:wrap; }
.qbsb-btn{ font-family:inherit; font-size:11.5px; font-weight:700; border-radius:8px; padding:6px 12px; cursor:pointer;
  border:1px solid transparent; display:inline-flex; align-items:center; gap:6px; transition:all .13s; white-space:nowrap; line-height:1; text-decoration:none; }
.qbsb-btn-primary{ background:linear-gradient(135deg,#f59e0b,#f97316); color:#1a1206; border-color:rgba(245,158,11,.6); }
.qbsb-btn-primary:hover{ filter:brightness(1.07); transform:translateY(-1px); }
.qbsb-btn-ghost{ background:rgba(148,163,184,.08); color:#cbd5e1; border-color:#334155; }
.qbsb-btn-ghost:hover{ background:rgba(148,163,184,.16); color:#fff; border-color:#475569; }
.qbsb-btn[data-busy="1"]{ opacity:.6; pointer-events:none; }

.qbsb-close{ flex-shrink:0; width:28px; height:28px; border-radius:8px; border:1px solid #334155;
  background:rgba(148,163,184,.06); color:#94a3b8; cursor:pointer; font-size:13px; line-height:1;
  display:flex; align-items:center; justify-content:center; transition:all .12s; }
.qbsb-close:hover{ background:rgba(248,113,113,.16); border-color:rgba(248,113,113,.4); color:#fca5a5; }

.qbsb-checking{ font-size:10.5px; color:#64748b; margin-top:9px; display:inline-flex; align-items:center; gap:6px; }
.qbsb-dot{ width:7px; height:7px; border-radius:50%; background:#fbbf24; animation:qbsb-blink 1.1s ease-in-out infinite; }
@keyframes qbsb-blink{ 0%,100%{opacity:.3} 50%{opacity:1} }

/* ── token-rejected variant (orange) ── */
.qbsb-token{ border-color:rgba(249,115,22,.5); }
.qbsb-token .qbsb-title{ color:#fdba74; }
.qbsb-token .qbsb-icon{ background:linear-gradient(135deg,rgba(249,115,22,.22),rgba(234,88,12,.18)); border-color:rgba(249,115,22,.45); }

/* ── recovered variant (green, auto-dismiss) ── */
.qbsb-up{ border-color:rgba(16,185,129,.5); }
.qbsb-up .qbsb-title{ color:#6ee7b7; }
.qbsb-up .qbsb-icon{ background:linear-gradient(135deg,rgba(16,185,129,.22),rgba(5,150,105,.18)); border-color:rgba(16,185,129,.45); animation:none; }
.qbsb-up .qbsb-btn-primary{ background:linear-gradient(135deg,#10b981,#059669); color:#04140d; border-color:rgba(16,185,129,.6); }

@media (max-width:560px){
  .qbsb{ top:8px; padding:12px 13px; border-radius:13px; }
  .qbsb-icon{ width:34px; height:34px; font-size:17px; }
  .qbsb-title{ font-size:12.5px; }
  .qbsb-msg{ font-size:11.5px; }
}
@media print{ .qbsb{ display:none !important; } }