/* ========================================================================= scope-picker.css — Công cụ chọn Công ty/Trạm trên topbar. Desktop (≥992px): dải #viewScopeBand thành dropdown (rê khu Công ty / bấm khu Trạm). Mobile (≤991px): nút phạm vi trong .header-left mở bottom sheet. Quy ước màu (như .notif-item / #viewScopeBand): LIGHT = hex cứng; DARK = override qua [data-theme="dark"] / [data-layout-mode="dark"] — tránh token --sg-* (baked cho nền tối). ========================================================================= */ /* ---------------- Desktop: affordance trên dải ---------------- */ #viewScopeBand .vsb-seg { position: relative; } #viewScopeBand[data-role="multi"] .vsb-seg.vsb-company, #viewScopeBand[data-role="multi"] .vsb-seg.vsb-station, #viewScopeBand[data-role="single"] .vsb-seg.vsb-station { cursor: pointer; transition: background .13s ease; } .vsb-seg.vsb-company.sp-actionable:hover { background: rgba(31,154,88,.13); } .vsb-seg.vsb-station.sp-actionable:hover { background: rgba(31,127,184,.13); } [data-theme="dark"] .vsb-seg.vsb-company.sp-actionable:hover, [data-layout-mode="dark"] .vsb-seg.vsb-company.sp-actionable:hover { background: rgba(61,220,132,.18); } [data-theme="dark"] .vsb-seg.vsb-station.sp-actionable:hover, [data-layout-mode="dark"] .vsb-seg.vsb-station.sp-actionable:hover { background: rgba(70,184,240,.18); } /* Segment "Quản lý" (Station.AdminId) — màu tím, tách khỏi xanh lá (công ty) / xanh dương (trạm). Chỉ desktop: _Topbar.cshtml ẩn segment này <992px. */ #viewScopeBand .vsb-seg.vsb-manager.sp-actionable { cursor: pointer; transition: background .13s ease; } .vsb-seg.vsb-manager.sp-actionable:hover { background: rgba(122,92,196,.13); } [data-theme="dark"] .vsb-seg.vsb-manager.sp-actionable:hover, [data-layout-mode="dark"] .vsb-seg.vsb-manager.sp-actionable:hover { background: rgba(179,157,245,.18); } .vsb-seg.sp-actionable:focus-visible { outline: 2px solid #FE9F43; outline-offset: -2px; } .sp-tail { margin-left: auto; padding-left: 8px; display: inline-flex; align-items: center; color: #98a79d; flex: none; } .sp-tail svg { width: 13px; height: 13px; } .sp-caret { transition: transform .18s ease; } .vsb-seg.sp-open .sp-caret { transform: rotate(180deg); } [data-theme="dark"] .sp-tail, [data-layout-mode="dark"] .sp-tail { color: #5f6f66; } /* locked segment: con trỏ thường + tooltip */ .vsb-seg.sp-locked { cursor: default; } .vsb-seg.sp-locked[data-sp-tip]:hover::after { content: attr(data-sp-tip); position: absolute; top: calc(100% + 8px); left: 8px; background: #16241c; color: #fff; font-size: 11px; font-weight: 600; padding: 5px 9px; border-radius: 6px; white-space: nowrap; z-index: 1300; box-shadow: 0 2px 8px rgba(20,40,28,.2); } [data-theme="dark"] .vsb-seg.sp-locked[data-sp-tip]:hover::after, [data-layout-mode="dark"] .vsb-seg.sp-locked[data-sp-tip]:hover::after { background: #0d0d0d; color: #eaf3ee; } /* ---------------- Desktop: dropdown panel (PORTAL — gắn vào , position:fixed để thoát overflow:hidden của dải +

