/* ============================================================================
   field-offline/inapp.css — Đợt 9: CSS riêng cho phần Offline & Push CHẠY TRONG APP Blazor
   (không sửa app.css). Tiền tố: .ofq- (hàng đợi), .ntf- (thông báo), .rc-offline (overlay mất kết nối),
   .fs-bell (chuông trên FieldLayout). Dùng token v2 của app.css ⇒ đúng ở Sáng/Tối/Ngoài trời/Ca đêm.
   ============================================================================ */

/* ---- Chuông thông báo trên thanh FieldLayout ---- */
.field-shell .fs-bell {
    display: inline-grid; place-items: center; width: var(--tap-min); height: var(--tap-min); border-radius: var(--radius-md);
    color: var(--chrome-ink); text-decoration: none;
}
.field-shell .fs-bell:hover { background: var(--chrome-hover); }
.field-shell .fs-bell svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Màn hẹp: thanh trên đã bỏ chữ "HSSE Hiện trường" ⇒ đủ chỗ cho chuông, GIỮ logo (trước đây ẩn logo ở đây). */

/* ---- Dải "N báo cáo chờ gửi" (dưới thanh trên, chỉ hiện khi có) ---- */
.field-shell .ofq-strip { display: none; }
html[data-ofq-waiting] .field-shell .ofq-strip {
    display: flex; align-items: center; gap: .55rem; min-height: var(--tap-min);
    padding: .45rem max(16px, env(safe-area-inset-right)) .45rem max(16px, env(safe-area-inset-left));
    background: var(--warning-bg); color: var(--warning); border-bottom: var(--border-w) solid var(--warning-line);
    font-size: var(--text-sm); font-weight: 700; text-decoration: none; line-height: 1.3;
}
html[data-ofq-waiting] .field-shell .ofq-strip:hover { filter: brightness(.98); text-decoration: underline; }
.field-shell .ofq-strip svg { flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.field-shell .ofq-strip .ofq-n {
    display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 12px;
    background: var(--warning); color: var(--surface-1); font-size: .8rem; font-weight: 800; font-variant-numeric: tabular-nums;
}
.field-shell .ofq-strip .ofq-t { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.field-shell .ofq-strip .ofq-auth { display: none; }
html[data-ofq-auth] .field-shell .ofq-strip .ofq-auth { display: inline; }
@media (min-width: 768px) { html[data-ofq-waiting] .field-shell .ofq-strip { justify-content: center; } .field-shell .ofq-strip .ofq-t { flex: 0 1 auto; } }

/* ---- Overlay mất kết nối: nút "Chuyển sang báo cáo ngoại tuyến" (chỉ trong vỏ Field) ---- */
#components-reconnect-modal .rc-offline { display: none; }
body:has(.field-shell) #components-reconnect-modal .rc-offline {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: var(--tap-min);
    padding: .5rem 1rem; border-radius: var(--radius-md); font-weight: 800; font-size: .9375rem; text-decoration: none;
    background: #fff; color: var(--brand-800, #152A52); border: 1px solid rgba(255, 255, 255, .6);
}
body:has(.field-shell) #components-reconnect-modal .rc-offline svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body:has(.frp) #components-reconnect-modal .rc-offline { order: -1; flex: 1 1 100%; }   /* trang báo cáo: nút nổi bật nhất */
@media (min-width: 480px) { body:has(.frp) #components-reconnect-modal .rc-offline { flex: 0 1 auto; } }

/* ---- Trang /field/offline-queue ---- */
.field-shell .ofq-head { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-start; justify-content: space-between; margin-bottom: var(--space-3); }
.field-shell .ofq-head > div { flex: 1 1 16rem; min-width: 0; }
.field-shell .ofq-head .fld-sub { margin-bottom: 0; }
.field-shell .ofq-tools { display: flex; flex-wrap: wrap; gap: .5rem; }
.field-shell .ofq-tools .btn { min-height: var(--tap-min); }
@media (max-width: 479px) { .field-shell .ofq-tools { width: 100%; } .field-shell .ofq-tools .btn { flex: 1 1 140px; } }
.field-shell .ofq-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 1024px) { .field-shell .ofq-list { grid-template-columns: 1fr 1fr; } }
.field-shell .ofq-item {
    display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: .75rem; padding: .75rem; border-radius: var(--radius-md);
    border: var(--border-w) solid var(--border); background: var(--surface-1); box-shadow: var(--elev-1);
}
.field-shell .ofq-item.is-error { border-color: var(--danger-line); }
.field-shell .ofq-img { width: 64px; height: 64px; border-radius: 10px; overflow: hidden; background: var(--surface-3); display: grid; place-items: center; color: var(--text-3); }
.field-shell .ofq-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.field-shell .ofq-main { min-width: 0; }
.field-shell .ofq-top { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.field-shell .ofq-title { font-weight: 800; font-size: var(--text-sm); color: var(--text-1); }
.field-shell .ofq-meta { font-size: var(--text-xs); color: var(--text-2); margin-top: 2px; font-variant-numeric: tabular-nums; }
.field-shell .ofq-desc { margin: .25rem 0 0; font-size: var(--text-sm); color: var(--text-1s); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.field-shell .ofq-err { margin-top: .25rem; font-size: .85rem; font-weight: 600; color: var(--danger); overflow-wrap: anywhere; }
.field-shell .ofq-act { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .4rem; justify-content: flex-end; }
.field-shell .ofq-act .btn { min-height: var(--tap-min); }
.field-shell .ofq-st { display: inline-flex; align-items: center; padding: .1rem .5rem; border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 800; }
.field-shell .ofq-st.pending { background: var(--warning-bg); color: var(--warning); }
.field-shell .ofq-st.sending { background: var(--info-bg); color: var(--info); }
.field-shell .ofq-st.sent { background: var(--success-bg); color: var(--success); }
.field-shell .ofq-st.error { background: var(--danger-bg); color: var(--danger); }
.field-shell .ofq-note { margin-bottom: var(--space-3); }

/* ---- Trang /field/notifications ---- */
.field-shell .ntf-state { display: flex; align-items: center; gap: .75rem; padding: .85rem 1rem; border-radius: var(--radius-md);
    border: var(--border-w) solid var(--border); background: var(--surface-2); margin-bottom: var(--space-4); }
.field-shell .ntf-state.on { background: var(--success-bg); border-color: var(--success-line); color: var(--success); }
.field-shell .ntf-state.off { background: var(--surface-2); color: var(--text-1); }
.field-shell .ntf-state.warn { background: var(--warning-bg); border-color: var(--warning-line); color: var(--warning); }
.field-shell .ntf-ic { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; border-radius: 12px; background: var(--surface-1); }
.field-shell .ntf-ic svg, .field-shell .ntf-btns svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.field-shell .ntf-state b { display: block; font-size: 1rem; }
/* Chỉ dòng chữ phụ (span trong khối chữ) — KHÔNG áp vào ô icon .ntf-ic (cũng là <span>) — trước đây làm icon mất canh giữa, lệch ra ngoài */
.field-shell .ntf-state > span:not(.ntf-ic) > span { display: block; font-size: var(--text-sm); color: inherit; opacity: .92; }
.field-shell .ntf-state > span:not(.ntf-ic) { min-width: 0; }
.field-shell .ntf-ic svg { display: block; }
/* Nút "Kiểm tra lại": có khung viền màu (trước chỉ là chữ, trông như không bấm được) */
.field-shell .ntf-btns .btn-ghost { border: var(--border-w) solid color-mix(in srgb, var(--primary) 45%, var(--border)); background: color-mix(in srgb, var(--primary) 7%, var(--surface-1)); }
.field-shell .ntf-btns .btn-ghost:hover:not(:disabled) { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 14%, var(--surface-1)); }
.field-shell .ntf-btns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: .6rem; }
.field-shell .ntf-btns .btn { min-height: 48px; width: 100%; }
.field-shell .ntf-list { margin: .25rem 0 0; padding-left: 1.2rem; font-size: var(--text-sm); color: var(--text-1s); line-height: 1.6; }
.field-shell .ntf-steps { margin: .25rem 0 0; padding-left: 1.3rem; font-size: var(--text-sm); line-height: 1.6; }
.field-shell .ntf-steps li { margin-bottom: .2rem; }
.field-shell .ntf-small { font-size: var(--text-xs); color: var(--text-2); margin: .6rem 0 0; }
.field-shell .ntf-h2 { font-size: var(--text-lg); font-weight: 800; margin: 0 0 .4rem; color: var(--text-1); }

/* 29/09/2026: đang đăng xuất — phản hồi ngay trên nút (js/offline-inapp.js gắn aria-busy + html.is-signing-out) */
html.is-signing-out, html.is-signing-out * { cursor: progress !important; }
a[href="/auth/logout"][aria-busy="true"] { pointer-events: none; position: relative; }
a[href="/auth/logout"][aria-busy="true"] > svg { opacity: 0; }
a[href="/auth/logout"][aria-busy="true"]::after {
    content: ""; position: absolute; top: 50%; left: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px;
    border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: hsse-spin .7s linear infinite;
}
@keyframes hsse-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { a[href="/auth/logout"][aria-busy="true"]::after { animation-duration: 2s; } }