/* ============================================================
   VLF 2026 · OPS — CONNECT + WORKLIST styles (bổ sung)
   Dùng token brand tím VLF (vlf-theme.css). Class riêng ops-conn/ops-wl
   để KHÔNG đụng style 13 màn cũ.
   ============================================================ */

/* ---- connect strip ---- */
.ops-conn{
  display:flex; align-items:center; gap:10px;
  padding:9px 13px; border-radius:12px; margin-bottom:12px;
  border:1px solid; font-family:var(--font-sans);
}
.ops-conn--off{ background:rgba(201,162,75,.12); border-color:rgba(201,162,75,.34); }
.ops-conn--sync{ background:rgba(31,138,91,.10); border-color:rgba(31,138,91,.28); }
.ops-conn-dot{ width:9px; height:9px; border-radius:999px; flex:none; }
.ops-conn--off .ops-conn-dot{ background:var(--vlf-gold-700); box-shadow:0 0 0 3px rgba(201,162,75,.18); }
.ops-conn--sync .ops-conn-dot{ background:#1F8A5B; box-shadow:0 0 0 3px rgba(31,138,91,.16); animation:ops-pulse 1.1s ease-in-out infinite; }
@keyframes ops-pulse{ 50%{ box-shadow:0 0 0 6px rgba(31,138,91,.05); } }
.ops-conn-tx{ flex:1; min-width:0; line-height:1.3; }
.ops-conn-tx b{ display:block; font-size:12.5px; font-weight:700; color:var(--vlf-ink-900); }
.ops-conn-tx span{ display:block; font-size:11px; color:var(--vlf-ink-500); }
.ops-conn-btn{
  flex:none; border:none; cursor:pointer; font-family:inherit; font-weight:700;
  font-size:11.5px; padding:7px 13px; border-radius:999px;
  background:var(--vlf-purple-700); color:#fff;
}
.ops-conn-btn:active{ background:var(--vlf-purple-800); }

/* ---- toasts (cố định trong khung điện thoại) ---- */
.ops-toasts{
  position:absolute; left:12px; right:12px; bottom:calc(74px + var(--zalo-safe-bottom,0px));
  z-index:90; display:flex; flex-direction:column; gap:8px; pointer-events:none;
}
.ops-toast{
  display:flex; align-items:flex-start; gap:9px;
  background:var(--vlf-purple-800); color:#fff;
  border-radius:13px; padding:11px 13px;
  box-shadow:0 10px 28px -8px rgba(31,13,38,.55);
  animation:ops-toast-in .25s ease both;
}
.ops-toast--warn{ background:var(--vlf-gold-700); }
.ops-toast--crit{ background:#C0392B; }
.ops-toast-ic{ flex:none; margin-top:1px; }
.ops-toast-tx b{ display:block; font-size:12.5px; font-weight:700; }
.ops-toast-tx span{ display:block; font-size:11px; color:rgba(255,255,255,.78); margin-top:1px; }
@keyframes ops-toast-in{ from{ opacity:0; transform:translateY(8px); } }

/* ---- worklist hợp nhất ---- */
.ops-wl{ padding:4px 0; }
.ops-wl-row{ display:flex; align-items:center; gap:11px; padding:11px 14px; cursor:pointer; }
.ops-wl-row.bt{ border-top:1px solid var(--vlf-line); }
.ops-wl-row:active{ background:var(--vlf-purple-50); }
.ops-wl-ic{ width:30px; height:30px; border-radius:8px; flex:none; display:grid; place-items:center; }
.ops-wl-ic--crit{ background:rgba(192,57,43,.12); color:#C0392B; }
.ops-wl-ic--warn{ background:rgba(201,162,75,.18); color:var(--vlf-gold-700); }
.ops-wl-ic--norm{ background:var(--vlf-purple-50); color:var(--vlf-purple-700); }
.ops-wl-tx{ flex:1; min-width:0; }
.ops-wl-tx .t{ font-size:13px; font-weight:600; color:var(--vlf-ink-900); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ops-wl-tx .s{ font-size:11px; color:var(--vlf-ink-500); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ops-wl-tag{
  flex:none; font-size:10px; font-weight:700; padding:3px 8px; border-radius:6px;
  background:var(--vlf-sunk); color:var(--vlf-ink-700); white-space:nowrap; max-width:96px; overflow:hidden; text-overflow:ellipsis;
}

/* ---- demo panel: nhóm connect ---- */
.vlf-conn-row{ display:flex; align-items:center; gap:10px; }
.vlf-conn-toggle{
  flex:none; width:46px; height:27px; border-radius:999px; border:none; cursor:pointer; position:relative;
  background:#1F8A5B; transition:background .2s;
}
.vlf-conn-toggle.off{ background:#B0AAB5; }
.vlf-conn-toggle::after{ content:""; position:absolute; top:3px; left:3px; width:21px; height:21px; border-radius:999px; background:#fff; transition:transform .2s; }
.vlf-conn-toggle.off::after{ transform:translateX(19px); }
.vlf-conn-meta{ flex:1; min-width:0; font-size:11.5px; color:var(--vlf-ink-500); line-height:1.35; }
.vlf-conn-meta b{ color:var(--vlf-ink-900); font-weight:600; }
.vlf-conn-sync{
  margin-top:9px; width:100%; border:1px solid var(--vlf-line); background:#fff; cursor:pointer;
  font-family:inherit; font-weight:600; font-size:12.5px; padding:8px; border-radius:9px; color:var(--vlf-ink-900);
}
.vlf-conn-sync:disabled{ color:var(--vlf-ink-300); cursor:default; }

/* ---- Ca của tôi · nhiều nhiệm vụ (duty board) ---- */
.ops-duty{ padding:12px 14px; }
.ops-duty-seg{ display:flex; gap:4px; background:var(--vlf-sunk); border-radius:10px; padding:4px; margin-bottom:11px; }
.ops-duty-seg button{
  flex:1; border:none; background:none; cursor:pointer; font-family:inherit;
  padding:7px 3px; border-radius:7px; color:var(--vlf-ink-500); line-height:1.15;
}
.ops-duty-seg button b{ display:block; font-size:11.5px; font-weight:700; }
.ops-duty-seg button i{ display:block; font-style:normal; font-size:9.5px; opacity:.75; margin-top:1px; }
.ops-duty-seg button.on{ background:#fff; color:var(--vlf-purple-700); box-shadow:0 1px 3px rgba(31,13,38,.1); }
.ops-duty-seg button:disabled{ opacity:.4; cursor:default; }
.ops-duty-row{ display:flex; align-items:center; gap:11px; padding:11px 2px; cursor:pointer; }
.ops-duty-row.bt{ border-top:1px solid var(--vlf-line); }
.ops-duty-ic{ width:34px; height:34px; border-radius:9px; flex:none; display:grid; place-items:center; }
.ops-duty-tx{ flex:1; min-width:0; }
.ops-duty-tx .t{ font-size:13.5px; font-weight:700; color:var(--vlf-ink-900); }
.ops-duty-tx .s{ font-size:11px; color:var(--vlf-ink-500); }
.ops-duty-open{ flex:none; display:flex; align-items:center; gap:2px; font-size:11.5px; font-weight:700; color:var(--vlf-purple-700); }
.ops-duty-empty{ font-size:12.5px; color:var(--vlf-ink-500); padding:14px 2px; text-align:center; }
.ops-duty-foot{ display:flex; align-items:center; gap:6px; margin-top:10px; padding-top:10px; border-top:1px solid var(--vlf-line); font-size:11px; color:var(--vlf-ink-500); }
.ops-duty-foot svg{ flex:none; color:var(--vlf-purple-700); }