; toạ độ top/left/right do JS set theo rect segment) -------- */ .sp-panel { position: fixed; z-index: 1250; background: #fff; border: 1px solid #E6EAED; border-radius: 10px; box-shadow: 0 10px 30px rgba(20,40,28,.16); overflow: hidden; /* Rộng theo nội dung (tên công ty/trạm dài) tới giới hạn — tránh cắt sớm khi còn dư width. JS positionPanel đo offsetWidth rồi kẹp trong viewport. */ width: max-content; min-width: 300px; max-width: min(600px, calc(100vw - 24px)); } [data-theme="dark"] .sp-panel, [data-layout-mode="dark"] .sp-panel { background: #1a1a2e; border-color: #2F343C; box-shadow: 0 12px 34px rgba(0,0,0,.5); } .sp-search { display: flex; align-items: center; gap: 8px; margin: 9px; border: 1.5px solid #E6EAED; border-radius: 8px; padding: 8px 10px; background: #f7f8f7; } .sp-search:focus-within { border-color: #FE9F43; } .sp-search svg { width: 15px; height: 15px; color: #98a79d; flex: none; } .sp-search input { border: 0; background: transparent; outline: none; width: 100%; font-size: 13px; color: #333; font-family: inherit; } .sp-search input::placeholder { color: #98a79d; } [data-theme="dark"] .sp-search, [data-layout-mode="dark"] .sp-search { border-color: #2F343C; background: #111318; } [data-theme="dark"] .sp-search input, [data-layout-mode="dark"] .sp-search input { color: #e2e8f0; } .sp-scroll { max-height: 288px; overflow-y: auto; } .sp-group { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #98a79d; padding: 8px 13px 3px; } .sp-opt { display: flex; align-items: flex-start; gap: 9px; padding: 8px 13px; cursor: pointer; border: 0; width: 100%; background: transparent; text-align: left; font-family: inherit; transition: background .1s; } .sp-opt:hover, .sp-opt.sp-cur { background: rgba(31,154,88,.07); } .vsb-station .sp-opt:hover, .vsb-station .sp-opt.sp-cur { background: rgba(31,127,184,.08); } [data-theme="dark"] .sp-opt:hover, [data-layout-mode="dark"] .sp-opt:hover, [data-theme="dark"] .sp-opt.sp-cur, [data-layout-mode="dark"] .sp-opt.sp-cur { background: rgba(61,220,132,.12); } [data-theme="dark"] .vsb-station .sp-opt:hover, [data-layout-mode="dark"] .vsb-station .sp-opt:hover, [data-theme="dark"] .vsb-station .sp-opt.sp-cur, [data-layout-mode="dark"] .vsb-station .sp-opt.sp-cur { background: rgba(70,184,240,.15); } /* Highlight khi điều hướng bàn phím ↑/↓ (đậm hơn hover một chút) */ .sp-opt.sp-active, .sp-mopt.sp-active { background: rgba(31,154,88,.14); } .sp-p-station .sp-opt.sp-active { background: rgba(31,127,184,.15); } [data-theme="dark"] .sp-opt.sp-active, [data-layout-mode="dark"] .sp-opt.sp-active, [data-theme="dark"] .sp-mopt.sp-active, [data-layout-mode="dark"] .sp-mopt.sp-active { background: rgba(61,220,132,.2); } [data-theme="dark"] .sp-p-station .sp-opt.sp-active, [data-layout-mode="dark"] .sp-p-station .sp-opt.sp-active { background: rgba(70,184,240,.22); } .sp-opt .sp-ic { width: 16px; height: 16px; flex: none; margin-top: 1px; } .sp-opt.sp-c .sp-ic { color: #1f9a58; } .sp-opt.sp-s .sp-ic { color: #1f7fb8; } [data-theme="dark"] .sp-opt.sp-c .sp-ic, [data-layout-mode="dark"] .sp-opt.sp-c .sp-ic { color: #3ddc84; } [data-theme="dark"] .sp-opt.sp-s .sp-ic, [data-layout-mode="dark"] .sp-opt.sp-s .sp-ic { color: #46b8f0; } .sp-opt .sp-otx { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; } .sp-opt .sp-n { font-size: 13px; font-weight: 650; color: #16241c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sp-opt .sp-sub { font-size: 11px; color: #6c8072; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; } .sp-opt .sp-chk { margin-left: auto; color: #1ab394; flex: none; opacity: 0; } .sp-opt.sp-cur .sp-chk { opacity: 1; } .sp-opt.sp-cur .sp-n { color: #1f9a58; } .vsb-station .sp-opt.sp-cur .sp-n { color: #1f7fb8; } .sp-opt .sp-chk svg { width: 15px; height: 15px; } [data-theme="dark"] .sp-opt .sp-n, [data-layout-mode="dark"] .sp-opt .sp-n { color: #eaf3ee; } [data-theme="dark"] .sp-opt .sp-sub, [data-layout-mode="dark"] .sp-opt .sp-sub { color: #7d9287; } [data-theme="dark"] .sp-opt.sp-cur .sp-n, [data-layout-mode="dark"] .sp-opt.sp-cur .sp-n { color: #3ddc84; } [data-theme="dark"] .vsb-station .sp-opt.sp-cur .sp-n, [data-layout-mode="dark"] .vsb-station .sp-opt.sp-cur .sp-n { color: #46b8f0; } /* Panel chọn admin quản lý trạm — nhấn tím, cùng khuôn với panel công ty/trạm */ .sp-p-manager .sp-opt:hover, .sp-p-manager .sp-opt.sp-cur { background: rgba(122,92,196,.09); } .sp-p-manager .sp-opt.sp-active { background: rgba(122,92,196,.16); } .sp-opt.sp-m .sp-ic { color: #7a5cc4; } .sp-p-manager .sp-opt.sp-cur .sp-n { color: #7a5cc4; } .sp-opt.sp-m-clear .sp-ic, .sp-opt.sp-m-clear .sp-n { color: #98a79d; } [data-theme="dark"] .sp-p-manager .sp-opt:hover, [data-layout-mode="dark"] .sp-p-manager .sp-opt:hover, [data-theme="dark"] .sp-p-manager .sp-opt.sp-cur, [data-layout-mode="dark"] .sp-p-manager .sp-opt.sp-cur { background: rgba(179,157,245,.14); } [data-theme="dark"] .sp-p-manager .sp-opt.sp-active, [data-layout-mode="dark"] .sp-p-manager .sp-opt.sp-active { background: rgba(179,157,245,.24); } [data-theme="dark"] .sp-opt.sp-m .sp-ic, [data-layout-mode="dark"] .sp-opt.sp-m .sp-ic { color: #b39df5; } [data-theme="dark"] .sp-p-manager .sp-opt.sp-cur .sp-n, [data-layout-mode="dark"] .sp-p-manager .sp-opt.sp-cur .sp-n { color: #b39df5; } [data-theme="dark"] .sp-opt.sp-m-clear .sp-ic, [data-layout-mode="dark"] .sp-opt.sp-m-clear .sp-ic, [data-theme="dark"] .sp-opt.sp-m-clear .sp-n, [data-layout-mode="dark"] .sp-opt.sp-m-clear .sp-n { color: #7d9287; } /* Tài khoản admin (dòng phụ) — mono cho dễ đọc/đối chiếu */ .sp-p-manager .sp-opt .sp-sub { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; } .sp-opt.sp-m-clear .sp-sub { font-family: inherit; font-size: 11px; } .sp-empty { padding: 18px 13px; text-align: center; color: #98a79d; font-size: 12.5px; } .sp-foot { padding: 7px 13px; border-top: 1px solid #eef1f0; font-size: 11px; color: #98a79d; } [data-theme="dark"] .sp-foot, [data-layout-mode="dark"] .sp-foot { border-color: #242938; } /* ---------------- Mobile: nút phạm vi ---------------- */ .sp-mobile-btn { display: none; } @media (max-width: 991.96px) { .header-left.sp-has-btn { justify-content: flex-start; gap: 9px; padding-right: 100px; } .header-left.sp-has-btn .company-badge { flex: none; } .sp-mobile-btn { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; height: 40px; background: rgba(31,154,88,.08); border: 1px solid rgba(31,154,88,.22); border-radius: 9px; padding: 4px 9px; cursor: pointer; font-family: inherit; text-align: left; } .sp-mobile-btn.sp-locked { background: #eef1f0; border-color: #E6EAED; cursor: default; } [data-theme="dark"] .sp-mobile-btn, [data-layout-mode="dark"] .sp-mobile-btn { background: rgba(61,220,132,.10); border-color: #26382e; } [data-theme="dark"] .sp-mobile-btn.sp-locked, [data-layout-mode="dark"] .sp-mobile-btn.sp-locked { background: #1a1d24; border-color: #2F343C; } } .sp-mobile-btn .sp-mb-ic { width: 27px; height: 27px; border-radius: 7px; background: #1f9a58; color: #fff; display: grid; place-items: center; flex: none; } .sp-mobile-btn.sp-locked .sp-mb-ic { background: #98a79d; } .sp-mobile-btn .sp-mb-ic svg { width: 15px; height: 15px; } .sp-mobile-btn .sp-mb-tx { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.16; } .sp-mb-c { font-size: 12px; font-weight: 750; color: #16241c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sp-mb-s { font-size: 10.5px; font-weight: 600; color: #1f7fb8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 4px; } .sp-mb-s svg { width: 10px; height: 10px; flex: none; } .sp-mobile-btn.sp-locked .sp-mb-s { color: #6c8072; } .sp-mb-tail { flex: none; color: #98a79d; display: inline-flex; } .sp-mb-tail svg { width: 15px; height: 15px; } [data-theme="dark"] .sp-mb-c, [data-layout-mode="dark"] .sp-mb-c { color: #eaf3ee; } [data-theme="dark"] .sp-mb-s, [data-layout-mode="dark"] .sp-mb-s { color: #46b8f0; } [data-theme="dark"] .sp-mobile-btn.sp-locked .sp-mb-ic, [data-layout-mode="dark"] .sp-mobile-btn.sp-locked .sp-mb-ic { background: #5f6f66; } /* ---------------- Mobile: bottom sheet (gắn vào ) ---------------- */ .sp-ov { position: fixed; inset: 0; background: rgba(10,20,14,.44); opacity: 0; pointer-events: none; transition: opacity .25s ease; z-index: 3000; } .sp-ov.sp-show { opacity: 1; pointer-events: auto; } .sp-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 3001; background: #fff; border-top-left-radius: 20px; border-top-right-radius: 20px; transform: translateY(103%); transition: transform .3s cubic-bezier(.16,1,.3,1); max-height: 85vh; display: flex; flex-direction: column; box-shadow: 0 -10px 34px rgba(0,0,0,.24); } .sp-sheet.sp-show { transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .sp-sheet, .sp-ov { transition: none; } } [data-theme="dark"] .sp-sheet, [data-layout-mode="dark"] .sp-sheet { background: #1a1a2e; } .sp-handle { height: 5px; width: 38px; background: #E6EAED; border-radius: 99px; margin: 9px auto 3px; flex: none; } [data-theme="dark"] .sp-handle, [data-layout-mode="dark"] .sp-handle { background: #2F343C; } .sp-head { display: flex; align-items: center; gap: 8px; padding: 6px 14px 10px; border-bottom: 1px solid #eef1f0; flex: none; } [data-theme="dark"] .sp-head, [data-layout-mode="dark"] .sp-head { border-color: #242938; } .sp-title { font-size: 14.5px; font-weight: 750; color: #16241c; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } [data-theme="dark"] .sp-title, [data-layout-mode="dark"] .sp-title { color: #eaf3ee; } .sp-x { border: 0; background: #eef1f0; color: #6c8072; width: 29px; height: 29px; border-radius: 99px; cursor: pointer; font-size: 15px; flex: none; line-height: 1; } [data-theme="dark"] .sp-x, [data-layout-mode="dark"] .sp-x { background: #242938; color: #7d9287; } .sp-msearch { margin: 11px 14px 4px; border: 1.5px solid #E6EAED; border-radius: 11px; display: flex; align-items: center; gap: 9px; padding: 10px 12px; background: #f7f8f7; flex: none; } .sp-msearch:focus-within { border-color: #FE9F43; } .sp-msearch svg { width: 16px; height: 16px; color: #98a79d; flex: none; } .sp-msearch input { border: 0; background: transparent; outline: none; width: 100%; font-size: 16px; color: #333; font-family: inherit; } [data-theme="dark"] .sp-msearch, [data-layout-mode="dark"] .sp-msearch { border-color: #2F343C; background: #111318; } [data-theme="dark"] .sp-msearch input, [data-layout-mode="dark"] .sp-msearch input { color: #e2e8f0; } .sp-mlist { overflow-y: auto; padding: 6px 8px 18px; } .sp-mgroup { font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #98a79d; padding: 11px 12px 4px; } .sp-mopt { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-radius: 11px; cursor: pointer; width: 100%; border: 0; background: transparent; text-align: left; font-family: inherit; } .sp-mopt:active { background: rgba(31,154,88,.09); } .sp-mopt .sp-mic { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; flex: none; } .sp-mopt.sp-c .sp-mic { background: rgba(31,154,88,.09); color: #1f9a58; } .sp-mopt.sp-s .sp-mic { background: rgba(31,127,184,.10); color: #1f7fb8; } .sp-mopt .sp-mic svg { width: 18px; height: 18px; } .sp-mopt .sp-mtx { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; } .sp-mopt .sp-mn { font-size: 14px; font-weight: 650; color: #16241c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sp-mopt .sp-ms { font-size: 12px; color: #6c8072; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; } .sp-mopt .sp-mtail { margin-left: auto; flex: none; display: inline-flex; color: #1ab394; opacity: 0; } .sp-mopt.sp-cur .sp-mtail { opacity: 1; } .sp-mopt.sp-cur { background: rgba(31,154,88,.09); } .sp-mopt.sp-s.sp-cur { background: rgba(31,127,184,.10); } .sp-mopt.sp-cur .sp-mn { color: #1f9a58; } .sp-mopt.sp-s.sp-cur .sp-mn { color: #1f7fb8; } .sp-mopt .sp-mtail svg { width: 18px; height: 18px; } [data-theme="dark"] .sp-mopt .sp-mn, [data-layout-mode="dark"] .sp-mopt .sp-mn { color: #eaf3ee; } [data-theme="dark"] .sp-mopt .sp-ms, [data-layout-mode="dark"] .sp-mopt .sp-ms { color: #7d9287; } .sp-mempty { padding: 22px 14px; text-align: center; color: #98a79d; font-size: 13px; }