/* ========================================================= refactor1q — Admin Messenger page (redesign) + app attendance Scoped to #v2106MessengerPage.pm-page and .pm-modal. The admin theme sets !important on inputs / tables, so these selectors carry one more class. ========================================================= */ #v2106MessengerPage.pm-page{ --pm-gold:#e3aa4f;--pm-gold-deep:#b77b1c;--pm-gold-soft:#fdf3e1; --pm-ink:#1f2530;--pm-text:#3b4250;--pm-muted:#7a818c;--pm-line:#e9ebef;--pm-soft:#f6f7f9;--pm-card:#fff; --green:#15994f;--green-soft:#e6f6ec;--blue:#2563eb;--blue-soft:#e8f0fe;--orange:#e7710b;--orange-soft:#fff0e1; --purple:#7c3aed;--purple-soft:#f1eafe;--slate:#64748b;--slate-soft:#eef1f5;--amber:#c77a06;--amber-soft:#fff5dc; --red:#dc2626;--red-soft:#fdecec;--indigo:#4f46e5;--indigo-soft:#eef0ff; max-width:1600px;margin:0 auto;color:var(--pm-text);font-size:14px; } #v2106MessengerPage.pm-page *{box-sizing:border-box} #v2106MessengerPage.pm-page .pm-i{width:18px;height:18px;flex:none;display:inline-block;vertical-align:middle} #v2106MessengerPage.pm-page [hidden]{display:none!important} /* ---------- header ---------- */ #v2106MessengerPage.pm-page .pm-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 16px} #v2106MessengerPage.pm-page .pm-tabs{display:flex;gap:6px;flex-wrap:wrap;padding:5px;background:#fff;border:1px solid var(--pm-line);border-radius:14px} #v2106MessengerPage.pm-page .pm-tab{display:inline-flex;align-items:center;gap:8px;height:42px;margin:0;padding:0 16px!important;border:0!important;border-radius:10px!important;background:transparent!important;color:var(--pm-muted)!important;font-size:14px!important;font-weight:800!important;cursor:pointer;white-space:nowrap} #v2106MessengerPage.pm-page .pm-tab:hover{background:var(--pm-soft)!important;color:var(--pm-ink)!important} #v2106MessengerPage.pm-page .pm-tab.active{background:var(--pm-gold)!important;color:#241a08!important} #v2106MessengerPage.pm-page .pm-head-actions{display:flex;gap:10px;flex-wrap:wrap} #v2106MessengerPage.pm-page .pm-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;margin:0;padding:0 16px!important;border-radius:11px!important;font-size:14px!important;font-weight:800!important;cursor:pointer;white-space:nowrap;width:auto} #v2106MessengerPage.pm-page .pm-btn.gold{background:var(--pm-gold)!important;border:1px solid var(--pm-gold)!important;color:#241a08!important} #v2106MessengerPage.pm-page .pm-btn.gold:hover{background:#d99b3a!important} #v2106MessengerPage.pm-page .pm-btn.ghost{background:#fff!important;border:1px solid #dcdfe5!important;color:var(--pm-ink)!important} #v2106MessengerPage.pm-page .pm-btn.ghost:hover{border-color:#b9bec7!important} #v2106MessengerPage.pm-page .pm-btn.icon-only{width:42px;padding:0!important} #v2106MessengerPage.pm-page .pm-btn:disabled{opacity:.55;cursor:default} /* ---------- stat cards ---------- */ #v2106MessengerPage.pm-page .pm-stats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin:0 0 14px} #v2106MessengerPage.pm-page .pm-stat{display:flex;align-items:center;gap:12px;min-width:0;margin:0;padding:14px!important;background:#fff!important;border:1px solid var(--pm-line)!important;border-radius:16px!important;text-align:left;cursor:pointer;color:inherit!important;font-weight:400!important;transition:border-color .15s,transform .15s} #v2106MessengerPage.pm-page .pm-stat:hover{border-color:#cfd3da!important;transform:translateY(-1px)} #v2106MessengerPage.pm-page .pm-stat.active{border-color:var(--pm-gold)!important;box-shadow:0 0 0 3px var(--pm-gold-soft)!important} #v2106MessengerPage.pm-page div.pm-stat{cursor:default} #v2106MessengerPage.pm-page div.pm-stat:hover{transform:none;border-color:var(--pm-line)!important} #v2106MessengerPage.pm-page .pm-ico{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:13px} #v2106MessengerPage.pm-page .pm-ico .pm-i{width:22px;height:22px} #v2106MessengerPage.pm-page .pm-stat-text{min-width:0;display:flex;flex-direction:column;gap:1px} #v2106MessengerPage.pm-page .pm-stat small{color:var(--pm-muted);font-size:12px;font-weight:700;line-height:1.3} #v2106MessengerPage.pm-page .pm-stat b{color:var(--pm-ink);font-size:24px;line-height:1.15;font-weight:900} #v2106MessengerPage.pm-page .pm-stat em{font-style:normal;color:var(--pm-muted);font-size:11px;line-height:1.3} .pm-page .tone-green,.pm-modal .tone-green{background:var(--green-soft);color:var(--green)} .pm-page .tone-blue,.pm-modal .tone-blue{background:var(--blue-soft);color:var(--blue)} .pm-page .tone-orange,.pm-modal .tone-orange{background:var(--orange-soft);color:var(--orange)} .pm-page .tone-purple,.pm-modal .tone-purple{background:var(--purple-soft);color:var(--purple)} .pm-page .tone-slate,.pm-modal .tone-slate{background:var(--slate-soft);color:var(--slate)} .pm-page .tone-amber,.pm-modal .tone-amber{background:var(--amber-soft);color:var(--amber)} .pm-page .tone-red,.pm-modal .tone-red{background:var(--red-soft);color:var(--red)} .pm-page .tone-indigo,.pm-modal .tone-indigo{background:var(--indigo-soft);color:var(--indigo)} .pm-page .tone-gray,.pm-modal .tone-gray{background:#eceef1;color:#8a9099} .pm-page .tone-gold,.pm-modal .tone-gold{background:var(--pm-gold-soft);color:var(--pm-gold-deep)} /* ---------- main card ---------- */ #v2106MessengerPage.pm-page .pm-card{background:#fff;border:1px solid var(--pm-line);border-radius:18px;margin:0 0 14px;overflow:hidden} #v2106MessengerPage.pm-page .pm-status-tabs{display:flex;gap:4px;padding:10px 12px 0;overflow-x:auto;scrollbar-width:thin} #v2106MessengerPage.pm-page .pm-stab{display:inline-flex;align-items:center;gap:8px;height:40px;margin:0;padding:0 14px!important;border:0!important;border-radius:10px!important;background:transparent!important;color:var(--pm-muted)!important;font-size:14px!important;font-weight:700!important;cursor:pointer;white-space:nowrap} #v2106MessengerPage.pm-page .pm-stab:hover{background:var(--pm-soft)!important;color:var(--pm-ink)!important} #v2106MessengerPage.pm-page .pm-stab .dot{width:8px;height:8px;border-radius:50%;background:currentColor} #v2106MessengerPage.pm-page .pm-stab b{display:inline-grid;place-items:center;min-width:24px;height:22px;padding:0 7px;border-radius:999px;background:var(--pm-soft);color:var(--pm-ink);font-size:12px} #v2106MessengerPage.pm-page .pm-stab.active{background:var(--pm-gold)!important;color:#241a08!important} #v2106MessengerPage.pm-page .pm-stab.active b{background:#241a08;color:#fff} #v2106MessengerPage.pm-page .pm-stab[data-tone=green] .dot{color:var(--green)} #v2106MessengerPage.pm-page .pm-stab[data-tone=orange] .dot{color:var(--orange)} #v2106MessengerPage.pm-page .pm-stab[data-tone=slate] .dot{color:#a0a7b1} #v2106MessengerPage.pm-page .pm-stab[data-tone=purple] .dot{color:var(--purple)} #v2106MessengerPage.pm-page .pm-stab[data-tone=gray] .dot{color:#c3c7cd} #v2106MessengerPage.pm-page .pm-stab.active .dot{color:#241a08} #v2106MessengerPage.pm-page .pm-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px} #v2106MessengerPage.pm-page .pm-search{position:relative;flex:1 1 260px;min-width:200px;margin:0} #v2106MessengerPage.pm-page .pm-search .pm-i{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:#8b919b;pointer-events:none} #v2106MessengerPage.pm-page .pm-toolbar input,#v2106MessengerPage.pm-page .pm-toolbar select, #v2106MessengerPage.pm-page .pm-att-controls input,#v2106MessengerPage.pm-page .pm-att-controls select, #v2106MessengerPage.pm-page .pm-foot select{height:42px;margin:0!important;padding:0 12px;border:1px solid #dcdfe5!important;border-radius:11px!important;background:#fff!important;color:var(--pm-ink)!important;font-size:14px!important;width:auto} #v2106MessengerPage.pm-page .pm-search input{width:100%;padding-left:40px!important} #v2106MessengerPage.pm-page .pm-toolbar select{min-width:170px} #v2106MessengerPage.pm-page .pm-bulk{display:flex;gap:6px;align-items:center} #v2106MessengerPage.pm-page .pm-bulk select{min-width:150px} #v2106MessengerPage.pm-page .pm-updated{margin-left:auto;color:var(--pm-muted);font-size:12px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap} #v2106MessengerPage.pm-page .pm-updated .pm-i{width:14px;height:14px} #v2106MessengerPage.pm-page .pm-warn{display:flex;gap:10px;align-items:flex-start;margin:0 12px 12px;padding:10px 12px;border-radius:12px;background:var(--amber-soft);color:#7a4a00;font-size:13px;line-height:1.5} #v2106MessengerPage.pm-page .pm-warn .pm-i{color:var(--amber);margin-top:1px} /* ---------- table ---------- */ #v2106MessengerPage.pm-page .pm-table-wrap{overflow-x:auto;border-top:1px solid var(--pm-line)} #v2106MessengerPage.pm-page table.pm-table{width:100%;min-width:960px;border-collapse:separate;border-spacing:0;background:#fff;font-size:14px} #v2106MessengerPage.pm-page .pm-table th{position:static!important;padding:12px 10px!important;background:#f7f8fa!important;color:#6f7682!important;font-size:12px!important;font-weight:800!important;text-align:left;white-space:nowrap;border-bottom:1px solid var(--pm-line)!important} #v2106MessengerPage.pm-page .pm-table th small{display:block;font-weight:600;color:#9aa0a9;font-size:11px} #v2106MessengerPage.pm-page .pm-table td{padding:12px 10px!important;color:var(--pm-text)!important;border-bottom:1px solid #f0f1f4!important;vertical-align:middle;background:#fff} #v2106MessengerPage.pm-page .pm-table tbody tr:hover td{background:#fcfbf8} #v2106MessengerPage.pm-page .pm-table tbody tr:last-child td{border-bottom:0!important} #v2106MessengerPage.pm-page .pm-table td small{display:block;margin-top:2px;color:var(--pm-muted);font-size:12px;line-height:1.35;white-space:nowrap} #v2106MessengerPage.pm-page .pm-table td.pm-jobcell small{white-space:normal;max-width:170px} #v2106MessengerPage.pm-page .pm-table input[type=checkbox]{width:17px;height:17px;margin:0!important;accent-color:var(--pm-gold-deep)} #v2106MessengerPage.pm-page .pm-check{width:40px} #v2106MessengerPage.pm-page tr.is-inactive td{background:#fbfbfc} #v2106MessengerPage.pm-page tr.is-inactive .pm-person b,#v2106MessengerPage.pm-page tr.is-inactive .pm-avatar img{opacity:.55} #v2106MessengerPage.pm-page .pm-person{display:flex;align-items:center;gap:10px;min-width:160px} #v2106MessengerPage.pm-page .pm-avatar{position:relative;flex:none;width:46px;height:46px} #v2106MessengerPage.pm-page .pm-avatar img{width:46px!important;height:46px!important;border-radius:50%!important;object-fit:cover;border:2px solid #fff;box-shadow:0 0 0 1px var(--pm-line)!important;background:#f1f5f9;display:block} #v2106MessengerPage.pm-page .pm-presence{position:absolute;right:0;bottom:1px;width:13px;height:13px;border-radius:50%;border:2px solid #fff;background:#c3c8cf} #v2106MessengerPage.pm-page .pm-presence.on{background:#22c55e;box-shadow:0 0 0 0 rgba(34,197,94,.55);animation:pmPulse 2s infinite} @keyframes pmPulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.5)}70%{box-shadow:0 0 0 7px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}} #v2106MessengerPage.pm-page .pm-person b{display:block;color:var(--pm-ink);font-size:15px;font-weight:800;line-height:1.3} #v2106MessengerPage.pm-page .pm-person small{display:block;color:var(--pm-muted);font-size:12px;white-space:nowrap} #v2106MessengerPage.pm-page .pm-type{display:inline-flex;align-items:center;gap:4px;margin-top:4px;padding:2px 8px 2px 6px;border-radius:999px;font-size:12px;font-weight:800;white-space:nowrap} #v2106MessengerPage.pm-page .pm-type .pm-i{width:13px;height:13px} #v2106MessengerPage.pm-page .pm-type.urgent{background:var(--orange-soft);color:var(--orange)} #v2106MessengerPage.pm-page .pm-type.replace{background:var(--blue-soft);color:var(--blue)} #v2106MessengerPage.pm-page .pm-jobs .pm-gps{padding:3px 8px;font-size:12px} #v2106MessengerPage.pm-page td small .pm-link{font-size:12px!important} #v2106MessengerPage.pm-page .pm-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;font-size:13px;font-weight:800;white-space:nowrap} #v2106MessengerPage.pm-page .pm-pill .pm-i{width:15px;height:15px} #v2106MessengerPage.pm-page .pm-time{display:inline-flex;align-items:center;gap:6px;font-size:16px;font-weight:900;color:var(--pm-ink);white-space:nowrap} #v2106MessengerPage.pm-page .pm-time .pm-i{width:16px;height:16px} #v2106MessengerPage.pm-page .pm-time.in .pm-i{color:var(--green)} #v2106MessengerPage.pm-page .pm-time.out .pm-i{color:var(--purple)} #v2106MessengerPage.pm-page td small.pm-late{display:inline-block;margin-top:3px;padding:1px 8px;border-radius:999px;background:var(--red-soft);color:var(--red);font-weight:800} #v2106MessengerPage.pm-page td small.pm-ontime{color:var(--green)} #v2106MessengerPage.pm-page td small.pm-timeout{color:var(--amber)} #v2106MessengerPage.pm-page .pm-live{display:inline-flex;align-items:center;gap:6px;color:var(--green);font-weight:800;white-space:nowrap} #v2106MessengerPage.pm-page .pm-live .pm-i{width:16px;height:16px} #v2106MessengerPage.pm-page .pm-dash{color:#b3b8c0} #v2106MessengerPage.pm-page .pm-dur{font-size:15px;font-weight:900;color:var(--pm-ink);white-space:nowrap} #v2106MessengerPage.pm-page .pm-jobs{display:flex;align-items:center;gap:8px;white-space:nowrap} #v2106MessengerPage.pm-page .pm-jobs b{color:var(--pm-ink);font-size:15px} #v2106MessengerPage.pm-page .pm-bar{position:relative;display:inline-block;width:60px;height:6px;border-radius:9px;background:#edeff2;overflow:hidden} #v2106MessengerPage.pm-page .pm-bar i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,#34c46f,#15994f);border-radius:9px} #v2106MessengerPage.pm-page .pm-link{margin:0;padding:0!important;border:0!important;background:none!important;color:var(--blue)!important;font-size:14px!important;font-weight:800!important;cursor:pointer;text-decoration:underline;text-underline-offset:3px;white-space:nowrap} #v2106MessengerPage.pm-page .pm-gps{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:999px;background:var(--red-soft);color:var(--red);font-weight:800;text-decoration:none;white-space:nowrap} #v2106MessengerPage.pm-page .pm-gps .pm-i{width:15px;height:15px} #v2106MessengerPage.pm-page .pm-actions{white-space:nowrap;text-align:right} #v2106MessengerPage.pm-page .pm-actions-in{display:inline-grid;grid-template-columns:repeat(4,34px);gap:6px} @media (max-width:1500px){#v2106MessengerPage.pm-page .pm-actions-in{grid-template-columns:repeat(2,34px)}} #v2106MessengerPage.pm-page .pm-ib{display:inline-grid;place-items:center;width:34px;height:34px;margin:0;padding:0!important;border-radius:10px!important;border:1px solid transparent!important;cursor:pointer;background:var(--pm-soft)!important;color:#4b5261!important} #v2106MessengerPage.pm-page .pm-ib .pm-i{width:17px;height:17px} #v2106MessengerPage.pm-page .pm-ib:hover{filter:brightness(.95);border-color:currentColor!important} #v2106MessengerPage.pm-page .pm-ib.blue{background:var(--blue-soft)!important;color:var(--blue)!important} #v2106MessengerPage.pm-page .pm-ib.gold{background:var(--pm-gold-soft)!important;color:var(--pm-gold-deep)!important} #v2106MessengerPage.pm-page .pm-ib.amber{background:var(--amber-soft)!important;color:var(--amber)!important} #v2106MessengerPage.pm-page .pm-ib.green{background:var(--green-soft)!important;color:var(--green)!important} #v2106MessengerPage.pm-page .pm-ib.red{background:var(--red-soft)!important;color:var(--red)!important} #v2106MessengerPage.pm-page .pm-empty{padding:42px 16px;text-align:center;color:var(--pm-muted)} #v2106MessengerPage.pm-page .pm-empty .pm-ico{margin:0 auto 10px;width:56px;height:56px;border-radius:18px} #v2106MessengerPage.pm-page .pm-empty b{display:block;color:var(--pm-ink);font-size:16px;margin-bottom:4px} #v2106MessengerPage.pm-page .pm-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 14px;border-top:1px solid var(--pm-line);color:var(--pm-muted);font-size:13px} #v2106MessengerPage.pm-page .pm-foot-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap} #v2106MessengerPage.pm-page .pm-foot select{height:38px;min-width:0} #v2106MessengerPage.pm-page .pm-pager{display:flex;gap:6px;align-items:center} #v2106MessengerPage.pm-page .pm-page-btn{display:inline-grid;place-items:center;min-width:38px;height:38px;margin:0;padding:0 8px!important;border:1px solid #dcdfe5!important;border-radius:10px!important;background:#fff!important;color:var(--pm-ink)!important;font-size:14px!important;font-weight:800!important;cursor:pointer} #v2106MessengerPage.pm-page .pm-page-btn.active{background:var(--pm-gold)!important;border-color:var(--pm-gold)!important;color:#241a08!important} #v2106MessengerPage.pm-page .pm-page-btn:disabled{opacity:.45;cursor:default} #v2106MessengerPage.pm-page .pm-page-btn .pm-i{width:16px;height:16px} #v2106MessengerPage.pm-page .pm-hint{display:flex;align-items:center;gap:8px;margin:2px 4px 16px;color:var(--pm-muted);font-size:13px;line-height:1.5} #v2106MessengerPage.pm-page .pm-hint .pm-i{color:var(--green)} /* ---------- attendance ---------- */ #v2106MessengerPage.pm-page .pm-rule{display:flex;align-items:center;gap:14px;padding:14px 16px;margin:0 0 14px;border-radius:18px;background:linear-gradient(100deg,#fff8ea,#fff);border:1px solid #f3dfb9} #v2106MessengerPage.pm-page .pm-rule b{display:block;color:var(--pm-ink);font-size:15px} #v2106MessengerPage.pm-page .pm-rule span{color:#6b6252;font-size:13px;line-height:1.55} #v2106MessengerPage.pm-page .pm-rule-steps{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px} #v2106MessengerPage.pm-page .pm-rule-steps em{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-style:normal;font-size:12px;font-weight:800} #v2106MessengerPage.pm-page .pm-rule-steps .pm-i{width:14px;height:14px} #v2106MessengerPage.pm-page .pm-att-controls{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;padding:14px} #v2106MessengerPage.pm-page .pm-field{display:flex;flex-direction:column;gap:5px;margin:0;font-size:12px!important;font-weight:800!important;color:var(--pm-muted)!important} #v2106MessengerPage.pm-page .pm-quick{display:flex;gap:4px;padding:4px;border-radius:12px;background:var(--pm-soft)} #v2106MessengerPage.pm-page .pm-quick button{height:34px;margin:0;padding:0 12px!important;border:0!important;border-radius:9px!important;background:transparent!important;color:var(--pm-muted)!important;font-size:13px!important;font-weight:800!important;cursor:pointer;white-space:nowrap} #v2106MessengerPage.pm-page .pm-quick button.active{background:#fff!important;color:var(--pm-ink)!important;box-shadow:0 1px 3px rgba(20,24,31,.12)!important} #v2106MessengerPage.pm-page .pm-check-label{display:inline-flex;align-items:center;gap:7px;height:42px;margin:0;color:var(--pm-text)!important;font-size:13px!important;font-weight:700!important;cursor:pointer;white-space:nowrap} #v2106MessengerPage.pm-page .pm-check-label input{width:17px!important;height:17px!important;margin:0!important;accent-color:var(--pm-gold-deep)} #v2106MessengerPage.pm-page .pm-att-controls .pm-spacer{flex:1} #v2106MessengerPage.pm-page .pm-att-stats{grid-template-columns:repeat(5,minmax(0,1fr))} #v2106MessengerPage.pm-page table.pm-att-table{min-width:960px} #v2106MessengerPage.pm-page .pm-date b{display:block;color:var(--pm-ink);font-weight:800;white-space:nowrap} #v2106MessengerPage.pm-page tr.is-absent td{background:#fffafa} #v2106MessengerPage.pm-page .pm-tl{position:relative;width:220px;height:14px;border-radius:7px;background:repeating-linear-gradient(90deg,#eef0f3 0 calc(25% - 1px),#dfe2e7 calc(25% - 1px) 25%)} #v2106MessengerPage.pm-page .pm-tl i{position:absolute;top:0;bottom:0;min-width:3px;border-radius:7px;background:linear-gradient(90deg,#3ccf7a,#15994f)} #v2106MessengerPage.pm-page .pm-tl i.timeout{background:linear-gradient(90deg,#f7c552,#e3a008)} #v2106MessengerPage.pm-page .pm-tl i.online{background:linear-gradient(90deg,#60a5fa,#2563eb)} #v2106MessengerPage.pm-page .pm-tl-scale{display:flex;justify-content:space-between;width:220px;margin-top:3px;color:#a3a9b2;font-size:10px} /* ---------- day detail modal (appended to body) ---------- */ .pm-modal{--pm-gold:#e3aa4f;--pm-gold-deep:#b77b1c;--pm-gold-soft:#fdf3e1;--pm-ink:#1f2530;--pm-text:#3b4250;--pm-muted:#7a818c;--pm-line:#e9ebef;--pm-soft:#f6f7f9; --green:#15994f;--green-soft:#e6f6ec;--blue:#2563eb;--blue-soft:#e8f0fe;--orange:#e7710b;--orange-soft:#fff0e1;--purple:#7c3aed;--purple-soft:#f1eafe;--slate:#64748b;--slate-soft:#eef1f5;--amber:#c77a06;--amber-soft:#fff5dc;--red:#dc2626;--red-soft:#fdecec;--indigo:#4f46e5;--indigo-soft:#eef0ff; position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(17,20,26,.5);color:var(--pm-text);font-size:14px} .pm-modal *{box-sizing:border-box} .pm-modal .pm-i{width:18px;height:18px;flex:none;display:inline-block;vertical-align:middle} .pm-modal-box{width:min(720px,100%);max-height:calc(100vh - 32px);overflow:auto;background:#fff;border-radius:20px;box-shadow:0 24px 60px rgba(0,0,0,.25)} .pm-modal-head{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--pm-line);position:sticky;top:0;background:#fff;z-index:1} .pm-modal-head img{width:48px;height:48px;border-radius:50%;object-fit:cover;background:#f1f5f9} .pm-modal-head b{display:block;color:var(--pm-ink);font-size:17px} .pm-modal-head small{color:var(--pm-muted);font-size:13px} .pm-modal-head .pm-x{margin:0 0 0 auto;width:38px;height:38px;padding:0;display:grid;place-items:center;border:0;border-radius:10px;background:var(--pm-soft);color:var(--pm-ink);cursor:pointer} .pm-modal-body{padding:16px 18px 20px} .pm-chips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:16px} .pm-chip{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--pm-line);border-radius:14px} .pm-chip .pm-ico{display:grid;place-items:center;width:36px;height:36px;flex:none;border-radius:11px} .pm-chip small{display:block;color:var(--pm-muted);font-size:11px;font-weight:700} .pm-chip b{display:block;color:var(--pm-ink);font-size:16px;white-space:nowrap} .pm-modal h4{display:flex;align-items:center;gap:8px;margin:16px 0 8px;color:var(--pm-ink);font-size:15px} .pm-bigtl{position:relative;height:28px;border-radius:9px;background:#f0f2f5;overflow:hidden} .pm-bigtl i{position:absolute;top:0;bottom:0;min-width:4px;background:linear-gradient(90deg,#3ccf7a,#15994f)} .pm-bigtl i.timeout{background:linear-gradient(90deg,#f7c552,#e3a008)} .pm-bigtl i.online{background:linear-gradient(90deg,#60a5fa,#2563eb)} .pm-bigtl s{position:absolute;top:0;bottom:0;width:1px;background:#dde1e6} .pm-bigtl-scale{position:relative;height:16px;margin-top:4px;color:#98a0aa;font-size:11px} .pm-bigtl-scale span{position:absolute;transform:translateX(-50%)} .pm-legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:6px;color:var(--pm-muted);font-size:12px} .pm-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px} .pm-sess{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px} .pm-sess li{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--pm-line);border-radius:12px} .pm-sess .no{display:grid;place-items:center;width:28px;height:28px;flex:none;border-radius:8px;background:var(--pm-soft);font-weight:900;color:var(--pm-ink);font-size:12px} .pm-sess .t{font-weight:900;color:var(--pm-ink);white-space:nowrap} .pm-sess .d{margin-left:auto;color:var(--pm-muted);font-size:13px;white-space:nowrap} .pm-sess .k{padding:2px 9px;border-radius:999px;font-size:12px;font-weight:800;white-space:nowrap} .pm-events{list-style:none;margin:0;padding:0 0 0 14px;border-left:2px solid var(--pm-line)} .pm-events li{position:relative;padding:6px 0 6px 12px} .pm-events li::before{content:"";position:absolute;left:-20px;top:12px;width:10px;height:10px;border-radius:50%;background:var(--pm-gold);box-shadow:0 0 0 3px #fff} .pm-events li.app::before{background:var(--green)} .pm-events .t{display:inline-block;min-width:48px;font-weight:900;color:var(--pm-ink)} .pm-events a{margin-left:6px;color:var(--red);font-weight:800;text-decoration:none} .pm-events small{color:var(--pm-muted)} .pm-modal .pm-muted{color:var(--pm-muted)} /* ---------- responsive ---------- */ @media (max-width:1500px){ /* laptop screens (1280–1440): keep every column, including จัดการ, on screen */ #v2106MessengerPage.pm-page .pm-table th,#v2106MessengerPage.pm-page .pm-table td{padding-left:7px!important;padding-right:7px!important} #v2106MessengerPage.pm-page .pm-avatar,#v2106MessengerPage.pm-page .pm-avatar img{width:40px!important;height:40px!important} #v2106MessengerPage.pm-page .pm-pill{padding:5px 9px} #v2106MessengerPage.pm-page .pm-table td.pm-jobcell small{max-width:150px} #v2106MessengerPage.pm-page .pm-tl,#v2106MessengerPage.pm-page .pm-tl-scale{width:160px} #v2106MessengerPage.pm-page .pm-att-table td.pm-incell small{white-space:normal;max-width:120px} } @media (max-width:1280px){ #v2106MessengerPage.pm-page .pm-stats{grid-template-columns:repeat(3,minmax(0,1fr))} #v2106MessengerPage.pm-page .pm-att-stats{grid-template-columns:repeat(3,minmax(0,1fr))} } @media (max-width:760px){ #v2106MessengerPage.pm-page .pm-head{flex-direction:column;align-items:stretch} #v2106MessengerPage.pm-page .pm-tabs{overflow-x:auto;flex-wrap:nowrap} #v2106MessengerPage.pm-page .pm-head-actions .pm-btn{flex:1} #v2106MessengerPage.pm-page .pm-stats,#v2106MessengerPage.pm-page .pm-att-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} #v2106MessengerPage.pm-page .pm-stat{padding:10px!important;gap:8px} #v2106MessengerPage.pm-page .pm-ico{width:36px;height:36px} #v2106MessengerPage.pm-page .pm-stat b{font-size:20px} #v2106MessengerPage.pm-page .pm-toolbar select,#v2106MessengerPage.pm-page .pm-bulk{flex:1 1 100%} #v2106MessengerPage.pm-page .pm-bulk select{flex:1} #v2106MessengerPage.pm-page .pm-updated{margin-left:0} #v2106MessengerPage.pm-page table.pm-table{min-width:0} #v2106MessengerPage.pm-page .pm-table thead{display:none} #v2106MessengerPage.pm-page .pm-table,#v2106MessengerPage.pm-page .pm-table tbody{display:block} #v2106MessengerPage.pm-page .pm-table tr{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;padding:14px;border-bottom:1px solid var(--pm-line)} #v2106MessengerPage.pm-page .pm-table td{display:block;padding:0!important;border:0!important;background:transparent!important;min-width:0} #v2106MessengerPage.pm-page .pm-table td[data-label]::before{content:attr(data-label);display:block;margin-bottom:2px;color:#9aa0a9;font-size:11px;font-weight:800} #v2106MessengerPage.pm-page .pm-table td.pm-wide{grid-column:1/-1} #v2106MessengerPage.pm-page .pm-table td.pm-wide::before{display:none} #v2106MessengerPage.pm-page .pm-table td.pm-check{position:absolute;opacity:0;pointer-events:none} #v2106MessengerPage.pm-page .pm-table tr{position:relative} #v2106MessengerPage.pm-page .pm-actions{text-align:left} #v2106MessengerPage.pm-page .pm-person{min-width:0} #v2106MessengerPage.pm-page .pm-tl,#v2106MessengerPage.pm-page .pm-tl-scale{width:100%} #v2106MessengerPage.pm-page .pm-att-controls{align-items:stretch} #v2106MessengerPage.pm-page .pm-att-controls .pm-field{flex:1 1 45%} #v2106MessengerPage.pm-page .pm-att-controls .pm-field input,#v2106MessengerPage.pm-page .pm-att-controls .pm-field select{width:100%} #v2106MessengerPage.pm-page .pm-quick{flex:1 1 100%;overflow-x:auto} #v2106MessengerPage.pm-page .pm-foot{justify-content:center} .pm-chips{grid-template-columns:repeat(2,minmax(0,1fr))} } /* ========================================================= V21.15.69 — หน้า Messenger ตามภาพตัวอย่างของเจ้าของ แท็บขีดเส้นใต้ · การ์ดสรุป 4 ใบ · การ์ด "รายชื่อพนักงาน" · คอลัมน์เข้างาน (เขียว) / ออกงาน (ม่วง) กฎของ Admin บังคับ font-size:16px / font-weight:400 ด้วย 2 ID (#admin#admin.v21-admin *) บล็อกนี้จึงขึ้นต้นด้วย 3 ID ทุกกฎที่ตั้งขนาด/น้ำหนักตัวอักษร ========================================================= */ #v2106MessengerPage.pm-page{ --mm-ink:#1d2025;--mm-muted:#747981;--mm-line:#e8e6e0;--mm-row:#efede8;--mm-soft:#f5f4ef;--mm-head:#fafaf7; --mm-gold:#e3b13c;--mm-gold-hover:#d6a22c;--mm-gold-ink:#7f5d15;--mm-gold-tint:#faf1d9; --mm-in:#23703f;--mm-in-bg:#f2f8f3;--mm-in-head:#e4f0e6;--mm-in-hover:#eaf3ec; --mm-out:#6b3f93;--mm-out-bg:#f7f3fb;--mm-out-head:#ece4f5;--mm-out-hover:#f1ebf8; --mm-red:#c0392b; } /* header: tabs with an underline, actions on the right */ #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-head{align-items:flex-end;gap:12px;margin:0 0 18px;border-bottom:1px solid var(--mm-line)} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-tabs{gap:28px;padding:0;background:none;border:0;border-radius:0} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-tab{height:50px;margin:0 0 -1px;padding:0 2px!important;border:0!important;border-bottom:3px solid transparent!important;border-radius:0!important;background:none!important;color:var(--mm-muted)!important;font-size:16px!important;font-weight:500!important} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-tab *{font-weight:inherit!important} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-tab:hover{color:var(--mm-ink)!important;background:none!important} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-tab.active{color:var(--mm-ink)!important;border-bottom-color:var(--mm-gold)!important;font-weight:700!important} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-tab:focus-visible{outline:2px solid var(--mm-gold);outline-offset:2px} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-head-actions{padding:0 0 10px} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-btn{height:44px;border-radius:10px!important;font-size:15px!important;font-weight:600!important} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-btn.gold{background:var(--mm-gold)!important;border-color:var(--mm-gold)!important;color:#1f1a0e!important} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-btn.gold:hover{background:var(--mm-gold-hover)!important} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-btn.ghost{border-color:#dcd9d0!important} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-btn.sm{height:34px;padding:0 12px!important;font-size:13px!important} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-btn.sm .pm-i{width:15px;height:15px} /* 4 summary cards */ #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-stats4{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0 0 18px} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-stats4 .pm-stat{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:6px;padding:18px 20px!important;border:1px solid var(--mm-line)!important;border-radius:12px!important;background:#fff!important} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-stats4 .pm-stat:hover{transform:none;border-color:#d4d0c4!important} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-stats4 .pm-stat.active{border-color:var(--mm-gold)!important;box-shadow:0 0 0 3px var(--mm-gold-tint)!important} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-stats4 .pm-stat:focus-visible{outline:2px solid var(--mm-gold);outline-offset:2px} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-stats4 .pm-stat small{color:var(--mm-muted)!important;font-size:15px!important;font-weight:500!important} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-stats4 .pm-stat b{color:var(--mm-ink)!important;font-size:36px!important;font-weight:600!important;line-height:1.1;font-variant-numeric:tabular-nums} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-stats4 .pm-stat em, #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-stats4 .pm-stat em *{color:var(--mm-muted)!important;font-size:13px!important;font-style:normal} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-stats4 .pm-stat em .pm-red{color:var(--mm-red)!important;font-weight:600!important} /* list card */ #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-list{border-color:var(--mm-line);border-radius:14px} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-list-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:18px 20px 2px} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-list-head h3{margin:0;color:var(--mm-ink)!important;font-size:20px!important;font-weight:700!important} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-list-meta{display:flex;align-items:center;gap:8px} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-list-meta, #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-list-meta *{color:var(--mm-muted);font-size:14px!important;font-variant-numeric:tabular-nums} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-online{display:inline-flex;align-items:center;gap:6px} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-online i{width:8px;height:8px;border-radius:50%;background:#22a55a} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-online b{color:var(--mm-ink)!important;font-weight:600!important} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-refresh{display:inline-grid;place-items:center;width:34px;height:34px;margin:0;padding:0!important;border:0!important;border-radius:8px!important;background:none!important;color:var(--mm-muted)!important;cursor:pointer} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-refresh:hover{background:var(--mm-soft)!important;color:var(--mm-ink)!important} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-refresh:disabled .pm-i{animation:pmSpin 1s linear infinite} @keyframes pmSpin{to{transform:rotate(360deg)}} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-toolbar{flex-wrap:nowrap;gap:12px;padding:14px 20px 18px} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-search{flex:1 1 auto;min-width:0} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-toolbar input, #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-toolbar select{height:46px;border-color:#dcd9d0!important;border-radius:10px!important;font-size:15px!important} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-toolbar select{flex:none;min-width:160px} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-bulkbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 20px 14px;padding:8px 12px;border:1px solid #efe0b3;border-radius:10px;background:#fcf6e6} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-bulkbar b{margin-right:4px;color:var(--mm-ink)!important;font-size:14px!important;font-weight:600!important} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-textbtn{margin:0 0 0 auto;padding:6px 8px!important;border:0!important;background:none!important;color:var(--mm-gold-ink)!important;font-size:13px!important;text-decoration:underline;text-underline-offset:3px;cursor:pointer} /* roster table */ #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-table-wrap{border-top:1px solid var(--mm-line)} #admin#admin.v21-admin #v2106MessengerPage.pm-page table.pm-roster{min-width:940px} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-roster th{padding:16px 14px!important;background:var(--mm-head)!important;color:var(--mm-muted)!important;font-size:14px!important;font-weight:500!important;border-bottom:1px solid var(--mm-line)!important;vertical-align:middle} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-roster td{padding:16px 14px!important;border-bottom:1px solid var(--mm-row)!important} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-roster tbody tr:hover td{background:#fcfbf7} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-table th.pm-col-in, #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-table th.pm-col-out{text-align:center;font-size:17px!important;font-weight:700!important} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-table th.pm-col-in{background:var(--mm-in-head)!important;color:var(--mm-in)!important} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-table th.pm-col-out{background:var(--mm-out-head)!important;color:var(--mm-out)!important} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-table th.pm-col-in small, #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-table th.pm-col-out small{color:inherit!important;opacity:.75;font-size:12px!important;font-weight:500!important} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-table td.pm-col-in{background:var(--mm-in-bg);text-align:center} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-table td.pm-col-out{background:var(--mm-out-bg);text-align:center} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-table tbody tr:hover td.pm-col-in{background:var(--mm-in-hover)} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-table tbody tr:hover td.pm-col-out{background:var(--mm-out-hover)} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-roster td.pm-col-in{width:16%} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-roster td.pm-col-out{width:14%} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-roster th.pm-col-act{text-align:right} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-big{display:block;font-size:28px!important;font-weight:600!important;line-height:1.15;font-variant-numeric:tabular-nums;white-space:nowrap} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-big.in{color:var(--mm-in)!important} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-big.out{color:var(--mm-out)!important} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-table td small{display:block;margin-top:4px;color:var(--mm-muted)!important;font-size:13px!important;white-space:nowrap} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-table td small.pm-red{color:var(--mm-red)!important;font-weight:500!important} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-table td .pm-dash{display:block;color:#a7aaaf;font-size:22px!important;line-height:1.2} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-forgot{display:inline-block;padding:3px 9px;border-radius:6px;background:#fff1d2;color:#8a5200!important;font-size:13px!important;font-weight:600!important;white-space:nowrap} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-roster .pm-avatar, #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-roster .pm-avatar img{width:44px!important;height:44px!important} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-person{gap:14px;min-width:190px} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-person-text b{color:var(--mm-ink)!important;font-size:17px!important;font-weight:600!important} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-person-text small{margin-top:3px;color:var(--mm-muted)!important;font-size:13px!important} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-roster .pm-pill{padding:5px 12px;border-radius:7px;font-size:14px!important;font-weight:500!important} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-roster td.pm-status small{white-space:normal} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-pill.tone-orange{background:#fdefdc;color:#aa5a0c} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-pill.tone-purple{background:#efe7f8;color:var(--mm-out)} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-pill.tone-green{background:#e6f2e8;color:var(--mm-in)} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-pill.tone-blue{background:#e7eefb;color:#2856b8} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-pill.tone-slate{background:#efeeea;color:#5d6168} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-pill.tone-gray{background:#efeeea;color:#8a8d93} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-jobcount{display:block;color:var(--mm-ink)!important;font-size:16px!important;font-weight:500!important;white-space:nowrap;font-variant-numeric:tabular-nums} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-jobcell .pm-link{display:inline-block;margin-top:6px;color:var(--mm-gold-ink)!important;font-size:13px!important;font-weight:500!important;text-decoration:underline;text-decoration-color:var(--mm-gold);text-underline-offset:4px} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-act-in{display:inline-flex;align-items:center;gap:8px} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-detail{margin:0;padding:4px 2px!important;border:0!important;background:none!important;color:var(--mm-gold-ink)!important;font-size:15px!important;font-weight:500!important;text-decoration:underline;text-decoration-color:var(--mm-gold);text-decoration-thickness:2px;text-underline-offset:5px;cursor:pointer;white-space:nowrap} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-detail:hover{color:var(--mm-ink)!important} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-more{display:inline-grid;place-items:center;width:36px;height:36px;margin:0;padding:0 0 6px!important;border:0!important;border-radius:8px!important;background:none!important;color:var(--mm-ink)!important;font-size:22px!important;font-weight:700!important;line-height:1;letter-spacing:1px;cursor:pointer} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-more:hover, #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-more[aria-expanded="true"]{background:var(--mm-soft)!important} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-detail:focus-visible, #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-more:focus-visible, #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-link:focus-visible{outline:2px solid var(--mm-gold);outline-offset:2px} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-empty, #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-empty *{font-size:15px!important} /* footer + page bottom */ #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-foot{padding:14px 20px} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-foot, #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-foot *{color:var(--mm-muted);font-size:14px!important} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-perpage{display:inline-flex;align-items:center;gap:8px;margin:0} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-foot select{height:42px;min-width:72px;color:var(--mm-ink)!important;border-color:#dcd9d0!important;border-radius:10px!important} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-pager{gap:2px} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-page-btn{min-width:32px;height:32px;padding:0!important;border:0!important;background:none!important;color:var(--mm-muted)!important} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-page-btn:hover:not(:disabled){background:var(--mm-soft)!important;color:var(--mm-ink)!important} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-page-no{padding:0 8px;color:var(--mm-ink)!important;font-variant-numeric:tabular-nums;white-space:nowrap} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;margin:-2px 2px 18px} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-bottom .pm-hint{margin:0} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-bottom, #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-bottom *{color:var(--mm-muted);font-size:13px!important} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-bottom .pm-i{color:var(--mm-in)} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-bottom .pm-updated{margin:0;font-variant-numeric:tabular-nums} /* row "⋯" menu (position:fixed, placed by pe-messenger.js) */ #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-menu{position:fixed;z-index:9000;min-width:236px;max-width:300px;padding:6px;background:#fff;border:1px solid var(--mm-line);border-radius:12px;box-shadow:0 14px 34px rgba(29,32,37,.16)} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-menu-title{padding:8px 10px 6px;color:var(--mm-muted)!important;font-size:12px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-menu-item{display:flex;align-items:center;gap:10px;width:100%;margin:0;padding:10px!important;border:0!important;border-radius:8px!important;background:none!important;color:var(--mm-ink)!important;font-size:14px!important;text-align:left;text-decoration:none;cursor:pointer} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-menu-item *{font-size:14px!important} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-menu-item:hover, #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-menu-item:focus-visible{background:var(--mm-soft)!important;outline:0} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-menu-item .pm-i{width:17px;height:17px;color:var(--mm-muted)} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-menu-item.ok .pm-i{color:var(--mm-in)} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-menu-item.danger, #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-menu-item.danger .pm-i{color:var(--mm-red)!important} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-menu hr{margin:4px 6px;border:0;border-top:1px solid var(--mm-line)} /* ลงเวลาเข้า-ออก tab: same green / purple columns */ #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-att-table .pm-big{font-size:22px!important} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-att-table th.pm-col-in, #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-att-table th.pm-col-out{font-size:15px!important} @media (max-width:1400px){ #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-roster th, #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-roster td{padding-left:10px!important;padding-right:10px!important} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-big{font-size:24px!important} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-person-text b{font-size:16px!important} } @media (max-width:1100px){ #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-stats4{grid-template-columns:repeat(2,minmax(0,1fr))} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-toolbar{flex-wrap:wrap} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-search{flex:1 1 100%} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-toolbar select{flex:1 1 180px} } @media (max-width:760px){ #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-head{align-items:stretch;border-bottom:0} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-tabs{flex-wrap:nowrap!important;gap:18px!important;overflow-x:auto!important;border-bottom:1px solid var(--mm-line)} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-tab{flex:none;height:46px;padding:0 2px!important;font-size:14px!important;white-space:nowrap!important} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-head-actions{padding:0} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-btn{font-size:14px!important;padding:0 12px!important} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-stats4{gap:10px} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-stats4 .pm-stat{padding:14px!important;gap:4px} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-stats4 .pm-stat small{font-size:13px!important} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-stats4 .pm-stat b{font-size:28px!important} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-stats4 .pm-stat em, #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-stats4 .pm-stat em *{font-size:12px!important} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-list-head{padding:14px 14px 0} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-toolbar{padding:12px 14px 14px} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-bulkbar{margin:0 14px 12px} #admin#admin.v21-admin #v2106MessengerPage.pm-page table.pm-roster{min-width:0} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-roster tr{grid-template-columns:1fr 1fr;gap:10px;padding:14px} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-roster td{border-bottom:0!important} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-roster td.pm-status{grid-column:1/-1} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-roster td.pm-status::before{display:none} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-table td.pm-col-in, #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-table td.pm-col-out{width:auto;padding:10px 8px!important;border-radius:10px} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-table td.pm-col-in{background:var(--mm-in-bg)!important} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-table td.pm-col-out{background:var(--mm-out-bg)!important} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-table td.pm-col-in::before{color:var(--mm-in)!important;font-size:12px!important;font-weight:600!important} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-table td.pm-col-out::before{color:var(--mm-out)!important;font-size:12px!important;font-weight:600!important} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-roster td.pm-jobcell::before{font-size:12px!important} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-roster td.pm-col-act{grid-column:auto;align-self:end;text-align:right} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-big{font-size:24px!important} #admin#admin.v21-admin #v2106MessengerPage.pm-page .pm-foot{justify-content:space-between;padding:12px 14px} }