/* ══════════════════════════════════════════════════════════
💬 MESSENGER BUBBLE DOCK — v7
══════════════════════════════════════════════════════════ */
/* Dock container — góc phải màn hình */
.bubble-dock {
position: fixed !important;
bottom: 16px !important;
right: 16px !important;
top: auto !important;
left: auto !important;
width: 60px !important;
display: flex !important;
flex-direction: column-reverse !important;
align-items: center !important;
gap: 10px !important;
z-index: 9400 !important;
pointer-events: all !important;
/* Ngăn bị ảnh hưởng bởi parent overflow/transform */
contain: layout style;
transform: translateZ(0);
-webkit-transform: translateZ(0);
}
/* Desktop: đẩy sang trái đủ để không bị sidebar overlay */
@media (min-width: 1025px) {
.bubble-dock {
right: 24px;
}
.chat-win {
z-index: 8400;
pointer-events: all;
}
}
/* Avatar bubble của các thread có unread */
.bubble-av {
position: relative;
width: 48px;
height: 48px;
border-radius: 50%;
cursor: pointer;
box-shadow: 0 2px 12px rgba(0,0,0,.2);
transition: transform .15s, box-shadow .15s;
border: 3px solid #fff;
overflow: visible;
}
.bubble-av:hover { transform: scale(1.08); box-shadow: 0 4px 16px rgba(0,0,0,.3); }
.bubble-av .av { width: 42px; height: 42px; font-size: 16px; }
/* Badge số unread trên từng bubble */
.bubble-badge {
position: absolute;
top: -4px;
right: -4px;
background: #e3342f;
color: #fff;
font-size: 10px;
font-weight: 700;
min-width: 18px;
height: 18px;
border-radius: 9px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 4px;
border: 2px solid #fff;
line-height: 1;
}
/* Nút Compose (tạo chat mới) */
.bubble-compose {
position: relative;
width: 52px;
height: 52px;
border-radius: 50%;
background: var(--blue, #0074B8);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 4px 16px rgba(0,116,184,.4);
transition: transform .15s, box-shadow .15s;
border: none;
}
.bubble-compose:hover {
transform: scale(1.08);
box-shadow: 0 6px 20px rgba(0,116,184,.5);
}
/* Badge tổng trên compose */
.bubble-total-badge {
position: absolute;
top: -3px;
right: -3px;
background: #e3342f;
color: #fff;
font-size: 10px;
font-weight: 700;
min-width: 18px;
height: 18px;
border-radius: 9px;
align-items: center;
justify-content: center;
padding: 0 4px;
border: 2px solid #fff;
line-height: 1;
}
/* Cửa sổ chat — override để đẹp hơn với bubble mode */
/* ── Chat window override ── */
.chat-win {
position: fixed !important;
bottom: 0 !important;
top: auto !important;
left: auto !important;
width: 320px !important;
height: 420px !important;
z-index: 9200 !important;
right: 92px !important; /* default: sát bên trái bubble dock */
pointer-events: all !important;
border-radius: 12px 12px 0 0 !important;
box-shadow: 0 -4px 24px rgba(0,0,0,.18) !important;
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
background: var(--card) !important;
transition: height .2s ease !important;
}
.chat-win.minimized {
height: 44px !important;
}
/* Mobile: full screen từ DƯỚI LÊN */
@media (max-width: 1024px) {
.bubble-dock {
bottom: 16px !important;
right: 16px !important;
z-index: 9300 !important;
}
.chat-win {
position: fixed !important;
bottom: 0 !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100vw !important;
height: 100vh !important;
height: 100dvh !important;
border-radius: 0 !important;
z-index: 9250 !important;
transform: none !important;
}
.chat-win.minimized {
display: none !important;
}
.chat-win ~ .chat-win { display: none !important; }
}
/* ── New chat popup — góc phải phía trên compose button ── */
#new-chat-popup {
position: fixed !important;
bottom: 84px !important;
right: 16px !important;
width: 300px;
max-height: 70vh;
background: var(--card, #fff);
border-radius: 14px;
box-shadow: 0 12px 40px rgba(0,0,0,.3);
border: 1px solid var(--border, #e5e7eb);
z-index: 9600 !important;
overflow: hidden;
animation: slideUp .2s ease;
transform: translateZ(0);
-webkit-transform: translateZ(0);
}
/* Mobile: popup full width */
@media (max-width: 1024px) {
#new-chat-popup {
left: 12px !important;
right: 12px !important;
bottom: 80px !important;
width: auto !important;
max-height: 60vh;
}
}
#new-chat-popup .ncp-header {
padding: 12px 16px;
font-size: 14px;
font-weight: 600;
border-bottom: 1px solid var(--border, #e5e7eb);
display: flex;
align-items: center;
justify-content: space-between;
}
#new-chat-popup .ncp-search {
padding: 8px 12px;
border-bottom: 1px solid var(--border, #e5e7eb);
}
#new-chat-popup .ncp-search input {
width: 100%;
border: 1px solid var(--border, #e5e7eb);
border-radius: 20px;
padding: 6px 12px;
font-size: 12px;
outline: none;
background: var(--bg2, #f0f2f5);
color: var(--text, #1a1a2e);
}
#new-chat-popup .ncp-list {
max-height: 280px;
overflow-y: auto;
}
#new-chat-popup .ncp-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
cursor: pointer;
transition: background .12s;
}
#new-chat-popup .ncp-item:hover {
background: var(--bg2, #f0f2f5);
}
#new-chat-popup .ncp-unread {
margin-left: auto;
background: #e3342f;
color: #fff;
border-radius: 10px;
padding: 2px 7px;
font-size: 11px;
font-weight: 600;
}
@keyframes slideUp {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* Mobile: popup full width */
@media (max-width: 600px) {
#new-chat-popup {
left: 12px;
right: 12px;
width: auto;
bottom: 80px;
}
}
/* ══════════════════════════════════════════════════════════
📱 MOBILE OPTIMIZATION v7
══════════════════════════════════════════════════════════ */
/* ── Fix iOS input zoom (font-size >= 16px) ────────────────── */
@media (max-width: 1024px) {
input, select, textarea {
font-size: 16px !important;
}
.fc { font-size: 16px !important; }
/* Modal full-width on mobile */
.mo-box {
width: calc(100vw - 24px) !important;
margin: 12px !important;
max-height: 88vh !important;
}
/* Report layout: sidebar → dropdown */
#rpt-sidebar {
display: none !important;
}
#rpt-mobile-sel {
display: block !important;
}
#rpt-main {
grid-column: 1 / -1 !important;
}
/* Rotate hint */
.rotate-hint {
display: flex !important;
}
}
/* ── Sticky columns cho bảng nhiều cột ─────────────────────── */
.tw { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Sticky cột đầu (STT hoặc Tên) */
.stk-0 {
position: sticky !important;
left: 0;
z-index: 3;
background: var(--card) !important;
box-shadow: 2px 0 4px rgba(0,0,0,.08);
}
/* Sticky cột thứ 2 (Tên) */
.stk-1 {
position: sticky !important;
left: 32px;
z-index: 3;
background: var(--card) !important;
box-shadow: 2px 0 4px rgba(0,0,0,.08);
}
/* Sticky cột thứ 3 (Tổng) */
.stk-2 {
position: sticky !important;
left: 140px;
z-index: 3;
background: var(--card) !important;
box-shadow: 2px 0 6px rgba(0,0,0,.1);
}
/* Header sticky */
thead .stk-0, thead .stk-1, thead .stk-2 {
background: var(--bg2) !important;
z-index: 4;
}
/* ── Rotate hint banner ─────────────────────────────────────── */
.rotate-hint {
display: none;
align-items: center;
justify-content: center;
gap: 8px;
background: var(--blue2);
color: #fff;
padding: 8px 14px;
border-radius: 8px;
font-size: 12px;
margin-bottom: 10px;
animation: pulse 2s ease infinite;
}
.rotate-hint .rh-icon {
font-size: 20px;
animation: spin 3s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* ── Landscape mobile compact mode ─────────────────────────── */
/* ── Bảng schedule tổng hợp (admin) ─────────────────────────── */
@media (max-width: 1024px) {
/* Day-view toggle button */
.sched-view-toggle {
display: flex !important;
}
/* Bảng full schedule ẩn ở portrait nếu có day-view */
.sched-table-wrap.has-dayview {
display: none;
}
.sched-dayview {
display: block !important;
}
}
@media (min-width: 1025px) {
.sched-view-toggle { display: none !important; }
.sched-dayview { display: none !important; }
.sched-table-wrap.has-dayview { display: block !important; }
}
/* Day view cards */
.sched-dayview { display: none; }
.dayview-nav {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 0;
margin-bottom: 10px;
}
.dayview-nav button {
background: var(--card);
border: 1px solid var(--border);
border-radius: 8px;
padding: 6px 14px;
color: var(--text);
cursor: pointer;
font-family: var(--font);
font-size: 13px;
}
.dayview-nav .dayview-label {
font-weight: 600;
font-size: 14px;
}
.dayview-cards {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.dayview-card {
background: var(--card);
border: 1px solid var(--border);
border-radius: 10px;
padding: 10px 12px;
}
.dayview-card .dc-name {
font-size: 12px;
font-weight: 600;
margin-bottom: 6px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dayview-card .dc-shifts {
display: flex;
gap: 6px;
}
.dc-shift {
flex: 1;
text-align: center;
padding: 4px;
border-radius: 6px;
font-size: 11px;
}
.dc-shift.on { background: rgba(63,185,80,.15); color: var(--teal); }
.dc-shift.off { background: var(--bg2); color: var(--text3); }
/* ── Report mobile layout ───────────────────────────────────── */
.rpt-mobile-sel {
display: none;
width: 100%;
margin-bottom: 12px;
background: var(--card);
border: 1px solid var(--border);
border-radius: 8px;
padding: 10px 12px;
color: var(--text);
font-family: var(--font);
font-size: 14px;
outline: none;
}
/* Bảng báo cáo */
.rpt-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
@media (max-width: 1024px) {
.rpt-table {
font-size: 11px !important;
}
.rpt-table th, .rpt-table td {
padding: 6px 8px !important;
}
/* Wrap bảng báo cáo trong overflow */
.rpt-preview-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
}
/* ── Schedule đăng ký (CTV) ─────────────────────────────────── */
@media (max-width: 1024px) {
/* Grid đăng ký lịch */
.sg {
gap: 4px !important;
}
.sg-cell {
padding: 6px 4px !important;
font-size: 11px !important;
}
.sg-label {
font-size: 9px !important;
}
/* Card tuần */
.week-card {
padding: 12px !important;
}
.card-hd {
font-size: 13px !important;
}
}
/* Landscape mobile: topbar + content compact */
@media (max-height: 500px) and (orientation: landscape) {
/* Topbar thấp hơn */
#topbar {
height: 40px !important;
padding: 0 10px !important;
}
#topbar-title {
font-size: 13px !important;
}
/* Content padding nhỏ hơn */
#content {
padding: 8px !important;
}
/* Bảng compact */
.att-t td, .att-t th,
table.dt td, table.dt th {
padding: 4px 6px !important;
font-size: 11px !important;
}
/* Stat grid 3 cột */
.stat-grid {
grid-template-columns: repeat(3,1fr) !important;
gap: 6px !important;
}
.stat { padding: 8px 10px !important; }
.stat-val { font-size: 18px !important; }
/* Schedule 7 cột khi landscape */
.sg {
grid-template-columns: repeat(7, minmax(0,1fr)) !important;
gap: 3px !important;
}
.sg-hd { font-size: 8px !important; padding: 3px 2px !important; }
.sg-shift { padding: 4px 2px !important; }
.sg-lbl { font-size: 8px !important; }
/* Rotate hint ẩn khi landscape */
.rotate-hint { display: none !important; }
/* Chat bubble */
.bubble-dock { bottom: 8px !important; right: 8px !important; }
/* Dashboard: 2 cột khi landscape vì có đủ ngang */
.dash-2 {
grid-template-columns: 1fr 1fr !important;
}
}