/* BPMS Increment 34 - Offline Mode Foundation */
.bpms-sync-pill{
  position:fixed;
  left:14px;
  bottom:86px;
  z-index:6800;
  border:1px solid #dfe5ef;
  background:#fff;
  color:#102a66;
  border-radius:999px;
  padding:10px 12px;
  display:flex;
  align-items:center;
  gap:7px;
  font-size:12px;
  font-weight:900;
  box-shadow:0 10px 28px rgba(15,23,42,.14);
}
.bpms-sync-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#16a34a;
}
.bpms-sync-pill.offline .bpms-sync-dot{background:#dc2626}
.bpms-sync-pill.syncing .bpms-sync-dot{background:#f2a51a}
.bpms-sync-pill.pending .bpms-sync-dot{background:#f59e0b}
.bpms-sync-backdrop{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.35);
  z-index:6798;
  display:none;
}
.bpms-sync-backdrop.open{display:block}
.bpms-sync-panel{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:6799;
  background:#f6f8fb;
  border-radius:24px 24px 0 0;
  transform:translateY(110%);
  transition:.22s ease;
  box-shadow:0 -16px 40px rgba(15,23,42,.22);
  max-height:72vh;
  overflow:auto;
}
.bpms-sync-panel.open{transform:translateY(0)}
.bpms-sync-head{
  background:#102a66;
  color:#fff;
  padding:17px;
  border-radius:24px 24px 0 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.bpms-sync-head h2{
  margin:0;
  font-size:17px;
}
.bpms-sync-head button{
  background:rgba(255,255,255,.14);
  color:#fff;
  border:1px solid rgba(255,255,255,.25);
  border-radius:12px;
  padding:8px 11px;
  font-weight:900;
}
.bpms-sync-body{
  padding:14px;
}
.bpms-sync-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-bottom:12px;
}
.bpms-sync-card{
  background:#fff;
  border:1px solid #dfe5ef;
  border-radius:17px;
  padding:13px;
  box-shadow:0 8px 20px rgba(15,23,42,.05);
}
.bpms-sync-card small{
  color:#64748b;
  font-size:11px;
}
.bpms-sync-card b{
  display:block;
  color:#102a66;
  font-size:20px;
  margin-top:4px;
}
.bpms-sync-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
  margin:12px 0;
}
.bpms-sync-actions button{
  border:1px solid #dfe5ef;
  background:#fff;
  color:#102a66;
  border-radius:14px;
  padding:12px;
  font-weight:900;
}
.bpms-sync-actions button.primary{
  background:#294fa3;
  color:#fff;
  border-color:#294fa3;
}
.bpms-sync-list{
  display:grid;
  gap:8px;
}
.bpms-sync-item{
  background:#fff;
  border:1px solid #dfe5ef;
  border-radius:15px;
  padding:11px;
}
.bpms-sync-item b{
  color:#102a66;
  font-size:13px;
}
.bpms-sync-item span{
  display:block;
  color:#64748b;
  font-size:12px;
  margin-top:4px;
}
@media(min-width:761px){
  .bpms-sync-pill{bottom:18px}
  .bpms-sync-panel{left:auto;width:420px;right:20px;border-radius:24px}
  .bpms-sync-head{border-radius:24px 24px 0 0}
}