@charset "UTF-8"; :root { --ink: #173d3a; --ink-2: #245650; --accent: var(--hap-brand-accent, #e89a4a); --accent-soft: #fff0dc; --paper: #fffdf8; --canvas: #f4f1e9; --line: #e4dfd3; --muted: #6b7773; --good: #2e876f; --warn: #c67c2f; --bad: #b85652; --shadow: 0 18px 50px rgba(29, 59, 54, .10); --radius: 18px; --hap-ink: #173d3a; --hap-ink-2: #245650; --hap-accent: var(--hap-brand-accent, #e89a4a); --hap-accent-soft: #fff0dc; --hap-paper: #fffdf8; --hap-canvas: #f4f1e9; --hap-line: #e4dfd3; --hap-muted: #6b7773; --hap-good: #2e876f; --hap-warn: #c67c2f; --hap-bad: #b85652; --hap-shadow: 0 18px 50px rgba(29, 59, 54, .1); --hap-radius: 18px; } /* Employee monthly reconciliation: read-only, based on the Admin reconciliation engine. */ .hap-my-reconciliation-page .view{display:block} .hap-my-reconcile-list .hap-my-reconcile-list-head{display:grid;grid-template-columns:minmax(175px,.65fr) minmax(820px,3fr);gap:16px;align-items:end;padding:16px 18px} .hap-my-reconcile-title{align-self:center;min-width:0} .hap-my-reconcile-title h2{margin:0} .hap-my-reconcile-title p{margin:5px 0 0;color:#69788f;font-weight:700} .hap-my-reconcile-filter{display:grid;grid-template-columns:160px 175px minmax(240px,1fr) 94px 84px 108px;gap:9px;align-items:end;min-width:0;margin:0;padding:0;border:0;background:transparent;box-shadow:none} .hap-my-reconcile-filter.has-confirm{grid-template-columns:145px 155px minmax(155px,1fr) 88px 76px 98px 114px;gap:8px} .hap-my-reconcile-filter.has-confirm .hap-my-reconcile-search-field{min-width:0} .hap-my-reconcile-confirm{white-space:nowrap}.hap-my-reconcile-confirm.is-confirmed{background:#e8f7ef;color:#08794e;font-size:12px;font-weight:800} .hap-my-reconcile-completion{margin:0 0 14px;padding:12px 15px;border:1px solid #a9dfbf;border-radius:12px;background:#effaf3;color:#17643c;font-weight:750} .hap-my-reconcile-filter label{display:grid;gap:6px;min-width:0} .hap-my-reconcile-filter label>span:first-child{font-size:11px;font-weight:800;color:#66758d} .hap-my-reconcile-filter input,.hap-my-reconcile-filter select,.hap-my-reconcile-filter .btn{width:100%;height:44px;min-height:44px;margin:0;box-sizing:border-box;border-radius:10px} .hap-my-reconcile-filter .btn{display:inline-flex;align-items:center;justify-content:center;padding:0 11px;line-height:1.1;white-space:nowrap} .hap-my-reconcile-search-field input{width:100%} .hap-my-reconcile-search-control{position:relative;display:block;min-width:0} .hap-my-reconcile-search-control input{padding-right:38px} .hap-my-reconcile-search-control svg{position:absolute;top:50%;right:12px;width:17px;height:17px;transform:translateY(-50%);fill:none;stroke:#63738b;stroke-width:1.8;stroke-linecap:round;pointer-events:none} .hap-my-reconcile-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:16px} .hap-my-reconcile-kpis article{min-height:116px;padding:17px;border:1px solid #dce5f1;border-radius:16px;background:#fff;box-shadow:0 8px 24px rgba(22,48,82,.05)} .hap-my-reconcile-kpis span,.hap-my-reconcile-kpis small{display:block;color:#687791} .hap-my-reconcile-kpis span{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.03em} .hap-my-reconcile-kpis strong{display:block;margin:8px 0 4px;color:#d70000;font-size:27px;line-height:1.1} .hap-my-reconcile-kpis .ok{background:#f0fbf6;border-color:#bde9d5}.hap-my-reconcile-kpis .ok strong{color:#08784c} .hap-my-reconcile-kpis .warn{background:#fff9ec;border-color:#f3daa0}.hap-my-reconcile-kpis .warn strong{color:#b96700} .hap-my-reconcile-kpis .danger{background:#fff1f1;border-color:#f6c3c3}.hap-my-reconcile-kpis .danger strong{color:#c62e37} .hap-my-reconcile-kpis .income{background:linear-gradient(135deg, #0077c5, #003e62);border-color:transparent}.hap-my-reconcile-kpis .income span,.hap-my-reconcile-kpis .income small{color:#dff9ef}.hap-my-reconcile-kpis .income strong{color:#fff;font-size:23px} .hap-my-reconcile-list .panel-head{gap:12px} .hap-reconcile-readonly{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:0 12px;border-radius:999px;background:#eef4ff;color:#2358b8;font-size:12px;font-weight:800} .hap-my-reconcile-list td small{display:block;margin-top:4px;color:#738198} .hap-my-reconcile-list .code small{font-size:10px;color:#8995a7} .hap-my-reconcile-list .hap-own-revenue strong{color:#cb0000;white-space:nowrap} .hap-reconciliation-complete{min-height:38px!important;background:#2563eb!important;border-color:#2563eb!important;color:#fff!important;font-weight:800!important;white-space:nowrap} .hap-reconciliation-complete:hover{background:#1d4ed8!important;border-color:#1d4ed8!important;color:#fff!important} .hap-complete-confirm-modal{width:min(520px,calc(100vw - 36px))} .app-notice.warning{color:#92400e;background:#fef3c7;border:1px solid #fcd34d} .app-notice.warning small{display:block;margin-top:6px;color:#b45309;font-weight:700} .hap-complete-review-link{margin-top:10px} .hap-reconciliation-month-state{color:#168356;font-size:12px;white-space:nowrap} @media(max-width:1250px){ .hap-my-reconcile-list .hap-my-reconcile-list-head{grid-template-columns:1fr} .hap-my-reconcile-filter{grid-template-columns:155px 175px minmax(220px,1fr) 94px 84px 108px} .hap-my-reconcile-filter.has-confirm{grid-template-columns:repeat(7,minmax(0,1fr))} } @media(max-width:900px){ .hap-my-reconcile-filter{grid-template-columns:repeat(2,minmax(0,1fr))} .hap-my-reconcile-filter.has-confirm{grid-template-columns:repeat(2,minmax(0,1fr))} .hap-my-reconcile-filter .hap-my-reconcile-search-field{grid-column:1/-1} .hap-my-reconcile-filter .btn{width:100%} .hap-my-reconcile-kpis{grid-template-columns:repeat(2,minmax(0,1fr))} .hap-my-reconcile-kpis .income{grid-column:1/-1} } @media(max-width:560px){ .hap-my-reconcile-page .page-head h1{font-size:28px} .hap-my-reconcile-list .hap-my-reconcile-list-head{padding:14px 12px} .hap-my-reconcile-filter{gap:9px} .hap-my-reconcile-filter .hap-my-reconcile-search-field{grid-column:1/-1} .hap-my-reconcile-filter .hap-my-reconcile-export{grid-column:1/-1} .hap-my-reconcile-filter.has-confirm .hap-my-reconcile-export{grid-column:auto} .hap-my-reconcile-kpis{gap:9px} .hap-my-reconcile-kpis article{min-height:105px;padding:14px 12px} .hap-my-reconcile-kpis strong{font-size:24px} } @media(max-width:700px){.hap-reconciliation-complete{flex:1}.hap-reconciliation-month-state{width:100%}} /* Optional customer details added by an employee from an assigned job. */ .hap-assignment-customer-update { margin-top:14px;padding:13px;border:1px solid #edcf70;border-radius:12px;background:linear-gradient(135deg,#fff9df 0%,#fffdf2 100%);box-shadow:0 5px 16px rgba(122,91,13,.08); } .hap-assignment-customer-update > div:first-child { margin-bottom:10px; } .hap-assignment-customer-update > div:first-child strong,.hap-assignment-customer-update > div:first-child small { display:block; } .hap-assignment-customer-update > div:first-child strong { color:#0d7457;font-size:14px;font-weight:900; } .hap-assignment-customer-update > div:first-child small { margin-top:3px;color:#71817d;font-size:10px;line-height:1.45; } .hap-assignment-customer-update .form-grid { margin:0; } .hap-assignment-customer-update .field { display:flex;min-width:0;flex-direction:column; } .hap-assignment-customer-update .field input,.hap-assignment-customer-update .field textarea { width:100%;height:43px;min-height:43px;box-sizing:border-box;resize:vertical; } .hap-assignment-customer-update .field .field-help { min-height:16px;margin-top:5px; } .hap-duplicate-dialog { position:fixed;z-index:100500;inset:0;display:grid;place-items:center;padding:18px; } .hap-duplicate-dialog-backdrop { position:absolute;inset:0;background:rgba(8,28,34,.66);backdrop-filter:blur(4px); } .hap-duplicate-dialog > section { position:relative;width:min(620px,100%);max-height:calc(100vh - 36px);overflow:auto;padding:24px;border:1px solid #f0d38a;border-radius:20px;background:#fffdf6;box-shadow:0 28px 80px rgba(4,26,33,.34); } .hap-duplicate-dialog-icon { display:grid;place-items:center;width:45px;height:45px;margin-bottom:10px;border-radius:14px;color:#9b5700;background:#ffedb7;font-size:25px;font-weight:950; } .hap-duplicate-dialog h2 { margin:0 0 5px;color:#9b3f22;font-size:23px; } .hap-duplicate-dialog p { margin:0 0 14px;color:#5f6f6a;font-size:13px;line-height:1.5; } .hap-duplicate-dialog-list { display:grid;gap:8px;margin-bottom:10px; } .hap-duplicate-dialog-list article { padding:10px 12px;border:1px solid #eadfc5;border-radius:11px;background:#fff; } .hap-duplicate-dialog-list strong,.hap-duplicate-dialog-list span { display:block;overflow-wrap:anywhere; } .hap-duplicate-dialog-list strong { color:#173f37;font-size:12px; } .hap-duplicate-dialog-list span { margin-top:4px;color:#526660;font-size:12px; } .hap-duplicate-dialog > section > small { display:block;color:#936817;font-size:11px;font-weight:750; } .hap-duplicate-dialog-actions { display:flex;justify-content:flex-end;gap:9px;margin-top:18px; } .hap-assignment-availability-dialog > section { border-color:#f3c3bd;background:#fffafa; } .hap-assignment-availability-dialog .hap-duplicate-dialog-icon { color:#a82c25;background:#ffe0dc; } .hap-assignment-availability-dialog h2 { color:#a82c25; } .hap-availability-label { display:grid;gap:7px;margin-top:14px;color:#173f37;font-size:12px;font-weight:800; } .hap-availability-select { width:100%;min-height:42px;padding:8px 11px;border:1px solid #cbded8;border-radius:9px;background:#fff;color:#173f37;font:inherit; } @media(max-width:600px) { .hap-duplicate-dialog { align-items:end;padding:10px; }.hap-duplicate-dialog > section { padding:18px;border-radius:18px; }.hap-duplicate-dialog-actions { display:grid;grid-template-columns:1fr 1.4fr; }.hap-duplicate-dialog-actions .btn { width:100%; } } /* Nested quotation menu in the custom Admin sidebar. */ .hap-nav-dropdown{position:relative}.hap-nav-dropdown>.nav-item{display:flex;font-family:inherit;font-size:12px;line-height:1.35}.hap-nav-caret{margin-left:auto;color:#9eb8b1;font-size:15px;transition:transform .18s ease}.hap-nav-dropdown:hover .hap-nav-caret,.hap-nav-dropdown:focus-within .hap-nav-caret,.hap-nav-dropdown.active .hap-nav-caret{transform:rotate(180deg)}.hap-nav-dropdown-menu{display:none;gap:3px;margin:2px 8px 7px 36px;padding:5px;border:1px solid rgba(255,255,255,.1);border-radius:10px;background:rgba(0,0,0,.12)}.hap-nav-dropdown:hover .hap-nav-dropdown-menu,.hap-nav-dropdown:focus-within .hap-nav-dropdown-menu,.hap-nav-dropdown.active .hap-nav-dropdown-menu{display:grid}.hap-nav-dropdown-menu>a,.hap-nav-dropdown-menu>span{display:flex;align-items:center;gap:7px;min-height:32px;padding:6px 8px;border-radius:7px;color:#d8e7e3;font-size:11px;line-height:1.25;text-decoration:none}.hap-nav-dropdown-menu>a:hover,.hap-nav-dropdown-menu>a.active{background:rgba(255,255,255,.11);color:#fff}.hap-nav-dropdown-menu>span.disabled{flex-wrap:wrap;color:#7f9a93;cursor:not-allowed}.hap-nav-dropdown-menu small{flex-basis:100%;padding-left:20px;color:#718c85;font-size:8px;text-transform:uppercase} /* System activity and presence dashboard. */ .hap-activity-page .hap-card{max-width:none}.hap-activity-summary{display:grid;grid-template-columns:repeat(5,minmax(150px,1fr));gap:14px;margin:16px 0}.hap-activity-summary article{display:flex;align-items:center;gap:14px;min-height:92px;padding:18px;border:1px solid var(--hap-line,#dce3ed);border-radius:18px;background:#fff;box-shadow:0 8px 24px rgba(18,35,63,.06)}.hap-activity-summary strong{display:block;font-size:28px;line-height:1;color:var(--hap-ink,#12233f)}.hap-activity-summary small{display:block;margin-top:6px;color:#64748b;font-weight:650}.hap-presence-dot{display:inline-block;width:17px;height:17px;border-radius:50%;background:#94a3b8;box-shadow:0 0 0 6px rgba(148,163,184,.15)}.hap-presence-dot.online{background:#22c55e;box-shadow:0 0 0 6px rgba(34,197,94,.14),0 0 15px rgba(34,197,94,.48)}.hap-presence-dot.idle{background:#f59e0b;box-shadow:0 0 0 6px rgba(245,158,11,.14)}.hap-presence-dot.offline{background:#64748b}.hap-presence-dot.logged_out{background:#ef4444;box-shadow:0 0 0 6px rgba(239,68,68,.13)}.hap-presence-dot.history{background:#2563eb;box-shadow:0 0 0 6px rgba(37,99,235,.13)}.hap-presence-status{display:inline-flex;align-items:center;gap:7px;padding:6px 10px;border-radius:999px;background:#f1f5f9;color:#475569;font-weight:750;white-space:nowrap}.hap-presence-status i{width:8px;height:8px;border-radius:50%;background:currentColor}.hap-presence-status.online{background:#dcfce7;color:#15803d}.hap-presence-status.idle{background:#fef3c7;color:#b45309}.hap-presence-status.offline{background:#e2e8f0;color:#475569}.hap-presence-status.logged_out{background:#fee2e2;color:#b91c1c}.hap-activity-page table small{display:block;margin-top:4px;color:#64748b}.hap-activity-page table code{white-space:nowrap}.hap-activity-filters{display:grid;grid-template-columns:minmax(260px,1fr) minmax(190px,.35fr) auto;gap:12px;align-items:end;margin:14px 0 18px}.hap-activity-filters label{display:grid;gap:6px;font-weight:700}.hap-activity-filters input,.hap-activity-filters select{width:100%;min-height:40px}.hap-activity-pagination{display:flex;justify-content:center;margin-top:18px}.hap-activity-pagination ul{display:flex;gap:6px;margin:0}.hap-activity-pagination a,.hap-activity-pagination span{display:grid;place-items:center;min-width:36px;height:36px;padding:0 8px;border-radius:9px;text-decoration:none}.hap-activity-pagination .current{background:var(--hap-accent,#2563eb);color:#fff}.hap-activity-cleanup{display:flex;align-items:center;justify-content:space-between;gap:20px}.hap-activity-cleanup h2{margin-top:0}.hap-activity-cleanup-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.hap-activity-cleanup-actions form{margin:0}.hap-activity-cleanup .button-link-delete{min-height:36px;padding:0 12px;border:1px solid #fecaca;border-radius:7px;background:#fff;color:#b91c1c;text-decoration:none}.hap-activity-current .hap-table-wrap{max-height:530px;overflow:auto} @media(max-width:900px){.hap-activity-summary{grid-template-columns:repeat(2,minmax(150px,1fr))}.hap-activity-filters{grid-template-columns:1fr 1fr}.hap-activity-filters .button{grid-column:1/-1}.hap-activity-cleanup{align-items:flex-start;flex-direction:column}} @media(max-width:540px){.hap-activity-summary{grid-template-columns:1fr 1fr;gap:9px}.hap-activity-summary article{min-height:78px;padding:13px;gap:10px}.hap-activity-summary strong{font-size:23px}.hap-activity-filters{grid-template-columns:1fr}.hap-activity-filters .button{grid-column:auto}.hap-activity-cleanup-actions{align-items:stretch;flex-direction:column;width:100%}.hap-activity-cleanup-actions form,.hap-activity-cleanup-actions button{width:100%}} /* Approved Demo structure (Admin and Employee). */ .app-shell { min-height: 100vh; display: grid; grid-template-columns: 248px 1fr; } .sidebar { position: sticky; top: 0; height: 100vh; padding: 24px 18px; background: var(--ink); color: #fff; display: flex; flex-direction: column; overflow: auto; z-index: 70; } .brand { display: flex; gap: 12px; align-items: center; padding: 0 8px 24px; } .brand-mark { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 13px; display: grid; place-items: center; overflow:hidden; color: #fff; background: var(--accent); font-weight: 900; letter-spacing: -.06em; font-size: 17px; box-shadow: inset 0 -5px 12px rgba(114,61,20,.16); }.brand-mark img{width:100%;height:100%;object-fit:contain;background:#fff} .brand strong { display: block; color: #fff; font-size: 16px; letter-spacing: .02em; text-transform: uppercase; } .brand small { display: block; color: rgba(255,255,255,.58); font-size: 11px; margin-top: 2px; } .nav-label { padding: 12px 12px 8px; color: rgba(255,255,255,.42); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } .nav { display: grid; gap: 5px; } .nav-item { width: 100%; border: 0; border-radius: 12px; padding: 11px 12px; display: flex; gap: 11px; align-items: center; color: rgba(255,255,255,.70) !important; background: transparent; font-family:inherit; font-size:12px; line-height:1.35; text-align: left; text-decoration: none; transition: .2s ease; } .hap-employee-app .nav-item{width:100%;border:0;border-radius:12px;padding:11px 12px;display:flex;gap:11px;align-items:center;color:rgb(255 255 255)!important;background:#ffffff08;font-family:inherit;font-size:14px;line-height:1.35;text-align:left;text-decoration:none;transition:.2s ease;box-sizing:border-box} .hap-employee-app .nav>.nav-item[href*="hap_view=assignments"]{order:20} .hap-employee-app .nav>.nav-item[href*="hap_view=inventory"]{order:30} .hap-employee-app .nav>.nav-item[href*="hap_work_action=new"]{order:40} .hap-employee-app .nav>.nav-item[href*="hap_view=history"]{order:50} .hap-employee-app .nav>.nav-item[href*="hap_view=my-reconciliation"]{order:60} .hap-employee-app .nav>.nav-item[href*="hap_view=customer-history"]{order:70} .hap-employee-app .nav>.hap-nav-dropdown{order:80} .hap-employee-app .nav>.nav-item[href*="hap_view=price-builder"]{order:90} .hap-employee-app .nav>.hap-payroll-nav{order:100} .hap-employee-app .nav>.nav-item[href*="#hap-profile"]{order:110} .nav-item:hover { background: rgba(255,255,255,.06); color: #fff !important; } .nav-item.active { background: rgba(255,255,255,.11); color: #fff !important; box-shadow: inset 3px 0 var(--accent); } .nav-icon { width: 20px; text-align: center; opacity: .9; } .sidebar-note { margin-top: auto; padding: 15px; border: 1px solid rgba(255,255,255,.09); border-radius: 15px; background: rgba(255,255,255,.055); color: rgba(255,255,255,.66); font-size: 12px; line-height: 1.5; } .sidebar-note strong { color: #fff; display: block; margin-bottom: 4px; } .sidebar-download { margin-top: 10px; padding: 15px; border: 1px solid rgba(255,255,255,.14); border-radius: 15px; background: linear-gradient(145deg,rgba(43,145,200,.24),rgba(255,187,47,.12)); color: rgba(255,255,255,.76); font-size: 12px; line-height: 1.45; } .sidebar-download strong,.sidebar-download span { display:block; } .sidebar-download strong { color:#fff; margin-bottom:4px; font-size:13px; } .sidebar-download a { display:flex; align-items:center; justify-content:center; min-height:38px; margin-top:10px; padding:0 11px; border-radius:10px; background:#fff; color:#125f88; font-weight:800; text-decoration:none; box-shadow:0 6px 18px rgba(0,0,0,.14); } .sidebar-download a:hover { background:#e9f7ff; color:#0b4e72; } .hap-tg-image-viewer { position:fixed; z-index:100200; inset:0; display:flex; align-items:center; justify-content:center; padding:28px; background:rgba(4,15,22,.88); backdrop-filter:blur(5px); box-sizing:border-box; } .hap-tg-image-viewer[hidden] { display:none!important; } .hap-tg-image-viewer img { display:block; max-width:min(1100px,94vw); max-height:90vh; border-radius:14px; box-shadow:0 22px 70px rgba(0,0,0,.5); object-fit:contain; } .hap-tg-image-viewer-close { position:fixed; z-index:1; top:18px; right:20px; display:grid; width:44px; height:44px; place-items:center; padding:0; border:1px solid rgba(255,255,255,.35); border-radius:50%; background:rgba(12,30,40,.78); color:#fff; font-size:29px; line-height:1; cursor:pointer; } .hap-tg-image-viewer-close:hover { background:#176f9f; } .hap-tg-viewer-open { overflow:hidden; } .main { min-width: 0; padding: 18px 28px 42px; } .topbar { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 24px; } .mobile-menu { display: none; border: 0; background: var(--paper); border-radius: 12px; width: 42px; height: 42px; color: var(--ink); } .role-switch { padding: 4px; border-radius: 13px; background: #e8e4db; display: inline-flex; gap: 3px; border: 1px solid #ded9ce; } .role-switch a,.role-switch span { min-width: 108px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); padding: 8px 13px; font-weight: 750; text-align: center; text-decoration: none; box-sizing: border-box; } .role-switch .active { background: var(--paper); color: var(--ink); box-shadow: 0 5px 16px rgba(30,52,48,.10); } .top-actions { display: flex; align-items: center; gap: 11px; } .search { width: min(300px,28vw); display: flex; align-items: center; gap: 8px; padding: 10px 13px; background: rgba(255,255,255,.70); border: 1px solid var(--line); border-radius: 12px; } .search input { min-width: 0; width: 100%; border: 0 !important; outline: 0; background: transparent !important; color: var(--ink); box-shadow: none !important; padding: 0 !important; } .icon-btn { width: 42px; height: 42px; flex: 0 0 42px; border: 1px solid var(--line); background: var(--paper); color: var(--ink) !important; border-radius: 12px; position: relative; display: grid; place-items: center; text-decoration: none; } .icon-btn::after { content: ""; position: absolute; right: 8px; top: 8px; width: 7px; height: 7px; background: var(--accent); border: 2px solid var(--paper); border-radius: 50%; } .user-chip { display: flex; gap: 9px; align-items: center; padding-left: 4px; } .avatar { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: #9d5e22; font-weight: 850; } .user-chip strong { display: block; color: var(--ink); font-size: 13px; } .user-chip small { display: block; color: var(--muted); font-size: 11px; } .user-chip a { color: var(--muted); } .view { animation: rise .35s ease both; } @keyframes rise { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } } .page-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 22px; } .page-actions { display: flex; gap: 9px; flex-wrap: wrap; justify-content: flex-end; } .eyebrow { color: var(--accent); font-size: 11px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; margin-bottom: 8px; } .page-head h1 { margin: 0 0 7px; color: var(--ink); font-family: Georgia,"Times New Roman",serif; font-size: clamp(30px,3vw,43px); letter-spacing: -.035em; line-height: 1.04; } .page-head p { color: var(--muted); margin: 0; } .btn { border: 1px solid var(--line); border-radius: 12px; padding: 10px 15px; background: var(--paper); color: var(--ink) !important; font-weight: 750; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; box-sizing: border-box; } .btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(33,59,54,.08); } .btn-primary { background: var(--ink) !important; color: #fff !important; border-color: var(--ink) !important; } .btn-accent { background: var(--accent) !important; color: #fff !important; border-color: var(--accent) !important; } .btn-small { padding: 8px 11px; border-radius: 10px; font-size: 11px; white-space: nowrap; } .stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-bottom: 16px; } .hap-employee-home-stats { grid-template-columns: repeat(5,minmax(0,1fr)); } .hap-today-icon,.hap-today-action { display:none; } .hap-today-copy { display:flex;min-width:0;flex-direction:column; } .stat-card { position: relative; overflow: hidden; padding: 19px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 8px 30px rgba(30,59,54,.04); } .stat-card::after { content: ""; position: absolute; width: 78px; height: 78px; border-radius: 50%; right: -28px; top: -28px; background: var(--tint,rgba(232,154,74,.13)); } .stat-label { color: var(--muted); font-weight: 650; font-size: 12px; } .stat-value { color: var(--ink); font-size: 25px; font-weight: 850; margin: 10px 0 7px; letter-spacing: -.03em; } .stat-foot { font-size: 11px; color: var(--good); } .stat-foot.neutral { color: var(--muted); } .stat-foot.warn { color: var(--warn); } .grid-2 { display: grid; grid-template-columns: minmax(0,1.65fr) minmax(270px,.75fr); gap: 16px; margin-bottom: 16px; } .panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 8px 30px rgba(30,59,54,.045); overflow: hidden; } .panel-head { padding: 18px 19px 13px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .panel-head h2 { color: var(--ink); font-family: Georgia,"Times New Roman",serif; font-size: 21px; margin: 0; } .panel-head p { color: var(--muted); margin: 5px 0 0; font-size: 12px; } .mini-filter { border: 1px solid var(--line); background: #fbf9f4; color: var(--ink); border-radius: 10px; padding: 8px 10px; outline: none; } .chart { height: 220px; padding: 20px 20px 15px; display: grid; grid-template-columns: repeat(7,1fr); gap: 12px; align-items: end; border-top: 1px solid #eee9df; } .bar-wrap { height: 100%; display: flex; flex-direction: column; justify-content: end; align-items: center; gap: 8px; color: var(--muted); font-size: 10px; } .bar { width: min(34px,72%); height: var(--h); border-radius: 9px 9px 3px 3px; background: linear-gradient(180deg,var(--accent),#efb26f); position: relative; transition: .25s; } .bar.highlight { background: linear-gradient(180deg,var(--ink-2),var(--good)); } .bar::before { content: attr(data-value); position: absolute; left: 50%; top: -19px; transform: translateX(-50%); color: var(--ink); font-size: 9px; font-weight: 800; opacity: 0; white-space: nowrap; } .bar:hover::before { opacity: 1; } .activity { padding: 4px 18px 14px; } .activity-item { display: grid; grid-template-columns: 36px 1fr auto; gap: 11px; align-items: center; padding: 12px 0; border-top: 1px solid #eee9df; } .activity-dot { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--accent-soft); color: #a25d1c; font-weight: 850; } .activity-item strong { font-size: 12px; display: block; } .activity-item span { color: var(--muted); font-size: 11px; } .activity-item time { color: #9b9e9a; font-size: 10px; } .table-panel,.assigned-work-panel { margin-bottom: 16px; } .table-tools { padding: 0 18px 13px; display: flex; gap: 8px; flex-wrap: wrap; } .chip { border: 1px solid var(--line); background: transparent; color: var(--muted) !important; border-radius: 999px; padding: 7px 11px; font-size: 11px; font-weight: 700; text-decoration: none; } .chip.active { background: var(--ink); border-color: var(--ink); color: #fff !important; } .table-wrap { overflow: auto; border-top: 1px solid #eee9df; } .table-wrap table { width: 100%; border-collapse: collapse; min-width: 850px; } .table-wrap th { padding: 11px 16px; text-align: left; font-size: 10px; color: #89918e; text-transform: uppercase; letter-spacing: .07em; background: #fbf9f4; } .table-wrap td { padding: 14px 16px; border-top: 1px solid #eee9df; font-size: 12px; vertical-align: middle; } .table-wrap tbody tr:hover { background: #fffaf2; } .code,.code a { color: var(--ink); font-weight: 850; } .customer strong { display: block; font-size: 12px; } .customer small { color: var(--muted); display: block; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .person { display: flex; align-items: center; gap: 8px; } .mini-avatar { width: 26px; height: 26px; border-radius: 50%; background: #deebe7; color: var(--ink); display: grid; place-items: center; font-size: 9px; font-weight: 850; } .status { border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; font-size: 10px; font-weight: 800; white-space: nowrap; } .status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .status.done { color: var(--good); background: #e8f5f0; }.status.progress { color: var(--warn); background: #fff2df; }.status.new { color: #0d684b; background: #dff4e9; }.status.old { color: #a95008; background: #fff0dc; }.status.debt { color: var(--bad); background: #fbeceb; }.status.cancelled { color: #8e2f2a; background: #fde5e3; } .money { font-weight: 800; white-space: nowrap; } .assignment-list { display: grid; gap: 10px; padding: 0 18px 18px; } .assignment-card { display: grid; grid-template-columns: 92px minmax(0,1fr) auto; gap: 16px; align-items: center; padding: 16px; border: 1px solid var(--line); border-radius: 15px; background: #fffefa; } .assignment-card.overdue,.assignment-card.assignment-overdue { border-left: 4px solid var(--bad); background:#fff8f7; }.assignment-card.completed,.assignment-card.assignment-completed { background: #f7faf8; }.assignment-card.assignment-new { border-left:4px solid #167451; }.assignment-card.assignment-old { border-left:4px solid #d46b10; background:#fffaf3; }.assignment-card.assignment-cancelled { border-left:4px solid #9e3932; background:#fff5f4; } .assignment-card.assignment-new .carry { color:#0d684b; }.assignment-card.assignment-old .carry { color:#b4570b; }.assignment-card.assignment-overdue .carry { color:var(--bad); } .assignment-when { display: grid; gap: 4px; color: var(--muted); font-size: 10px; }.assignment-when strong { color: var(--accent); font-size: 18px; }.assignment-when .carry { color: var(--bad); font-weight: 800; } .assignment-main h3 { margin: 0 0 5px; font-size: 14px; }.assignment-meta { display: flex; gap: 8px 16px; flex-wrap: wrap; color: var(--muted); font-size: 11px; }.assignment-request { margin-top: 9px; color: var(--ink); font-size: 12px; line-height: 1.45; }.assignment-note { margin-top: 5px; color: var(--muted); font-size: 10px; font-style: italic; }.assignment-side { display: grid; justify-items: end; gap: 9px; } .source-guide { padding: 4px 18px 17px; }.source-item { padding: 14px 0; border-top: 1px solid #eee9df; }.source-item strong { display: block; margin-bottom: 5px; font-size: 12px; }.source-item p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; } .profile-banner { position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; padding: 22px; margin-bottom: 16px; border-radius: 22px; color: #fff; background: linear-gradient(125deg,var(--ink),#2a645c); box-shadow: var(--shadow); } .profile-banner::after { content: ""; position: absolute; width: 240px; height: 240px; right: -90px; top: -150px; border: 45px solid rgba(255,255,255,.06); border-radius: 50%; }.profile-avatar { width: 76px; height: 76px; border-radius: 24px; display: grid; place-items: center; overflow: hidden; background: var(--accent); font-size: 24px; font-weight: 900; z-index: 1; }.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }.profile-banner h2 { margin: 0 0 5px; color: #fff; font-family: Georgia,"Times New Roman",serif; font-size: 25px; }.profile-banner p { margin: 0; color: rgba(255,255,255,.67); }.profile-facts { display: flex; gap: 22px; margin-top: 13px; flex-wrap: wrap; }.profile-facts span { font-size: 11px; color: rgba(255,255,255,.58); }.profile-facts strong { color: #fff; display: block; margin-top: 2px; font-size: 12px; }.employee-status { align-self: start; padding: 8px 11px; border-radius: 999px; background: rgba(255,255,255,.11); font-weight: 800; font-size: 11px; z-index: 1; } .employment-dot { display: inline-block; margin-right: 2px; font-size: 13px; animation: hap-status-pulse 1.8s ease-in-out infinite; } .employment-status-official .employment-dot { color: #4ade80; text-shadow: 0 0 5px #22c55e,0 0 12px #22c55e; } .employment-status-probation .employment-dot { color: #fde047; text-shadow: 0 0 5px #eab308,0 0 12px #eab308; } .employment-status-inactive .employment-dot { color: #f87171; text-shadow: 0 0 5px #ef4444,0 0 12px #ef4444; } .hap-employment-badge{display:inline-flex;align-items:center;gap:5px;padding:6px 9px;border-radius:999px;font-size:11px;font-weight:900;white-space:nowrap}.hap-employment-badge.employment-status-official{color:#087443;background:#e2f7ea}.hap-employment-badge.employment-status-probation{color:#8a6200;background:#fff5c7}.hap-employment-badge.employment-status-inactive{color:#c43131;background:#fee7e7}.hap-employment-badge .employment-dot{margin:0;font-size:12px} @keyframes hap-status-pulse { 0%,100% { opacity:.72; transform:scale(.92); } 50% { opacity:1; transform:scale(1.12); } } .hap-search-only { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important; } .app-notice { padding: 12px 14px; margin: 0 0 16px; border-radius: 12px; font-weight: 700; }.app-notice.success { color: #166534; background: #dcfce7; }.app-notice.error { color: #991b1b; background: #fee2e2; }.empty-state { padding: 22px; color: var(--muted); text-align: center; } .app-notice.role-notice { color: #1e3a5f; background: #e0f2fe; } .app-backdrop,.overlay { position: fixed; inset: 0; z-index: 60; background: rgba(19,46,43,.44); backdrop-filter: blur(5px); opacity: 0; pointer-events: none; transition: .25s; }.app-backdrop.is-open,.overlay.open { opacity: 1; pointer-events: auto; } .modal { position: fixed; z-index: 61; top: 50%; left: 50%; width: min(900px,calc(100vw - 36px)); max-height: calc(100vh - 36px); background: var(--paper); border-radius: 22px; box-shadow: 0 25px 80px rgba(15,44,40,.28); opacity: 0; transform: translate(-50%,-47%) scale(.985); transition: .25s cubic-bezier(.2,.8,.2,1); display: flex; flex-direction: column; overflow: hidden; pointer-events: none; }.modal.open { opacity: 1; transform: translate(-50%,-50%) scale(1); pointer-events: auto; }.modal.assignment-modal { width: min(760px,calc(100vw - 36px)); }.modal-head { padding: 19px 22px; display: flex; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--line); flex: 0 0 auto; }.modal-head h2 { margin: 0 0 4px; color: var(--ink); font-family: Georgia,"Times New Roman",serif; font-size: 24px; }.modal-head p { margin: 0; color: var(--muted); font-size: 11px; }.modal-close { border: 0; width: 38px; height: 38px; flex: 0 0 38px; border-radius: 11px; background: #f1eee7; color: var(--ink) !important; font-size: 20px; display: grid; place-items: center; text-decoration: none; }.modal-body { min-height: 0; padding: 20px 22px 0; overflow: auto; flex: 1 1 auto; }.modal-body .hap-wm-card { border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; overflow: visible !important; }.modal-body .hap-wm-card > h3:first-child { display: none; } .overlay.open{z-index:100090}.modal.open{z-index:100100} .work-form,.work-form form { min-width: 0; } .work-form * { box-sizing: border-box; } .section-title { margin: 8px 0 13px; padding: 0 0 8px; border-bottom: 1px solid #eee9df; color: var(--muted); font-size: 11px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; } .section-title:not(:first-of-type) { margin-top: 22px; } .form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; margin-bottom: 18px; } .form-grid.hap-work-staff-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } .field { min-width: 0; display: grid; align-content: start; gap: 6px; } .field.full { grid-column: 1 / -1; } .field label { margin: 0; color: #55635f; font-size: 11px; line-height: 1.35; font-weight: 750; } .field label small { color: var(--muted); font-weight: 500; } .field input,.field select,.field textarea,.material-table input,.material-table select { display: block; width: 100% !important; max-width: none !important; min-width: 0; min-height: 42px; margin: 0 !important; border: 1px solid var(--line) !important; border-radius: 11px !important; background: #fffefa !important; color: var(--ink) !important; padding: 9px 11px !important; font: inherit; line-height: 1.35; box-shadow: none !important; } .field textarea { min-height: 76px; resize: vertical; } .field .multi-select { min-height: 84px; padding: 6px !important; } .field input:focus,.field select:focus,.field textarea:focus,.material-table input:focus,.material-table select:focus { outline: none !important; border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(232,154,74,.13) !important; } .field.hap-field-invalid input,.field.hap-field-invalid select,.field.hap-field-invalid textarea,.hap-field.hap-field-invalid input,.hap-field.hap-field-invalid select,.hap-field.hap-field-invalid textarea,[aria-invalid="true"] { border-color:#dc3b35!important;box-shadow:0 0 0 3px rgba(220,59,53,.12)!important; } .hap-inline-validation-message { display:block;order:99;width:100%;margin:6px 0 0;color:#c52f2a;font-size:11px;font-weight:800;line-height:1.35; } .field input[readonly],.field input:disabled { color: #7c8582 !important; background: #f1efe9 !important; } .field-help { display: block; color: var(--muted); font-size: 10px; line-height: 1.45; } .lookup-field { position: relative; } .lookup-field:focus-within { z-index: 120; } .lookup-input { position: relative; } .lookup-input input { padding-right: 44px !important; } .lookup-input button { position: absolute; right: 5px; top: 5px; width: 34px; height: 32px; border: 0; border-radius: 9px; color: var(--accent); background: transparent; font-size: 17px; } .hap-assignment-new-location { display:grid;gap:8px;margin-top:8px;padding:10px;border:1px dashed #b9d4ca;border-radius:11px;background:#f5faf8; } .hap-assignment-new-location[hidden] { display:none!important; } .hap-assignment-new-location > input { width:100%; } .hap-add-assignment-location { width:max-content;margin-top:8px; } .hap-add-assignment-location[hidden] { display:none!important; } .lookup-results { position: absolute; left: 0; right: 0; top: 68px; z-index: 130; max-height: 230px; overflow: auto; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: 0 18px 42px rgba(28,58,53,.22); } .lookup-results[hidden] { display: none !important; } #hap-work-location-results,#hap-assignment-location-results { position: relative; inset: auto; top: auto; left: auto; right: auto; width: 100%; margin-top: 1px; z-index: 1; box-shadow: 0 10px 28px rgba(28,58,53,.16); } .lookup-item { width: 100%; border: 0; border-top: 1px solid #eee9df; padding: 11px 12px; display: flex; align-items: center; justify-content: space-between; gap: 14px; background: #fff; color: var(--ink); text-align: left; } .lookup-item:first-child { border-top: 0; }.lookup-item:hover { background: #fff8ed; }.lookup-item strong { display: block; font-size: 12px; }.lookup-item small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; }.lookup-phone { color: var(--accent); font-weight: 850; white-space: nowrap; }.lookup-empty { display: block; padding: 11px 12px; color: var(--muted); font-size: 11px; } .customer-mode { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-radius: 10px; color: var(--good); background: #e8f5f0; font-size: 11px; font-weight: 750; }.customer-mode.new { color: var(--warn); background: #fff2df; }.customer-mode[hidden],.field[hidden] { display: none !important; } .fee-note { grid-column: 1 / -1; padding: 10px 12px; border-left: 3px solid var(--accent); border-radius: 0 10px 10px 0; color: var(--muted); background: var(--accent-soft); font-size: 11px; line-height: 1.5; } .assignment-brief { margin-bottom: 20px; padding: 16px; border: 1px solid #d7e4df; border-radius: 15px; background: #f0f7f4; }.assignment-brief-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 12px; margin-bottom: 13px; }.assignment-brief-head>strong:first-child{margin-right:auto}.hap-work-order-status-brief{padding:14px 16px}.hap-work-order-status-brief .assignment-brief-head{margin-bottom:0}.assignment-brief-head strong { color: var(--ink); font-family: Georgia,"Times New Roman",serif; font-size: 18px; }.hap-order-head-revenue{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:5px 11px 5px 7px;border:1px solid #f3c8c5;border-radius:12px;background:linear-gradient(135deg,#fff8f7,#fff);box-shadow:0 5px 13px rgba(190,50,42,.08);white-space:nowrap}.hap-order-head-revenue>i{display:grid;place-items:center;width:27px;height:27px;border-radius:9px;background:#fee8e5;color:#d52b22;font-size:16px;font-style:normal;font-weight:900}.hap-order-head-revenue>span{display:grid;gap:1px}.hap-order-head-revenue small{color:#8d6b68;font-size:8px;font-weight:800;letter-spacing:.04em;line-height:1;text-transform:uppercase}.hap-order-head-revenue b{color:#d52b22;font-size:15px;font-weight:950;line-height:1.15}.readonly-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; }.readonly-item { min-width: 0; padding: 10px 11px; border-radius: 10px; background: rgba(255,255,255,.72); }.readonly-item.full { grid-column: 1 / -1; }.readonly-item span { display: block; margin-bottom: 4px; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }.readonly-item strong { display: block; color: var(--ink); font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; } .hap-work-view-list { display: grid; gap: 6px; margin-top: 7px; } .readonly-item .hap-work-view-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 8px 10px; border: 1px solid #e0e9e6; border-radius: 9px; background: #fff; } .readonly-item .hap-work-view-row > span { margin: 0; color: var(--ink); font-size: 12px; font-weight: 700; letter-spacing: 0; text-transform: none; } .readonly-item .hap-work-view-row > span strong { font-size: 12px; } .readonly-item .hap-work-view-row > span small { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; font-weight: 600; } .hap-work-view-row > b { flex: 0 0 auto; color: var(--ink); font-size: 12px; } .readonly-item .hap-work-view-total { background: #edf7f3; } .readonly-item .hap-work-view-total > span,.readonly-item .hap-work-view-total > b { color: #17634f; font-weight: 900; } .hap-work-view-empty { padding: 8px 10px; border-radius: 9px; background: #f7f9f8; color: var(--muted); font-size: 11px; } .readonly-item.note-item { border-left: 3px solid var(--accent); background: #fff8e9; }.earning-detail { margin-top: 14px; padding: 15px 16px; border: 1px solid var(--line); border-radius: 14px; background: #fffefa; }.earning-detail h3 { margin: 0 0 11px; color: var(--ink); font-family: Georgia,"Times New Roman",serif; font-size: 17px; }.earning-line { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 9px 0; border-top: 1px solid #eee9df; color: var(--muted); font-size: 12px; }.earning-line:first-of-type { border-top: 0; }.earning-line span small { display: block; margin-top: 2px; color: #8a918e; font-size: 10px; }.earning-line strong { color: var(--ink); white-space: nowrap; }.earning-line.deduction strong { color: var(--bad); }.earning-line.gross { font-weight: 750; }.earning-line.total { margin-top: 5px; padding-top: 12px; border-top: 2px solid #d9d2c5; color: var(--ink); font-size: 13px; font-weight: 850; }.earning-line.total strong { color: var(--good); font-size: 16px; }.earning-empty { margin: 0; padding: 8px 0; color: var(--muted); font-size: 11px; } .check-line { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; color: var(--ink); }.check-line input { width: 16px !important; height: 16px !important; margin: 0 !important; } .hap-phone-choice-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:center}.hap-phone-choice-row>.lookup-input{min-width:0}.hap-phone-unavailable-check{align-items:center;justify-content:center;height:42px;min-height:42px;max-height:42px;margin:0;padding:0 10px;border:1px solid #d8e0dd;border-radius:10px;background:#f8faf9;box-sizing:border-box;cursor:pointer;overflow:hidden}.hap-phone-unavailable-check>input[type=checkbox]{display:inline-block!important;flex:0 0 16px!important;width:16px!important;min-width:16px!important;max-width:16px!important;height:16px!important;min-height:16px!important;max-height:16px!important;margin:0!important;padding:0!important;border-radius:4px!important;box-shadow:none!important;appearance:auto!important;-webkit-appearance:checkbox!important;accent-color:#176b52;cursor:pointer}.hap-phone-unavailable-check>span{display:block;min-width:0}.hap-phone-unavailable-check strong{font-size:11px;line-height:1.2;white-space:nowrap} .debt-check { grid-column: 1 / -1; padding: 12px 14px; border: 1px solid #ebc5c2; border-radius: 12px; background: #fff5f4; font-weight: 800; }.debt-check small { margin-left: 4px; color: var(--muted); font-weight: 500; } .hap-order-flags{grid-column:1/-1;display:grid;grid-template-columns:1fr;gap:10px}.hap-order-flags.has-three{grid-template-columns:repeat(3,minmax(0,1fr))}.hap-order-flags .check-line{grid-column:auto;margin:0;min-height:66px;padding:11px 12px;border-radius:12px;align-items:flex-start}.hap-order-flags .check-line>span{display:grid;gap:3px}.hap-order-flags .check-line strong{font-size:12px}.hap-order-flags .check-line small{margin:0;color:var(--muted);font-size:10px;font-weight:500;line-height:1.35}.vat-issued-check{border:1px solid #b8ddcd;background:#f0faf6;color:#11684e;font-weight:800}.hap-close-ticket-check{border:1px solid #d8d5ca;background:#f7f5ef;font-weight:800}.hap-view-statuses{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}.status.vat-issued{background:#dcf5ea;color:#08724d}.status.debt{background:#fff0e6;color:#a84c17}.status.locked{background:#ecebe7;color:#4f5753} .hap-period-unlock-box{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:12px 0 8px;padding:11px 13px;border:1px solid #d7e0ec;border-radius:13px;background:#f8fafc}.hap-period-unlock-box.is-unlocked{border-color:#9dd8bd;background:#effaf5}.hap-period-unlock-box>div{display:flex;min-width:0;flex-direction:column;gap:3px}.hap-period-unlock-box strong{color:#17364f;font-size:12px}.hap-period-unlock-box small{margin:0;color:#61708d;font-size:10px;line-height:1.4}.hap-period-unlock-box .button{flex:0 0 auto;margin:0;white-space:nowrap}@media(max-width:600px){.hap-period-unlock-box{align-items:stretch;flex-direction:column}.hap-period-unlock-box .button{width:100%;min-height:40px}} .hap-role-fees { margin-top: 15px; padding: 14px; border: 1px solid var(--line); border-radius: 13px; background: #fbf9f4; } .hap-assignment-outcome-box{margin:14px 0 2px}.hap-assignment-outcome-flags{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.hap-assignment-outcome-flags.single{grid-template-columns:1fr}.hap-assignment-outcome-flags .check-line{min-height:72px;margin:0;padding:12px 13px;border-radius:13px;align-items:flex-start;font-weight:850}.hap-assignment-outcome-flags .check-line>span{display:grid;gap:4px}.hap-assignment-outcome-flags .check-line strong{font-size:12px}.hap-assignment-outcome-flags .check-line small{color:var(--muted);font-size:10px;font-weight:500;line-height:1.35}.hap-device-received-check{border:1px solid #a9c9f4;background:#eef6ff;color:#145da8}.hap-cancel-order-check{border:1px solid #efcbc8;background:#fff6f5;color:#982f2a}.hap-assignment-outcome-box #hap-cancel-reason-wrap{margin-top:12px;padding:13px 14px;border:1px solid #efcbc8;border-radius:13px;background:#fff6f5;transition:.18s ease}.hap-assignment-outcome-box #hap-cancel-reason-wrap.is-disabled{border-color:#e2e6e4;background:#f7f8f7;opacity:.72}.hap-assignment-outcome-box #hap-cancel-reason-wrap.is-active{box-shadow:0 0 0 3px rgba(198,75,67,.08)}.hap-record-statuses{display:flex;flex-wrap:wrap;align-items:center;gap:6px}.status.device-received{gap:6px;border:1px solid #b8d7fb;background:#e8f3ff;color:#1261b1}.status.device-received::before{display:none}.status.device-received i{display:inline-block;width:8px;height:8px;border-radius:50%;background:#2387f2;box-shadow:0 0 0 rgba(35,135,242,.65);animation:hap-device-received-pulse 1.45s infinite}@keyframes hap-device-received-pulse{0%{box-shadow:0 0 0 0 rgba(35,135,242,.65)}70%{box-shadow:0 0 0 8px rgba(35,135,242,0)}100%{box-shadow:0 0 0 0 rgba(35,135,242,0)}}@media(max-width:680px){.hap-pay-inline{margin-left:0;padding-left:0;border-left:0;width:100%}.hap-pay-inline .hap-pay-amount{flex:1 1 100%}.hap-pay-inline .hap-pay-amount input{width:100%}.hap-assignment-outcome-flags{grid-template-columns:1fr}.hap-assignment-outcome-flags .check-line{min-height:0}}.cancellation-item{border-left:3px solid #c64b43;background:#fff0ee}.cancellation-notice{color:#8e2f2a;background:#fde8e5} .hap-planned-item-suggestions{margin:0 0 12px;padding:12px;border:1px solid #b9d6f2;border-radius:14px;background:linear-gradient(135deg,#f1f8ff,#f8fcff)}.hap-planned-item-suggestions-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:9px}.hap-planned-item-suggestions-head>span{display:grid;gap:2px}.hap-planned-item-suggestions-head strong{color:#164f87;font-size:12px}.hap-planned-item-suggestions-head small{color:#657d92;font-size:10px}.hap-planned-item-suggestions-head>b{flex:0 0 auto;padding:5px 8px;border-radius:999px;background:#dceeff;color:#1767ad;font-size:9px}.hap-planned-item-suggestion-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.hap-apply-planned-item{display:grid;grid-template-columns:26px minmax(0,1fr) auto;align-items:center;gap:9px;width:100%;min-height:58px;padding:9px 11px;border:1px solid #cee0ef;border-radius:11px;background:#fff;color:var(--ink);text-align:left;cursor:pointer}.hap-apply-planned-item>i{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:#e5f2ff;color:#1268b6;font-style:normal;font-size:17px}.hap-apply-planned-item>span{display:grid;gap:2px;min-width:0}.hap-apply-planned-item>span strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}.hap-apply-planned-item>span small{color:var(--muted);font-size:9px}.hap-apply-planned-item>b{color:#1767ad;font-size:9px}.hap-apply-planned-item:hover,.hap-apply-planned-item:focus-visible{border-color:#5599d4;box-shadow:0 0 0 3px rgba(56,130,195,.1);outline:0}.hap-apply-planned-item.is-selected{border-color:#8bcbb2;background:#f0fbf6}.hap-apply-planned-item.is-selected>i{background:#daf4e8;color:#16805f}.hap-apply-planned-item.is-selected>b{color:#16805f}@media(max-width:680px){.hap-planned-item-suggestion-list{grid-template-columns:1fr}.hap-planned-item-suggestions-head{align-items:flex-start}.hap-planned-item-suggestions{padding:10px}} .btn.btn-danger,.button.button-danger{border-color:#b83f38!important;background:#b83f38!important;color:#fff!important}.btn.btn-danger:hover,.button.button-danger:hover{border-color:#94302b!important;background:#94302b!important;color:#fff!important}.hap-assignment-cancel-box{margin:16px 0;padding:16px;border:1px solid #e9b9b5;border-radius:14px;background:#fff5f4;color:#7d2d29}.hap-assignment-cancel-box[hidden]{display:none!important}.hap-assignment-cancel-box form{display:grid;gap:13px}.hap-assignment-cancel-box p{margin:5px 0 0}.hap-assignment-cancel-box label{display:grid;gap:7px;font-weight:800}.hap-assignment-cancel-box textarea{width:100%;min-height:86px;border-color:#d99a96!important;background:#fff!important}.hap-cancel-actions{display:flex;justify-content:flex-end;gap:9px}.hap-assignment-cancelled-summary{padding:20px;border:1px solid #e4aaa5;border-radius:15px;background:#fff3f2;color:#7d2d29}.hap-assignment-cancelled-summary strong{display:block;font-size:17px}.hap-assignment-cancelled-summary p{margin:8px 0;font-size:14px}.hap-assignment-cancelled-summary small{color:#8f625f}.hap-record-kind{display:block;margin-top:5px;color:#176b54;font-weight:800}.hap-unentered-order{background:#f7fcf9!important}.hap-work-orders-table{overflow-x:auto;border-radius:8px}.hap-admin-pagination{display:flex;justify-content:center;margin:26px 0 12px}.hap-admin-pagination ul.page-numbers{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0;padding:0;list-style:none}.hap-admin-pagination li{margin:0}.hap-admin-pagination a.page-numbers,.hap-admin-pagination span.page-numbers{display:grid;place-items:center;min-width:40px;height:40px;box-sizing:border-box;padding:0 12px;border:1px solid #cdd6d2;border-radius:11px;background:#fff;color:#263c35;text-decoration:none;font-weight:800;box-shadow:0 2px 7px rgba(31,55,47,.06)}.hap-admin-pagination a.page-numbers:hover{border-color:#16805f;background:#edf8f3;color:#11684e}.hap-admin-pagination span.page-numbers.current{border-color:#16805f;background:#16805f;color:#fff;box-shadow:0 5px 13px rgba(22,128,95,.23)}.hap-customer-pagination{display:flex;justify-content:center;width:100%;margin:30px 0 14px}.hap-customer-pagination ul.page-numbers{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0;padding:0;list-style:none}.hap-customer-pagination li{margin:0}.hap-customer-pagination a.page-numbers,.hap-customer-pagination span.page-numbers{display:grid;place-items:center;min-width:46px;height:46px;box-sizing:border-box;padding:0 15px;border:1px solid #d3dfda;border-radius:13px;background:#fff;color:#24443b;text-decoration:none;font-size:14px;font-weight:850;line-height:1;box-shadow:0 5px 16px rgba(31,67,56,.09);transition:transform .18s ease,border-color .18s ease,background .18s ease,color .18s ease,box-shadow .18s ease}.hap-customer-pagination a.page-numbers:hover{border-color:#16805f;background:#edf8f3;color:#11684e;transform:translateY(-2px);box-shadow:0 8px 20px rgba(22,128,95,.16)}.hap-customer-pagination span.page-numbers.current{border-color:#16805f;background:#16805f;color:#fff;box-shadow:0 7px 18px rgba(22,128,95,.28)}.hap-debt-order-link{color:#176b52;text-decoration:none;font-weight:900}.hap-debt-order-link:hover{color:#0f523f;text-decoration:underline} .hap-work-orders-table table{min-width:980px} .hap-admin-list-table-scroll{width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch} .hap-admin-list-table-scroll>table{min-width:760px} .hap-employee-list-table-scroll>table{min-width:860px} .hap-customer-list-table-scroll>table{min-width:900px} .hap-customer-address{display:block;max-width:360px;color:#526b64;font-size:11px;line-height:1.4;overflow-wrap:anywhere} .hap-work-order-request{display:block;max-width:330px;margin-top:5px;color:#667085;font-size:11px;font-weight:500;line-height:1.4;white-space:normal} .hap-vat-page{max-width:1500px}.hap-vat-page-head,.hap-vat-section-head{display:flex;align-items:center;justify-content:space-between;gap:16px}.hap-vat-page-head h1,.hap-vat-section-head h2{margin-bottom:5px}.hap-vat-page-head p,.hap-vat-section-head p{margin:0;color:var(--hap-muted,#64748b)}.hap-vat-customer-filter{display:flex;align-items:end;gap:12px;max-width:none}.hap-vat-customer-filter label{display:grid;flex:1;gap:6px;font-weight:800}.hap-vat-customer-filter label small{color:#64748b;font-weight:500}.hap-vat-customer-filter input[type=search]{width:100%;min-height:46px;padding:0 14px;border-color:#cbd9d4;border-radius:12px;background:#fff;font-size:14px;box-shadow:0 3px 12px rgba(32,63,54,.06)}.hap-vat-customer-filter input[type=search]:focus{border-color:#16805f;box-shadow:0 0 0 2px rgba(22,128,95,.13)}.hap-vat-customer-results{display:grid;gap:8px;margin:-10px 0 20px;padding:12px;border:1px solid #dce6e2;border-radius:14px;background:#f7faf9}.hap-vat-customer-results>a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 14px;border:1px solid #e0e8e5;border-radius:11px;background:#fff;color:#243f37;text-decoration:none;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}.hap-vat-customer-results>a:hover,.hap-vat-customer-results>a.selected{border-color:#16805f;box-shadow:0 6px 18px rgba(22,128,95,.13);transform:translateY(-1px)}.hap-vat-customer-results>a.selected{background:#edf8f3}.hap-vat-customer-results span{display:grid;gap:3px}.hap-vat-customer-results strong{font-size:14px}.hap-vat-customer-results small{color:#667a73}.hap-vat-customer-results em{flex:0 0 auto;color:#176b52;font-size:12px;font-style:normal;font-weight:850}.hap-vat-create-card,.hap-vat-list-card{max-width:none}.hap-vat-order-table td,.hap-vat-order-table th{vertical-align:middle}.hap-vat-create-fields{display:grid;grid-template-columns:repeat(3,minmax(180px,1fr));gap:12px;margin-top:16px}.hap-vat-create-fields label{display:grid;gap:6px;font-weight:800}.hap-vat-create-fields .wide{grid-column:1/-1}.hap-vat-create-fields input,.hap-vat-create-fields select,.hap-vat-create-fields textarea{width:100%}.hap-vat-live-summary{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:10px;margin-top:14px}.hap-vat-live-summary span{display:grid;gap:5px;padding:12px;border:1px solid #dce6e3;border-radius:11px;background:#f7faf9;color:#657570;font-size:11px}.hap-vat-live-summary strong{color:#17473e;font-size:17px}.hap-vat-state{display:inline-flex;padding:5px 9px;border-radius:999px;background:#eef2f1;color:#53625f;font-size:11px;font-weight:900;white-space:nowrap}.hap-vat-state.issued{background:#e0f2fe;color:#0369a1}.hap-vat-state.paid{background:#dcfce7;color:#15803d}.hap-vat-state.cancelled{background:#fee2e2;color:#b91c1c}.hap-vat-list-card td small{display:block;margin-top:4px;color:#6b7b77}.hap-vat-details{min-width:125px;margin-bottom:8px}.hap-vat-details summary{cursor:pointer;color:#176b52;font-weight:800}.hap-vat-details-body{min-width:300px;padding:8px 0}.hap-vat-details-body h4{margin:9px 0 5px}.hap-vat-details-body p{display:flex;justify-content:space-between;gap:12px;margin:0;padding:6px 0;border-bottom:1px solid #edf1f0}.hap-vat-details-body p span{color:#657570;text-align:right}.hap-vat-inline-form{display:grid;gap:6px;min-width:190px;margin:8px 0}.hap-vat-inline-form input,.hap-vat-inline-form select{width:100%;min-width:0}.hap-vat-cancel-form{margin-top:8px}.hap-vat-cancel-form .button-link-delete{cursor:pointer;border:0;background:none;color:#b32d2e;text-decoration:underline}.hap-customer-history-head-actions{flex-wrap:wrap} @media(max-width:782px){.hap-vat-page-head,.hap-vat-section-head{align-items:flex-start;flex-direction:column}.hap-vat-customer-filter{align-items:stretch;flex-direction:column}.hap-vat-create-fields{grid-template-columns:1fr}.hap-vat-live-summary{grid-template-columns:repeat(2,minmax(0,1fr))}} .hap-pagination{display:flex;justify-content:center;gap:7px;padding:0 18px 18px}.hap-pagination a{display:grid;place-items:center;min-width:34px;height:34px;padding:0 9px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);text-decoration:none;font-weight:800}.hap-pagination a.active{border-color:var(--ink);background:var(--ink);color:#fff} .hap-employee-insights{margin-top:16px}.hap-activity-stats{display:grid;gap:9px;padding:0 18px 18px}.hap-activity-stats a{display:flex;align-items:center;justify-content:space-between;gap:11px;padding:13px 14px;border:1px solid var(--line);border-radius:12px;background:#fffefa;color:var(--ink);text-decoration:none}.hap-activity-stats a:hover{border-color:#a9c9be;background:#f2f9f6}.hap-activity-stats a:before{content:"";display:block;width:36px;height:36px;flex:0 0 36px;border-radius:11px;background-position:center;background-repeat:no-repeat;background-size:21px}.hap-activity-stats span{min-width:0;flex:1;color:var(--muted);font-weight:700}.hap-activity-stats strong{flex:0 0 auto;font-size:22px;color:var(--accent)} .hap-activity-stats a.delivery:before{background-color:#e9f0ff;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233d67d7' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h11v10H3zM14 10h3l3 3v4h-6z'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3Cpath d='M5 4h7'/%3E%3C/svg%3E")}.hap-activity-stats a.consultation:before{background-color:#dff4e9;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23197548' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h14a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-8l-5 4v-4H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Z'/%3E%3Cpath d='M8 9h8M8 13h5'/%3E%3C/svg%3E")}.hap-activity-stats a.cancelled:before{background-color:#fde2e2;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c92f2f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8.5 8.5 7 7M15.5 8.5l-7 7'/%3E%3C/svg%3E")}.hap-activity-stats a.fix:before{background-color:#fff0ca;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d97800' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 5.5a4 4 0 0 0-5 5L4 16l4 4 5.5-5.5a4 4 0 0 0 5-5l-3 3-3-3 3-3Z'/%3E%3C/svg%3E")} .material-table { width: 100%; margin-bottom: 10px; border: 1px solid var(--line); border-radius: 13px; overflow: auto; }.material-table table { width: 100%; min-width: 920px; border-collapse: collapse; table-layout: fixed; }.material-table th { padding: 9px 8px; color: #89918e; background: #fbf9f4; font-size: 9px; letter-spacing: .05em; text-transform: uppercase; text-align: left; }.material-table td { padding: 8px; border-top: 1px solid #eee9df; vertical-align: middle; }.material-table th:nth-child(1){width:105px}.material-table th:nth-child(2){width:205px}.material-table th:nth-child(3){width:68px}.material-table th:nth-child(4){width:90px}.material-table th:nth-child(5){width:125px}.material-table th:nth-child(6){width:125px}.material-table th:nth-child(7){width:160px}.material-table th:nth-child(8){width:42px}.material-table input,.material-table select { min-height: 36px; border-radius: 8px !important; padding: 7px 8px !important; } .material-table.has-supplier table{min-width:1080px}.material-table.has-supplier th:nth-child(6){width:170px}.material-table.has-supplier th:nth-child(7){width:125px}.material-table.has-supplier th:nth-child(8){width:160px}.material-table.has-supplier th:nth-child(9){width:42px} .remove-line { width: 32px; height: 32px; border: 0; border-radius: 9px; color: var(--bad); background: #fbeceb; font-size: 17px; line-height: 1; } .repeat-list { display: grid; gap: 10px; margin-bottom: 10px; }.repeat-row { display: grid; grid-template-columns: minmax(150px,.45fr) minmax(240px,1fr) 34px; gap: 10px; align-items: end; padding: 12px; border: 1px solid var(--line); border-radius: 13px; background: #fffefa; }.repeat-row .grow { min-width: 0; } .summary-box { margin-top: 3px; padding: 15px; border-radius: 14px; background: #f1eee6; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px 24px; }.summary-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; color: var(--muted); font-size: 12px; }.summary-row strong { color: var(--ink); white-space: nowrap; }.summary-row.total { padding-top: 9px; border-top: 1px solid #dcd5c9; font-weight: 800; } .summary-row.revenue-total { grid-column: 2; color: var(--ink); font-size: 13px; font-weight: 900; }.summary-row.revenue-total strong { color: var(--good); font-size: 16px; } .modal-actions { position: sticky; bottom: 0; z-index: 4; min-height: 66px; margin: 24px -22px 0; padding: 12px 22px; display: flex; justify-content: flex-end; align-items: center; gap: 9px; border-top: 1px solid var(--line); background: rgba(255,253,248,.96); backdrop-filter: blur(8px); } .modal-actions .btn { min-width: 96px; } /* Keep popup controls above notification/bell layers in desktop WebView2. */ .modal.open .modal-close, .modal.open .modal-actions, .modal.open .modal-actions button, .modal.open .modal-actions a { position: relative; z-index: 100120; pointer-events: auto; } /* Ticket and assignment controls stay in sight throughout the scroll. */ .modal.open .hap-fixed-form-actions{position:fixed!important;left:0;right:0;bottom:0!important;width:100%;margin:0!important;box-sizing:border-box;z-index:100120;box-shadow:0 -8px 20px rgba(20,45,42,.08)} .modal.open .modal-body{overscroll-behavior:contain;padding-bottom:145px} @media(max-width:767px){.modal.open .hap-fixed-form-actions{left:8px;right:8px;bottom:8px!important;width:auto}} body.hap-wm-admin-app #wpcontent { margin-left: 248px; padding-left: 0; } body.hap-wm-admin-app .sidebar { position: fixed; left: 0; top: 0; width: 248px; } body.hap-wm-admin-app .hap-admin-topbar { margin: 0 28px 10px; padding-top: 18px; } body.hap-wm-admin-app .wrap { margin: 0 28px; } .hap-analytics { padding-bottom: 36px; }.hap-analytics-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 20px; }.hap-analytics-head h1 { margin: 3px 0 6px; color: var(--ink); font-size: 28px; }.hap-analytics-head p { margin: 0; color: var(--muted); }.hap-period-cards { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }.hap-period-card { position: relative; overflow: hidden; padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(145deg,#fffefa,#f6f2e9); box-shadow: 0 10px 28px rgba(31,61,55,.06); }.hap-period-card:after { content:""; position:absolute; right:-36px; top:-45px; width:130px; height:130px; border-radius:50%; background:rgba(232,154,74,.11); }.hap-period-card-head { position:relative; z-index:1; display:flex; justify-content:space-between; gap:12px; }.hap-period-card-head span { display:block; color:var(--ink); font-size:14px; font-weight:850; }.hap-period-card-head small { display:block; margin-top:4px; color:var(--muted); font-size:10px; }.hap-period-card-head em { height:max-content; padding:5px 8px; border-radius:999px; color:var(--good); background:#e5f4ed; font-size:10px; font-style:normal; font-weight:800; }.hap-period-revenue { position:relative; z-index:1; margin-top:22px; color:var(--ink); font-size:27px; line-height:1; font-weight:900; letter-spacing:-.03em; }.hap-period-caption { margin-top:7px; color:var(--muted); font-size:10px; }.hap-mini-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:18px; padding-top:14px; border-top:1px solid var(--line); }.hap-mini-metrics span,.hap-mini-metrics strong { display:block; }.hap-mini-metrics span { color:var(--muted); font-size:9px; }.hap-mini-metrics strong { margin-top:4px; color:var(--ink); font-size:11px; }.hap-analytics-panel { margin-top:16px; padding:20px; border:1px solid var(--line); border-radius:18px; background:#fff; box-shadow:0 8px 24px rgba(31,61,55,.045); }.hap-analytics-panel-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:17px; }.hap-analytics-panel-head h2 { margin:0 0 4px; color:var(--ink); font-size:18px; }.hap-analytics-panel-head p { margin:0; color:var(--muted); font-size:11px; }.hap-analytics-count { padding:6px 9px; border-radius:999px; color:#355d52; background:#eaf4f0; font-size:10px; font-weight:800; }.hap-revenue-chart { display:grid; gap:14px; }.hap-chart-row { display:grid; grid-template-columns:115px minmax(140px,1fr) 150px; align-items:center; gap:14px; }.hap-chart-row > span { color:var(--muted); font-size:11px; font-weight:700; }.hap-chart-row > strong { color:var(--ink); text-align:right; font-size:12px; }.hap-chart-track { height:12px; overflow:hidden; border-radius:999px; background:#edf0ed; }.hap-chart-track i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--accent),#f2bd75); }.hap-analytics-filter { display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; }.hap-analytics-filter label { display:grid; gap:5px; color:var(--muted); font-size:10px; font-weight:750; }.hap-analytics-filter input { min-height:38px; border:1px solid var(--line); border-radius:9px; padding:7px 10px; }.hap-custom-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:16px; }.hap-custom-summary article { padding:14px; border-radius:13px; background:#f7f5ef; }.hap-custom-summary span,.hap-custom-summary strong,.hap-custom-summary small { display:block; }.hap-custom-summary span { color:var(--muted); font-size:10px; }.hap-custom-summary strong { margin-top:7px; color:var(--ink); font-size:18px; }.hap-custom-summary small { margin-top:5px; color:#87908d; font-size:9px; line-height:1.4; }.hap-export-form { margin-top:14px; text-align:right; }.hap-analytics-table th { white-space:nowrap; }.hap-analytics-table td.money { white-space:nowrap; text-align:right; }.hap-zalo-modal { width:min(680px,calc(100vw - 36px)); }.hap-zalo-success { margin-bottom:14px; padding:11px 13px; border-radius:11px; color:#176044; background:#e2f3eb; font-size:12px; font-weight:800; }.hap-zalo-message-label { display:block; margin-bottom:6px; color:var(--muted); font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; }.hap-zalo-message { display:block; width:100%; min-height:190px; resize:vertical; padding:13px; border:1px solid var(--line); border-radius:12px; color:var(--ink); background:#fffefa; font:12px/1.65 ui-monospace,SFMono-Regular,Consolas,monospace; } /* The Zalo copy prompt must stay above an assignment/work-order popup that is intentionally reopened after an Admin draft save. */ .hap-zalo-overlay.overlay.open { z-index: 100300; } .hap-zalo-modal.modal.open { z-index: 100310; } .hap-period-shortcuts { display:flex; gap:7px; flex-wrap:wrap; margin:-5px 0 13px; }.hap-period-shortcuts a { padding:6px 10px; border:1px solid var(--line); border-radius:999px; color:var(--ink); background:#faf8f2; font-size:10px; font-weight:750; text-decoration:none; }.hap-period-shortcuts a:hover { border-color:var(--accent); color:var(--accent); } .hap-period-card-selector{position:relative;z-index:2;margin-left:auto}.hap-period-card-selector label{display:block}.hap-period-card-selector input,.hap-period-card-selector select{box-sizing:border-box;width:126px;height:36px;margin:0;padding:0 10px;border:1px solid #d7e3de;border-radius:10px;background:#fff;color:#17364f;font-family:inherit;font-size:12px;font-weight:750;box-shadow:0 4px 12px rgba(31,61,55,.06);cursor:pointer}.hap-period-card-selector input:hover,.hap-period-card-selector select:hover,.hap-period-card-selector input:focus,.hap-period-card-selector select:focus{border-color:#4d91dd;outline:0;box-shadow:0 0 0 3px rgba(37,99,235,.11)}.hap-period-card-head:has(.hap-period-card-selector){align-items:flex-start}.hap-period-card-head:has(.hap-period-card-selector)>em{flex:0 0 auto}@media(max-width:782px){.hap-period-card-head{flex-wrap:wrap}.hap-period-card-selector{order:3;width:100%;margin:6px 0 0}.hap-period-card-selector input,.hap-period-card-selector select{width:100%;height:40px}.hap-period-card-head:has(.hap-period-card-selector)>em{margin-left:auto}} body.hap-system-page, body.hap-wm-admin-app { color: var(--hap-ink); background: radial-gradient(circle at 100% 0%, rgba(232, 154, 74, .11), transparent 28rem), var(--hap-canvas); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } body.hap-system-page { margin: 0; min-height: 100vh; } body.hap-system-page * { box-sizing: border-box; } body.hap-system-page a { color: var(--hap-ink-2); } #hap-system-content { min-height: 100vh; } .hap-app-shell { min-height: 100vh; display: grid; grid-template-columns: 248px minmax(0, 1fr); } .hap-app-sidebar { position: sticky; top: 0; height: 100vh; padding: 24px 18px; z-index: 70; background: var(--hap-ink); color: #fff; display: flex; flex-direction: column; overflow: auto; } .hap-app-brand { display: flex; gap: 12px; align-items: center; padding: 0 8px 24px; } .hap-brand-mark { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 13px; display: grid; place-items: center; color: #fff; background: var(--hap-accent); font-weight: 900; letter-spacing: -.06em; font-size: 17px; box-shadow: inset 0 -5px 12px rgba(114, 61, 20, .16); } .hap-app-brand strong { display: block; color: #fff; font-size: 15px; line-height: 1.25; } .hap-app-brand small { display: block; color: rgba(255,255,255,.58); font-size: 11px; margin-top: 3px; } .hap-nav-label { padding: 12px 12px 8px; color: rgba(255,255,255,.42); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } .hap-app-nav { display: grid; gap: 5px; } .hap-nav-item { width: 100%; border: 0; border-radius: 12px; padding: 11px 12px; display: flex; gap: 11px; align-items: center; color: rgba(255,255,255,.72) !important; background: transparent; text-align: left; text-decoration: none; transition: .2s ease; } .hap-nav-item:hover { background: rgba(255,255,255,.06); color: #fff !important; } .hap-nav-item.is-active { background: rgba(255,255,255,.11); color: #fff !important; box-shadow: inset 3px 0 var(--hap-accent); } .hap-nav-item > span { width: 20px; text-align: center; } .hap-sidebar-note { margin-top: auto; padding: 15px; border: 1px solid rgba(255,255,255,.09); border-radius: 15px; background: rgba(255,255,255,.055); color: rgba(255,255,255,.66); font-size: 12px; line-height: 1.5; } .hap-sidebar-note strong { display: block; color: #fff; margin-bottom: 4px; } .hap-app-main { min-width: 0; padding: 18px 28px 42px; } .hap-app-topbar, .hap-admin-topbar { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 24px; } .hap-mobile-menu { display: none; border: 0; background: var(--hap-paper); border-radius: 12px; width: 42px; height: 42px; color: var(--hap-ink); cursor: pointer; } .hap-role-pill { padding: 8px 12px; border: 1px solid var(--hap-line); border-radius: 12px; background: rgba(255,255,255,.68); font-size: 11px; font-weight: 800; letter-spacing: .08em; color: var(--hap-muted); } .hap-user-chip { display: flex; gap: 9px; align-items: center; } .hap-user-avatar { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; background: var(--hap-accent-soft); color: #9d5e22; font-weight: 850; } .hap-user-chip strong { display: block; color: var(--hap-ink); font-size: 13px; } .hap-user-chip small { display: block; color: var(--hap-muted); font-size: 11px; margin-top: 2px; } .hap-user-chip a { color: var(--hap-muted); } .hap-app-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(19,46,43,.42); opacity: 0; pointer-events: none; transition: .2s; } .hap-app-backdrop.is-open { opacity: 1; pointer-events: auto; } .hap-page-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 22px; } .hap-page-head h1, body.hap-wm-admin-app .wrap > h1, body.hap-wm-admin-app .wp-heading-inline { margin: 0 0 7px; color: var(--hap-ink); font-family: Georgia, "Times New Roman", serif; font-size: clamp(30px, 3vw, 43px); letter-spacing: -.035em; line-height: 1.04; font-weight: 700; } .hap-page-head p { margin: 0; color: var(--hap-muted); } .hap-eyebrow { color: var(--hap-accent); font-size: 11px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; margin-bottom: 8px; } .hap-page-actions { display: flex; gap: 9px; flex-wrap: wrap; justify-content: flex-end; } .hap-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; } .hap-stat-card { position: relative; overflow: hidden; padding: 19px; background: var(--hap-paper); border: 1px solid var(--hap-line); border-radius: var(--hap-radius); box-shadow: 0 8px 30px rgba(30,59,54,.04); } .hap-stat-card::after { content: ""; position: absolute; width: 78px; height: 78px; border-radius: 50%; right: -28px; top: -28px; background: rgba(232,154,74,.13); } .hap-stat-card span { display: block; color: var(--hap-muted); font-weight: 650; font-size: 12px; } .hap-stat-card strong { display: block; margin: 10px 0 7px; color: var(--hap-ink); font-size: clamp(21px, 2vw, 27px); letter-spacing: -.03em; } .hap-stat-card small { color: var(--hap-muted); font-size: 11px; } .hap-app-panel, body.hap-system-page .hap-wm-card, body.hap-wm-admin-app .hap-card { background: var(--hap-paper) !important; border: 1px solid var(--hap-line) !important; border-radius: var(--hap-radius) !important; box-shadow: 0 8px 30px rgba(30,59,54,.045); overflow: hidden; } .hap-app-panel { margin-bottom: 16px; } .hap-panel-head { padding: 18px 19px 13px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .hap-panel-head h2, body.hap-system-page .hap-wm-card > h3, body.hap-wm-admin-app .hap-card > h2 { margin: 0; color: var(--hap-ink); font-family: Georgia, "Times New Roman", serif; font-size: 21px; } .hap-month-overview > h2 { margin-bottom: 20px !important; } .hap-month-overview .hap-grid > div { color: var(--hap-muted); font-size: 13px; line-height: 1.5; } .hap-month-overview .hap-grid > div > strong { display: inline-block; margin-top: 7px; color: var(--hap-ink); font-size: clamp(21px,2vw,27px); line-height: 1.1; letter-spacing: -.025em; } .hap-panel-head p { margin: 5px 0 0; color: var(--hap-muted); font-size: 12px; } .hap-chip { display: inline-flex; align-items: center; border: 1px solid var(--hap-line); border-radius: 999px; padding: 7px 11px; background: var(--hap-ink); color: #fff !important; font-size: 11px; font-weight: 700; text-decoration: none; white-space: nowrap; } .hap-dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(270px, .75fr); gap: 16px; } .hap-table-wrap { overflow: auto; border-top: 1px solid #eee9df; } .hap-table-wrap table { width: 100%; min-width: 760px; border-collapse: collapse; } .hap-table-wrap th { padding: 11px 16px; text-align: left; color: #89918e; background: #fbf9f4; font-size: 10px; text-transform: uppercase; letter-spacing: .07em; } .hap-table-wrap td { padding: 14px 16px; border-top: 1px solid #eee9df; font-size: 12px; vertical-align: middle; } .hap-table-wrap tbody tr:hover { background: #fffaf2; } .hap-activity { padding: 4px 18px 14px; } .hap-activity p { margin: 0; padding: 14px 0; border-top: 1px solid #eee9df; } .hap-activity strong,.hap-activity span { display: block; } .hap-activity span { margin-top: 4px; color: var(--hap-muted); font-size: 11px; } /* Employee portal */ body.hap-system-page .hap-wm-portal { max-width: none !important; margin: 0 !important; color: var(--hap-ink) !important; } body.hap-system-page .hap-wm-card { max-width: none; padding: 20px !important; margin: 0 0 16px !important; } body.hap-system-page .hap-portal-intro, body.hap-system-page .hap-profile-legacy { display: none !important; } body.hap-system-page .hap-wm-card p { color: var(--hap-muted); line-height: 1.55; } body.hap-system-page .hap-wm-card ul { color: var(--hap-muted); } body.hap-system-page .hap-wm-grid { gap: 13px !important; } body.hap-system-page .hap-wm-grid > div { min-width: 0; } body.hap-system-page .hap-wm-field label { color: #55635f; font-size: 11px; font-weight: 750; } body.hap-system-page .hap-wm-field input, body.hap-system-page .hap-wm-field select, body.hap-system-page .hap-wm-field textarea, body.hap-system-page .hap-section input, body.hap-system-page .hap-section select, body.hap-system-page .hap-section textarea { border: 1px solid var(--hap-line) !important; border-radius: 11px !important; background: #fffefa !important; color: var(--hap-ink) !important; padding: 10px 11px !important; } body.hap-system-page input:focus, body.hap-system-page select:focus, body.hap-system-page textarea:focus { border-color: var(--hap-accent) !important; box-shadow: 0 0 0 3px rgba(232,154,74,.13) !important; outline: none; } body.hap-system-page .hap-wm-btn, body.hap-system-page .hap-primary { display: inline-flex !important; align-items: center; justify-content: center; border: 1px solid var(--hap-ink) !important; border-radius: 12px !important; padding: 10px 15px !important; background: var(--hap-ink) !important; color: #fff !important; font-weight: 750; text-decoration: none; } body.hap-system-page .hap-link-btn { color: var(--hap-ink-2) !important; } body.hap-system-page .hap-work-row { display: grid; gap: 10px; padding: 16px !important; margin: 10px 0 !important; border: 1px solid var(--hap-line) !important; border-radius: 15px !important; background: #fffefa; } body.hap-system-page .hap-work-row p { margin: 0; } body.hap-system-page .hap-status { display: inline-flex !important; align-items: center; gap: 6px; border-radius: 999px !important; padding: 6px 9px !important; font-size: 10px !important; font-weight: 800 !important; white-space: nowrap; } body.hap-system-page .hap-status::before, body.hap-wm-admin-app .hap-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .hap-status-completed { color: var(--hap-good) !important; background: #e8f5f0 !important; } .hap-status-new { color:#0d684b!important;background:#dff4e9!important; } .hap-status-old,.hap-status-pending,.hap-status-draft { color: var(--hap-warn) !important; background: #fff2df !important; } .hap-status-waiting { color:#8a5b16!important;background:#fff0d3!important; } .hap-status-overdue { color: var(--hap-bad) !important; background: #fbeceb !important; } body.hap-system-page .hap-wm-result { border-left-color: var(--hap-accent) !important; background: #fff8ed !important; border-radius: 0 12px 12px 0; } body.hap-system-page .hap-repeat-row { border-color: var(--hap-line) !important; border-radius: 13px !important; background: #fffefa !important; } body.hap-system-page .hap-summary { background: #f7f3ea !important; border: 1px solid var(--hap-line); border-radius: 13px !important; } .hap-profile-banner { position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; padding: 22px; margin-bottom: 16px; border-radius: 22px; color: #fff; background: linear-gradient(125deg, var(--hap-ink), #2a645c); box-shadow: var(--hap-shadow); } .hap-profile-banner::after { content: ""; position: absolute; width: 240px; height: 240px; right: -90px; top: -150px; border: 45px solid rgba(255,255,255,.06); border-radius: 50%; } .hap-profile-avatar { width: 76px; height: 76px; border-radius: 24px; display: grid; place-items: center; overflow: hidden; background: var(--hap-accent); color: #fff; font-size: 24px; font-weight: 900; z-index: 1; } .hap-profile-avatar img { width: 100%; height: 100%; object-fit: cover; } .hap-profile-banner h2 { margin: 0 0 5px; color: #fff; font-family: Georgia, "Times New Roman", serif; font-size: 25px; } .hap-profile-banner p { margin: 0; color: rgba(255,255,255,.67); } .hap-profile-facts { display: flex; gap: 22px; margin-top: 13px; flex-wrap: wrap; } .hap-profile-facts span { color: rgba(255,255,255,.58); font-size: 11px; } .hap-profile-facts strong { display: block; color: #fff; margin-top: 2px; font-size: 12px; } .hap-employee-status { align-self: start; padding: 8px 11px; border-radius: 999px; background: rgba(255,255,255,.11); font-weight: 800; font-size: 11px; z-index: 1; } /* Login */ body.hap-system-page .hap-login-shell { min-height: 100vh !important; padding: 24px !important; background: radial-gradient(circle at 78% 18%, rgba(232,154,74,.18), transparent 26rem), linear-gradient(125deg, #123633, var(--hap-ink-2)); } body.hap-system-page .hap-login-card { max-width: 440px !important; padding: 36px !important; border: 1px solid rgba(255,255,255,.35) !important; border-radius: 22px !important; background: var(--hap-paper) !important; box-shadow: 0 28px 80px rgba(8,31,28,.3) !important; } body.hap-system-page .hap-login-brand h1 { color: var(--hap-ink) !important; font-family: Georgia, "Times New Roman", serif; font-size: 31px !important; } body.hap-system-page .hap-login-card .button-primary { background: var(--hap-ink) !important; border-radius: 12px !important; } /* WordPress Admin app */ body.hap-wm-admin-app *, body.hap-wm-admin-app *::before, body.hap-wm-admin-app *::after { box-sizing: border-box; } body.hap-wm-admin-app #adminmenumain, body.hap-wm-admin-app #wpadminbar, body.hap-wm-admin-app #wpfooter, body.hap-wm-admin-app .update-nag { display: none !important; } html.wp-toolbar:has(body.hap-wm-admin-app) { padding-top: 0; } body.hap-wm-admin-app #wpcontent { margin-left: 248px; padding-left: 0; } body.hap-wm-admin-app #wpbody { padding-top: 0; } body.hap-wm-admin-app #wpbody-content { padding-bottom: 42px; } body.hap-wm-admin-app .hap-app-sidebar { position: fixed; left: 0; top: 0; width: 248px; box-sizing: border-box; } body.hap-wm-admin-app .hap-admin-topbar { margin: 0 28px 24px; padding-top: 18px; } .hap-admin-context { display: flex; gap: 10px; align-items: center; } .hap-admin-context span { padding: 7px 9px; border-radius: 10px; background: var(--hap-accent-soft); color: #9d5e22; font-size: 10px; font-weight: 850; letter-spacing: .08em; } .hap-admin-context strong { color: var(--hap-ink); } body.hap-wm-admin-app .wrap { margin: 0 28px; color: var(--hap-ink); } body.hap-wm-admin-app .wrap > p { color: var(--hap-muted); } body.hap-wm-admin-app .wp-header-end { border: 0; margin: 8px 0 18px; } body.hap-wm-admin-app .page-title-action, body.hap-wm-admin-app .button { min-height: 38px; border: 1px solid var(--hap-line); border-radius: 12px; padding: 8px 14px; background: var(--hap-paper); color: var(--hap-ink); font-weight: 700; box-shadow: none; } body.hap-wm-admin-app .button-primary, body.hap-wm-admin-app .page-title-action { background: var(--hap-ink) !important; border-color: var(--hap-ink) !important; color: #fff !important; } body.hap-wm-admin-app .hap-card { max-width: none !important; padding: 20px !important; } body.hap-wm-admin-app .hap-field input, body.hap-wm-admin-app .hap-field select, body.hap-wm-admin-app .hap-field textarea { min-height: 42px; border: 1px solid var(--hap-line); border-radius: 11px; background: #fffefa; padding: 8px 11px; } body.hap-wm-admin-app .description { color: var(--hap-muted); } body.hap-wm-admin-app .hap-status { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 6px 9px; font-size: 10px; font-weight: 800; white-space: nowrap; } body.hap-wm-admin-app .widefat { border: 0; border-collapse: collapse; background: transparent; box-shadow: none; } body.hap-wm-admin-app .widefat thead th { padding: 11px 16px; color: #89918e; background: #fbf9f4; border-bottom: 1px solid #eee9df; font-size: 10px; text-transform: uppercase; letter-spacing: .07em; } body.hap-wm-admin-app .widefat td { padding: 14px 16px; border-bottom: 1px solid #eee9df; vertical-align: middle; } body.hap-wm-admin-app .widefat tbody tr:hover { background: #fffaf2; } body.hap-wm-admin-app .wrap > .widefat { overflow: hidden; border: 1px solid var(--hap-line); border-radius: var(--hap-radius); background: var(--hap-paper); } body.hap-wm-admin-app .notice { margin: 0 0 16px; border-radius: 12px; } body.hap-wm-admin-app .tablenav { margin: 14px 0; } /* Employee work history */ .hap-employee-name a { color: var(--hap-ink) !important; text-decoration: none; } .hap-employee-name a:hover { color: var(--hap-ink-2) !important; text-decoration: underline; } .hap-employee-name small,.hap-employee-work-list td small { display: block; margin-top: 4px; color: var(--hap-muted); } .hap-employee-row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; white-space: nowrap; } .hap-employee-work-head { display:grid;grid-template-columns:minmax(160px,.65fr) minmax(300px,1.5fr) auto;align-items:center;gap:20px;padding:22px;margin-bottom:16px;border-radius:22px;color:#fff;background:linear-gradient(125deg,var(--hap-ink),#2a645c);box-shadow:var(--hap-shadow); } .hap-employee-work-head .hap-back-link { color: rgba(255,255,255,.72) !important; text-decoration: none; } .hap-employee-work-head .hap-back-link:hover { color: #fff !important; } .hap-employee-work-head > .button { justify-self:end;color:var(--hap-ink)!important;background:#fff!important;border-color:rgba(255,255,255,.7)!important; } .hap-employee-work-profile { min-width:0;display:flex;align-items:center;gap:15px; } .hap-employee-work-avatar { width:62px;height:62px;flex:0 0 62px;display:grid;place-items:center;overflow:hidden;border-radius:18px;color:#fff;background:var(--hap-accent);font-size:18px;font-weight:900; } .hap-employee-work-avatar img { width: 100%; height: 100%; object-fit: cover; } .hap-employee-work-profile span { display: block; color: rgba(255,255,255,.62); font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; } .hap-employee-work-profile h1 { margin:3px 0 4px;color:#fff;font-family:Georgia,"Times New Roman",serif;font-size:clamp(24px,2.4vw,34px);line-height:1.05; } .hap-employee-work-profile p { margin: 0; color: rgba(255,255,255,.68); } .hap-employee-page-back{display:inline-block;margin:0 0 8px;color:var(--hap-ink)!important;text-decoration:none;font-weight:700}.hap-employee-page-back:hover{text-decoration:underline}.hap-employee-work-page .hap-employee-work-head{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;overflow:hidden;padding:18px 22px}.hap-employee-work-page .hap-employee-work-head::after{content:"";position:absolute;z-index:0;width:250px;height:250px;right:-80px;top:-175px;border:42px solid rgba(255,255,255,.055);border-radius:50%;pointer-events:none}.hap-employee-work-page .hap-employee-work-profile{position:relative;z-index:1;display:flex;align-items:center;gap:16px;text-align:left}.hap-employee-work-page .hap-employee-work-avatar{width:70px;height:70px;flex:0 0 70px;border:4px solid rgba(255,255,255,.92);border-radius:20px;font-size:19px;box-shadow:0 7px 18px rgba(5,34,30,.22)}.hap-employee-work-body{min-width:0}.hap-employee-work-identity{margin:0}.hap-employee-work-page .hap-employee-work-profile h1{margin:0 0 5px;font-size:clamp(23px,2vw,29px)}.hap-employee-work-facts{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:8px 20px;width:100%;margin-top:12px}.hap-employee-work-facts span{flex:0 1 auto;min-width:105px;color:rgba(255,255,255,.58);letter-spacing:0;text-transform:none}.hap-employee-work-facts strong{display:block;margin-top:2px;color:#fff;font-size:11px;overflow-wrap:anywhere}.hap-employee-work-side{position:relative;z-index:1;display:flex;align-items:center;gap:7px;margin-left:16px}.hap-employee-work-status{display:inline-flex;align-items:center;gap:5px;padding:7px 11px;border-radius:999px;background:rgba(255,255,255,.11);font-size:11px;font-weight:900;white-space:nowrap}.hap-employee-work-status .employment-dot{margin:0}.hap-employee-edit-mini{display:inline-flex;align-items:center;min-height:28px;padding:0 9px;border:1px solid rgba(255,255,255,.28);border-radius:999px;color:#fff!important;background:rgba(255,255,255,.08);text-decoration:none;font-size:10px;font-weight:800;white-space:nowrap}.hap-employee-edit-mini:hover{background:rgba(255,255,255,.17)} .hap-employee-work-stats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; margin-bottom: 16px; } .hap-employee-work-stats article { position: relative; overflow: hidden; padding: 18px; border: 1px solid var(--hap-line); border-radius: var(--hap-radius); background: var(--hap-paper); box-shadow: 0 8px 30px rgba(30,59,54,.04); } .hap-employee-work-stats article::after { content: ""; position: absolute; top: -31px; right: -28px; width: 76px; height: 76px; border-radius: 50%; background: var(--hap-accent-soft); } .hap-employee-work-stats span { display: block; color: var(--hap-muted); font-size: 11px; font-weight: 700; } .hap-employee-work-stats strong { display: block; margin: 9px 0 6px; color: var(--hap-ink); font-size: 25px; line-height: 1; } .hap-employee-work-stats small { color: var(--hap-muted); font-size: 10px; line-height: 1.45; } body.hap-wm-admin-app .hap-employee-work-filter { margin: 0 0 16px !important; padding: 17px 18px !important; } .hap-employee-filter-grid { display: grid; grid-template-columns: 140px 140px 180px 180px minmax(190px,1fr); gap: 12px; align-items: end; } .hap-employee-work-filter .hap-field label { color: var(--hap-muted); font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; } .hap-filter-actions { display: flex; align-items: center; gap: 10px; margin-top: 13px; } .hap-filter-actions > a:not(.button) { margin-left: 2px; } body.hap-wm-admin-app .hap-employee-work-list { margin-top: 0 !important; padding: 0 !important; overflow: hidden; } .hap-employee-work-list-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 20px; border-bottom: 1px solid var(--hap-line); } .hap-employee-work-list-head h2 { margin: 0 0 4px; color: var(--hap-ink); font-family: Georgia,"Times New Roman",serif; font-size: 22px; } .hap-employee-work-list-head p { margin: 0; color: var(--hap-muted); font-size: 11px; } .hap-employee-work-list-head > strong { padding: 7px 10px; border-radius: 999px; color: #9d5e22; background: var(--hap-accent-soft); font-size: 11px; white-space: nowrap; } .hap-employee-work-list-actions { display:flex;align-items:center;justify-content:flex-end;gap:9px;flex:0 0 auto; } .hap-employee-work-list-actions > strong { padding:7px 10px;border-radius:999px;color:#9d5e22;background:var(--hap-accent-soft);font-size:11px;white-space:nowrap; } .hap-employee-work-list-actions .button { display:inline-flex;align-items:center;justify-content:center;margin:0;white-space:nowrap; } .hap-table-scroll { max-width: 100%; overflow-x: auto; } .hap-employee-work-list table { min-width: 1080px; } .hap-employee-work-list .hap-employee-work-view-col { width: 78px; text-align: center; white-space: nowrap; } .hap-employee-work-list td.hap-employee-work-view-col { text-align: center; vertical-align: middle; } .hap-employee-work-list .hap-employee-work-view { min-height: 30px; padding: 4px 12px; border-radius: 8px; font-size: 12px; line-height: 1.2; } .hap-employee-work-list td:nth-child(4) { min-width: 230px; line-height: 1.45; } .hap-employee-work-list td:last-child { text-align: right; white-space: nowrap; } .hap-work-source { display: inline-flex; align-items: center; padding: 6px 9px; border-radius: 999px; font-size: 10px; font-weight: 800; white-space: nowrap; } .hap-work-source.assigned { color: #9d5e22; background: var(--hap-accent-soft); } .hap-work-source.self_created { color: #356b9b; background: #eaf2fb; } .hap-empty-work { padding: 26px; color: var(--hap-muted); text-align: center; } /* Customer list and work history */ .hap-customer-list-tools { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 16px; margin-bottom: 14px; border: 1px solid var(--hap-line); border-radius: 15px; background: var(--hap-paper); } .hap-customer-list-tools p { margin: 0; color: var(--hap-muted); } .hap-customer-list-tools form { display: flex; align-items: center; gap: 8px; } .hap-customer-list-tools input { width: min(310px,32vw); min-height: 38px; padding: 7px 11px; border: 1px solid var(--hap-line); border-radius: 11px; background: #fffefa; } .hap-customer-list-tools select { min-width:190px;min-height:38px;border:1px solid var(--hap-line);border-radius:11px;background:#fffefa; } .hap-customer-list td small { display: block; max-width: 330px; margin-top: 4px; color: var(--hap-muted); line-height: 1.4; } .hap-customer-name a { color: var(--hap-ink) !important; text-decoration: none; } .hap-customer-name a:hover { color: var(--hap-ink-2) !important; text-decoration: underline; } .hap-customer-state { display: inline-flex; padding: 6px 9px; border-radius: 999px; font-size: 10px; font-weight: 800; white-space: nowrap; } .hap-customer-state.active { color: var(--hap-good); background: #e8f5f0; } .hap-customer-state.inactive { color: var(--hap-muted); background: #efede7; } .hap-customer-row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 11px; white-space: nowrap; } .hap-customer-info-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin-bottom: 16px; } body.hap-wm-admin-app .hap-customer-info-grid .hap-card { margin: 0 !important; padding: 0 !important; overflow: hidden; } .hap-customer-card-head { padding: 17px 18px; border-bottom: 1px solid var(--hap-line); } .hap-customer-card-head h2 { margin: 0 0 4px; color: var(--hap-ink); font-family: Georgia,"Times New Roman",serif; font-size: 20px; } .hap-customer-card-head p { margin: 0; color: var(--hap-muted); font-size: 11px; } .hap-customer-info-list { display: grid; gap: 0; } .hap-customer-info-list article { min-width: 0; padding: 13px 18px; border-bottom: 1px solid #eee9df; } .hap-customer-info-list article:last-child { border-bottom: 0; } .hap-customer-info-list strong { display: flex; align-items: center; gap: 8px; color: var(--hap-ink); } .hap-customer-info-list em { padding: 3px 6px; border-radius: 999px; color: #9d5e22; background: var(--hap-accent-soft); font-size: 9px; font-style: normal; } .hap-customer-info-list span,.hap-customer-info-list small { display: block; margin-top: 4px; color: var(--hap-muted); line-height: 1.45; overflow-wrap: anywhere; } .hap-customer-note { display: flex; gap: 14px; padding: 13px 16px; margin-bottom: 16px; border-left: 3px solid var(--hap-accent); border-radius: 0 12px 12px 0; background: #fff5e6; } .hap-customer-note strong { color: var(--hap-ink); white-space: nowrap; } .hap-customer-note span { color: var(--hap-muted); } .hap-customer-profile-facts .hap-customer-address-fact { min-width: 230px; max-width: 390px; } .hap-customer-meta-card { display: block; } .hap-customer-meta-layout { display: grid; grid-template-columns: minmax(280px,.75fr) minmax(380px,1.25fr); gap: 16px; align-items: stretch; } .hap-customer-meta-left { display: grid; grid-template-rows: auto auto; gap: 12px; min-width: 0; } .hap-customer-meta-note { display: flex; min-width: 0; flex-direction: column; } .hap-customer-meta-note textarea { flex: 1; width: 100%; min-height: 0 !important; resize: vertical; } .hap-company-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin-top: 14px; } .hap-contact-fields { grid-template-columns: repeat(3,minmax(0,1fr)) !important; } .hap-contact-fields .hap-field:nth-child(4),.hap-contact-fields .hap-field:nth-child(5) { grid-column: span 1; } .hap-customer-history-page .hap-employee-work-side { flex-wrap: wrap; justify-content: flex-end; } body.hap-wm-admin-app .hap-customer-history-filter { margin: 0 0 16px !important; padding: 15px 18px !important; } .hap-customer-history-filter-grid { display: grid; grid-template-columns: 180px 180px minmax(260px,1fr); gap: 12px; align-items: end; } .hap-customer-history-filter .hap-filter-actions { margin: 0; } .hap-customer-history-head-actions { display: flex; align-items: center; gap: 10px; } .hap-customer-history-head-actions > strong { padding: 7px 10px; border-radius: 999px; color: #9d5e22; background: var(--hap-accent-soft); font-size: 11px; white-space: nowrap; } .hap-customer-history-head-actions form { margin: 0; } .hap-customer-history-list { scroll-margin-top: 24px; } .hap-customer-history-list table { min-width: 1880px; } .hap-customer-history-list td { line-height: 1.45; } .hap-customer-history-list td:nth-child(3) { min-width: 280px; } .hap-customer-history-list td:nth-child(5) { min-width: 210px; } .hap-customer-history-list .tablenav { padding: 0 18px; } @media (max-width: 1180px) { .hap-stats { grid-template-columns: repeat(2, minmax(0,1fr)); } .hap-dashboard-grid { grid-template-columns: 1fr; } .stats { grid-template-columns: repeat(2,minmax(0,1fr)); } .grid-2 { grid-template-columns: 1fr; } .hap-employee-work-stats { grid-template-columns: repeat(2,minmax(0,1fr)); } .hap-employee-filter-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .hap-employee-work-search { grid-column: 1 / -1; } .hap-customer-list-tools { align-items: flex-start; flex-direction: column; } .hap-customer-list-tools form { width: 100%; } .hap-customer-list-tools input { width: 100%; } .hap-customer-list-tools select { width:100%; } .hap-customer-history-filter-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .hap-customer-history-filter-grid .hap-filter-actions { grid-column: 1 / -1; } } @media (max-width: 960px) { .hap-period-cards { grid-template-columns:1fr; } .hap-custom-summary { grid-template-columns:repeat(2,minmax(0,1fr)); } .app-shell { grid-template-columns: 1fr; } .sidebar { position: fixed !important; left: 0; top: 0; width: 248px; transform: translateX(-105%); transition: .25s; box-shadow: 15px 0 40px rgba(15,42,39,.25); } .sidebar.is-open { transform: none; } .mobile-menu { display: inline-grid; place-items: center; flex: 0 0 42px; } .main { padding: 14px 18px 34px; } .hap-customer-history-head-actions { align-items: flex-end; flex-direction: column; } .hap-app-shell { grid-template-columns: 1fr; } .hap-app-sidebar { position: fixed !important; left: 0; top: 0; width: 248px; transform: translateX(-105%); transition: .25s; box-shadow: 15px 0 40px rgba(15,42,39,.25); } .hap-app-sidebar.is-open { transform: none; } .hap-mobile-menu { display: inline-grid; place-items: center; flex: 0 0 42px; } .hap-app-main { padding: 14px 18px 34px; } body.hap-wm-admin-app #wpcontent { margin-left: 0; } body.hap-wm-admin-app .hap-admin-topbar { margin: 0 18px 20px; } body.hap-wm-admin-app .wrap { margin: 0 18px; } .hap-admin-context { margin-right: auto; } .hap-employee-work-head { grid-template-columns: 1fr auto; } .hap-employee-work-head .hap-back-link { grid-column: 1 / -1; } .hap-customer-info-grid { grid-template-columns: 1fr; } .hap-contact-fields { grid-template-columns: repeat(2,minmax(0,1fr)) !important; } } @media (max-width: 680px) { .hap-analytics-head { display:block; }.hap-analytics-head .button { margin-top:12px; }.hap-custom-summary { grid-template-columns:1fr; }.hap-chart-row { grid-template-columns:90px minmax(90px,1fr); }.hap-chart-row > strong { grid-column:2; text-align:left; }.hap-mini-metrics { grid-template-columns:1fr; }.hap-analytics-panel { padding:15px; } .topbar { gap: 9px; } .role-switch,.search,.user-chip small { display: none; } .page-head { display: block; } .page-actions { justify-content: stretch; margin-top: 16px; } .page-actions .btn,.page-head > .btn { width: 100%; margin-top: 16px; } .stats { grid-template-columns: 1fr; } .profile-banner { grid-template-columns: 1fr; text-align: center; } .profile-avatar,.employee-status { justify-self: center; } .profile-facts { justify-content: center; } .assignment-card { grid-template-columns: 1fr; } .assignment-side { justify-items: start; } .modal,.modal.assignment-modal { top: 8px; right: 8px; bottom: 8px; left: 8px; width: auto; max-height: none; border-radius: 17px; transform: none; } .modal.open { transform: none; } .modal-head { padding: 15px 16px; } .modal-head h2 { font-size: 21px; } .modal-body { padding: 16px 16px 0; } .form-grid,.form-grid.hap-work-staff-grid,.readonly-grid,.summary-box { grid-template-columns: 1fr; } .summary-row.revenue-total { grid-column: 1; } .field.full,.readonly-item.full { grid-column: auto; } .repeat-row { grid-template-columns: 1fr; align-items: stretch; } .repeat-row .remove-line { justify-self: end; } .modal-actions { margin: 20px -16px 0; padding: 10px 16px; } .modal-actions .btn { flex: 1; min-width: 0; } .hap-app-topbar,.hap-admin-topbar { gap: 9px; } .hap-role-pill,.hap-admin-context strong { display: none; } .hap-user-chip small { display: none; } .hap-page-head { display: block; } .hap-page-actions { justify-content: stretch; margin-top: 16px; } .hap-page-actions .button,.hap-page-actions .hap-wm-btn { width: 100%; } .hap-stats { grid-template-columns: 1fr; } .hap-profile-banner { grid-template-columns: 1fr; text-align: center; } .hap-profile-avatar,.hap-employee-status { justify-self: center; } .hap-profile-facts { justify-content: center; } body.hap-system-page .hap-wm-grid, body.hap-system-page .hap-summary { grid-template-columns: 1fr !important; } body.hap-system-page .hap-work-head { display: block !important; } body.hap-system-page .hap-login-card { padding: 27px 20px !important; } body.hap-wm-admin-app .hap-grid { grid-template-columns: 1fr; } .hap-customer-meta-layout,.hap-company-fields,.hap-contact-fields { grid-template-columns: 1fr !important; } .hap-customer-meta-note textarea { min-height: 110px !important; } .hap-employee-row-actions { align-items: flex-end; flex-direction: column; gap: 6px; } .hap-employee-work-head { grid-template-columns:1fr;text-align:center; } .hap-employee-work-head > .button { justify-self:stretch; } .hap-employee-work-profile { flex-direction:column; } .hap-employee-work-stats,.hap-employee-filter-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .hap-employee-work-search { grid-column: 1 / -1; } .hap-employee-work-page .hap-employee-work-head{grid-template-columns:1fr;padding:14px}.hap-employee-work-page .hap-employee-work-profile{align-items:flex-start;gap:11px;text-align:left}.hap-employee-work-page .hap-employee-work-avatar{width:58px;height:58px;flex-basis:58px;border-radius:16px}.hap-employee-work-facts{gap:8px 6px}.hap-employee-work-facts span{min-width:83px;flex-basis:83px;font-size:9px}.hap-employee-work-facts strong{font-size:10px}.hap-employee-work-profile p{font-size:10px}.hap-employee-work-side{justify-content:flex-end;margin:10px 0 0}.hap-employee-work-status{padding:6px 9px}.hap-employee-edit-mini{min-height:26px} .hap-filter-actions { align-items: stretch; flex-direction: column; } .hap-filter-actions > a:not(.button) { margin: 4px 0 0; text-align: center; } .hap-employee-work-list-head { align-items: flex-start; flex-direction: column; } .hap-employee-work-list-actions { width:100%;justify-content:space-between; } .hap-customer-list-tools form { align-items: stretch; flex-direction: column; } .hap-customer-row-actions { align-items: flex-end; flex-direction: column; gap: 6px; } .hap-customer-note { align-items: flex-start; flex-direction: column; gap: 5px; } } body.hap-system-page .modal-body .hap-wm-card, body.hap-wm-admin-app .modal-body .hap-wm-card { max-width: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; overflow: visible !important; } body.hap-system-page .modal-body .hap-wm-card > h3:first-child, body.hap-wm-admin-app .modal-body .hap-wm-card > h3:first-child { display: none; } /* Chấm công & bảng lương */ .hap-payroll-page{max-width:1500px}.hap-payroll-filter{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px;margin-bottom:14px}.hap-payroll-filter-title{min-width:290px}.hap-payroll-filter-title h1{margin:2px 0 6px;color:var(--ink);font-family:Georgia,"Times New Roman",serif;font-size:clamp(26px,2.4vw,36px);letter-spacing:-.035em;line-height:1.05}.hap-payroll-filter-title p{max-width:460px;margin:0;color:var(--muted);font-size:12px;line-height:1.45}.hap-payroll-filter-controls{display:flex;align-items:end;justify-content:flex-end;gap:10px;margin-left:auto}.hap-payroll-filter label{display:grid;gap:6px;font-weight:700}.hap-payroll-filter-controls label{width:155px}.hap-payroll-filter-controls label:first-child{width:225px}.hap-payroll-filter select,.hap-payroll-filter input{width:100%;min-width:0}.hap-payroll-filter-controls .btn{white-space:nowrap}.hap-payroll-tabs{display:flex;gap:8px;margin:0 0 14px}.hap-payroll-tabs a{padding:11px 18px;border:1px solid #d8e2df;border-radius:12px;background:#fff;color:#34514b;text-decoration:none;font-weight:800}.hap-payroll-tabs a:first-child.active{background:#e96d00;color:#fff;border-color:#e96d00;box-shadow:0 8px 22px rgba(18,63,56,.18)}.hap-payroll-tabs a:last-child.active{background:#00830b;color:#fff;border-color:#00830b;box-shadow:0 8px 22px rgba(18,63,56,.18)} .hap-attendance-form,.hap-salary-form{padding:22px}.hap-sheet-title{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;margin:-22px -22px 20px;background:linear-gradient(120deg,#003660,#0067b7);color:#fff;border-radius:17px 17px 0 0}.hap-sheet-title span{font-size:17px;font-weight:900;letter-spacing:.03em}.hap-sheet-title strong{font-size:14px}.hap-attendance-note-grid{grid-template-columns:1fr}.hap-attendance-grid{display:grid;grid-template-columns:repeat(7,minmax(130px,1fr));gap:9px;margin:18px 0 24px}.hap-day-card{border:1px solid #dbe5e2;border-radius:12px;padding:9px;background:#f9fbfa;display:grid;gap:7px}.hap-day-card.sunday{background:#fff1e9;border-color:#f3c8ad}.hap-day-head{display:flex;justify-content:space-between;align-items:center}.hap-day-head strong{font-size:20px;color:#123f38}.hap-day-head span{font-size:11px;font-weight:900;color:#70827e}.hap-day-card select,.hap-day-card input{width:100%;min-width:0;font-size:12px}.hap-adjustment-head,.hap-adjustment-row{display:grid;grid-template-columns:130px 220px minmax(260px,1fr) 160px 42px;gap:9px;align-items:center}.hap-adjustment-head{padding:0 12px 7px;color:#6d7e7a;font-size:11px;font-weight:900;text-transform:uppercase}.hap-adjustment-row{padding:10px!important;border-color:#dbe5e2!important}.hap-adjustment-row>div{display:grid;gap:6px}.hap-adjustment-row input,.hap-adjustment-row select,.hap-adjustment-row textarea{width:100%}.hap-form-footer{display:flex;justify-content:space-between;align-items:center;gap:14px;margin:22px -22px -22px;padding:15px 22px;border-top:1px solid #e2e8e6;background:#fbfcfc;border-radius:0 0 17px 17px;color:#70827e}.hap-payroll-form-footer{justify-content:flex-end}.hap-payroll-actions{display:flex;justify-content:flex-end;gap:10px} .hap-half-period{display:block;padding:5px 7px;border-radius:7px;background:#fff0dc;color:#9a5a18;font-size:10px;font-weight:800;line-height:1.35}.hap-day-card.hap-attendance-status-half,.hap-day-card.hap-attendance-status-leave,.hap-day-card.hap-attendance-status-unpaid{border-color:#efa65d;background:linear-gradient(145deg,#fff4e5,#ffe5c3);box-shadow:0 5px 16px rgba(204,111,34,.14)}.hap-day-card.hap-attendance-status-half .hap-day-head strong,.hap-day-card.hap-attendance-status-leave .hap-day-head strong,.hap-day-card.hap-attendance-status-unpaid .hap-day-head strong{color:#a34f12}.hap-day-card.hap-attendance-status-holiday{border-color:#e9c863;background:#fff9d9}.hap-day-card.hap-attendance-status-off:not(.sunday){border-color:#ccd9d5;background:#eef3f1} .hap-payroll-hero{display:grid;grid-template-columns:1.2fr .7fr auto;gap:18px;align-items:center;margin:-22px -22px 18px;padding:20px 22px;background:linear-gradient(120deg,#0d5d99,#1179bc);color:#fff;border-radius:17px 17px 0 0}.hap-payroll-hero>div{display:grid;gap:5px}.hap-payroll-hero span{font-size:12px;opacity:.85}.hap-payroll-hero strong{font-size:17px}.hap-publish-state{padding:8px 11px;border-radius:999px;font-size:12px;font-weight:900;background:rgba(255,255,255,.18)}.hap-publish-state.published{background:#dff8e8;color:#16643a}.hap-salary-settings{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px;padding:15px;border:1px solid #dce7e4;border-radius:14px;background:#f7faf9}.hap-salary-settings label{display:grid;gap:6px;font-weight:800}.hap-salary-table{width:100%;border-collapse:separate;border-spacing:0;overflow:hidden;border:1px solid #d9e3e1;border-radius:13px}.hap-salary-table th{padding:13px 12px;background:#1179bc;color:#fff;text-align:center}.hap-salary-table td{padding:13px 12px;border-bottom:1px solid #e3e9e8}.hap-salary-table td:first-child{text-align:center;width:55px;font-weight:800}.hap-salary-table td small{display:block;color:#758680;margin-top:3px}.hap-salary-table .money{text-align:right;font-weight:800;white-space:nowrap}.hap-salary-table .positive,.positive{color:#087d4e}.hap-salary-table .negative,.negative{color:#c43f35}.hap-salary-table .hap-net-row td{background:#fff9c4;font-size:16px;font-weight:900;border-bottom:0}.hap-salary-table .hap-net-row td:first-child{text-align:right}.hap-salary-table .hap-net-row td:last-child{color:#d9261c;font-size:20px}.hap-payroll-note{display:grid;gap:7px;margin-top:18px;font-weight:800}.hap-payroll-note textarea{width:100%} .hap-payroll-nav{position:relative}.hap-payroll-pulse{width:10px;height:10px;margin-left:auto;border-radius:50%;background:#ef2d2d;box-shadow:0 0 0 rgba(239,45,45,.7);animation:hapPayrollPulse 1.4s infinite}.hap-new-payroll{display:flex;align-items:center;gap:8px;color:#d62f2f;font-size:11px;font-weight:950;letter-spacing:.08em}.hap-new-payroll span{width:10px;height:10px;border-radius:50%;background:#ef2d2d;animation:hapPayrollPulse 1.4s infinite}.hap-employee-payroll{margin-bottom:20px;border:1px solid #eed4d1;box-shadow:0 10px 30px rgba(38,59,54,.08)}.hap-payroll-total{text-align:right}.hap-payroll-total span{display:block;color:#6f817c;font-size:12px}.hap-payroll-total strong{display:block;color:#d52b25;font-size:27px}.hap-employee-pay-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.hap-employee-pay-grid>div{padding:13px;border-radius:11px;background:#f6f9f8}.hap-employee-pay-grid span{display:block;color:#6c7e79;font-size:11px}.hap-employee-pay-grid strong{display:block;margin-top:5px}.hap-employee-payroll details{margin-top:15px}.hap-employee-payroll summary{cursor:pointer;font-weight:800}.hap-payroll-detail-list{margin-top:10px;border-top:1px solid #e4eae8}.hap-payroll-detail-list div{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid #edf1f0}.hap-payroll-employee-note{margin-top:15px;padding:13px;border-left:4px solid #e89a4a;background:#fff8ee;border-radius:8px}.hap-payroll-employee-note p{margin:5px 0 0}@keyframes hapPayrollPulse{0%{box-shadow:0 0 0 0 rgba(239,45,45,.65)}70%{box-shadow:0 0 0 9px rgba(239,45,45,0)}100%{box-shadow:0 0 0 0 rgba(239,45,45,0)}} @media(max-width:1100px){.hap-attendance-grid{grid-template-columns:repeat(4,minmax(130px,1fr))}.hap-adjustment-head{display:none}.hap-adjustment-row{grid-template-columns:1fr 1fr}.hap-adjustment-row textarea{grid-column:1/-1}.hap-payroll-hero{grid-template-columns:1fr 1fr}.hap-employee-pay-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:1180px){.hap-payroll-filter{align-items:stretch;flex-direction:column;gap:16px}.hap-payroll-filter-controls{width:100%;margin-left:0}.hap-payroll-filter-controls label{flex:1;width:auto}} @media(max-width:680px){.hap-payroll-filter{display:grid}.hap-payroll-filter-title{min-width:0}.hap-payroll-filter-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.hap-payroll-filter-controls label{width:auto}.hap-payroll-filter select,.hap-payroll-filter input,.hap-payroll-filter-controls .btn{width:100%;min-width:0}.hap-payroll-tabs{display:grid;grid-template-columns:1fr 1fr}.hap-attendance-grid{grid-template-columns:repeat(2,minmax(120px,1fr))}.hap-adjustment-row{grid-template-columns:1fr}.hap-adjustment-row textarea{grid-column:auto}.hap-sheet-title,.hap-form-footer{align-items:flex-start;flex-direction:column}.hap-payroll-hero,.hap-salary-settings,.hap-employee-pay-grid{grid-template-columns:1fr}.hap-payroll-actions{display:grid;width:100%}.hap-payroll-total{text-align:left}.hap-salary-table{min-width:720px}} /* Chi tiết lương mở sẵn và căn lề */ .hap-employee-payroll{overflow:hidden}.hap-payroll-adjustments{margin:16px 14px 0;padding:14px 16px;border:1px solid #e2e9e7;border-radius:12px;background:#fbfcfc}.hap-payroll-adjustments h3{margin:0 0 8px;font-size:15px}.hap-payroll-adjustments .hap-payroll-detail-list{margin-top:0;border-top:1px solid #e4eae8}.hap-payroll-detail-list div{gap:18px;padding:10px 3px}.hap-payroll-detail-list div:last-child{border-bottom:0}.hap-payroll-detail-list strong{white-space:nowrap}.hap-payroll-employee-note{margin:15px 14px;padding:13px 15px} .hap-payroll-confirm-form{margin:0;flex:0 0 auto}.hap-payroll-confirm-button{min-width:132px;min-height:42px;white-space:nowrap}.hap-payroll-confirmed-badge{flex:0 0 auto;padding:8px 12px;border:1px solid #a7dbc6;border-radius:11px;background:#e4f7ee;color:#11704e;text-align:center;font-size:12px;font-weight:900}.hap-payroll-confirmed-badge small{display:block;margin-top:3px;font-size:10px;font-weight:700}.hap-confirm-state{display:block;margin-top:4px;color:#fff;font-size:11px;font-weight:800}.hap-confirm-state.confirmed{color:#fff}.hap-payroll-hero .hap-view-state,.hap-payroll-hero .hap-view-state.viewed{color:#fff} .hap-auto-leave-row td{background:#fff8f6}.hap-payroll-detail-list span small{display:block;margin-top:4px;color:#71827d;font-size:11px;line-height:1.45}.hap-payroll-detail-list span>strong{white-space:normal} /* Trung tâm thông báo */ .hap-notification-center{position:fixed;z-index:100050;top:12px;right:330px}.hap-notification-bell{position:relative;width:42px;height:42px;border:1px solid #dce5e2;border-radius:12px;background:#fff;color:#183f38;font-size:23px;line-height:1;cursor:pointer;box-shadow:0 6px 18px rgba(25,57,51,.11)}.hap-notification-bell [data-hap-notification-count]{position:absolute;right:-6px;top:-6px;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:#e43131;color:#fff;font-size:10px;font-weight:900;line-height:19px}.hap-notification-panel{position:absolute;top:50px;right:0;width:min(390px,calc(100vw - 24px));max-height:560px;border:1px solid #dce5e2;border-radius:16px;background:#fff;box-shadow:0 22px 55px rgba(15,49,43,.22);overflow:hidden}.hap-notification-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 15px;border-bottom:1px solid #e5ebe9;background:#f8faf9}.hap-notification-head>div{display:grid}.hap-notification-head strong{font-size:16px}.hap-notification-head small{color:#71817d}.hap-notification-list{max-height:450px;overflow:auto}.hap-notification-item{display:grid;grid-template-columns:38px 1fr;gap:10px;padding:12px 15px;border-bottom:1px solid #edf1f0;color:#183f38;text-decoration:none}.hap-notification-item:hover{background:#f5f9f7}.hap-notification-item.unread{background:#eef8f4}.hap-notification-item.read{opacity:.7}.hap-notification-type{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#dff2ea;color:#14644e;font-size:18px}.hap-notification-item strong,.hap-notification-item small,.hap-notification-item time{display:block}.hap-notification-item small{margin-top:3px;color:#60736e}.hap-notification-item time{margin-top:4px;color:#8b9995;font-size:10px}.hap-notification-empty{padding:30px;text-align:center;color:#73847f}.hap-toast-stack{position:fixed;right:18px;bottom:18px;display:grid;gap:10px;width:min(370px,calc(100vw - 36px));pointer-events:none}.hap-notification-toast{display:grid;grid-template-columns:38px 1fr;gap:10px;padding:14px;border:1px solid #d8e5e1;border-radius:14px;background:#fff;color:#173f37;text-decoration:none;box-shadow:0 18px 45px rgba(14,48,42,.24);opacity:0;transform:translateX(25px);transition:.25s;pointer-events:auto}.hap-notification-toast.show{opacity:1;transform:none}.hap-notification-toast>span:first-child{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#dcf2e9;color:#126348;font-size:18px}.hap-notification-toast strong,.hap-notification-toast small{display:block}.hap-notification-toast small{margin-top:4px;color:#657772} @media(max-width:900px){.hap-notification-center{top:10px;right:65px}.hap-notification-panel{position:fixed;top:62px;right:10px}.hap-payroll-adjustments{margin-left:8px;margin-right:8px;padding:12px}.hap-payroll-detail-list div{align-items:flex-start}} .hap-wm-admin-app .top-actions .hap-notification-center{position:relative;top:auto;right:auto;z-index:100050}.hap-wm-admin-app .top-actions .hap-notification-panel{right:0}.hap-notification-row{position:relative;border-bottom:1px solid #edf1f0}.hap-notification-row.unread{background:#eef8f4}.hap-notification-row.read{opacity:.72}.hap-notification-row .hap-notification-item{padding-right:42px;border-bottom:0}.hap-notification-delete{position:absolute;top:9px;right:8px;width:27px;height:27px;border:0;border-radius:8px;background:transparent;color:#81908c;font-size:20px;cursor:pointer}.hap-notification-delete:hover{background:#fee7e5;color:#bb3029}.hap-notification-permission{position:fixed;right:18px;bottom:18px;z-index:100060;display:grid;grid-template-columns:42px minmax(190px,1fr) auto 25px;gap:11px;align-items:center;width:min(520px,calc(100vw - 36px));padding:14px;border:1px solid #cfe1dc;border-radius:15px;background:#fff;box-shadow:0 20px 55px rgba(15,49,43,.25)}.hap-notification-permission[hidden]{display:none}.hap-notification-permission>span{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#dff2ea;font-size:21px}.hap-notification-permission strong,.hap-notification-permission small{display:block}.hap-notification-permission small{margin-top:3px;color:#657772}.hap-permission-close{border:0;background:transparent;color:#71817d;font-size:20px;cursor:pointer}.hap-payroll-history{display:flex;align-items:center;gap:14px;margin:0 14px 15px;padding:12px 14px;border:1px solid #e1e9e7;border-radius:12px;background:#f8faf9}.hap-payroll-history>div{display:flex;flex-wrap:wrap;gap:7px}.hap-payroll-history a{padding:6px 10px;border-radius:999px;background:#e8efed;color:#31564e;text-decoration:none;font-size:12px;font-weight:800}.hap-payroll-history a.active{background:#176b52;color:#fff}.hap-view-state{display:block;margin-top:5px;color:#74847f;font-size:11px;font-weight:700}.hap-view-state.viewed{color:#16805f}.hap-column-filters input,.hap-column-filters select{width:100%;min-width:90px;font-size:12px;font-weight:400} .hap-admin-session{display:flex;align-items:center;gap:9px;min-width:0}.hap-header-logout{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:0 12px;border:1px solid #ded9ce;border-radius:10px;background:#fff;color:#75502b!important;font-size:12px;font-weight:800;text-decoration:none!important;white-space:nowrap}.hap-header-logout:hover{border-color:#e89a4a;background:#fff8ef;color:#9d5e22!important}.hap-notification-head-actions{display:flex;align-items:center;gap:7px}.hap-notification-panel-close{display:grid;place-items:center;width:30px;height:30px;padding:0;border:1px solid #dde5e2;border-radius:9px;background:#fff;color:#667a74;font-size:21px;line-height:1;cursor:pointer}.hap-notification-panel-close:hover{border-color:#efc7c3;background:#fff0ef;color:#b8352c}.hap-notification-head [data-hap-enable-browser][disabled]{opacity:1;border-color:#b9dece;background:#e8f6ef;color:#176b52;cursor:default} .hap-notification-head [data-hap-push-state="granted"]{border-color:#efc7c3;background:#fff2f0;color:#a53a33}.hap-notification-head [data-hap-push-state="disabled"]{border-color:#b9dece;background:#edf8f3;color:#176b52} .hap-stat-link{text-decoration:none;color:inherit}.hap-stat-link:hover{color:inherit;transform:translateY(-1px)} .hap-notification-bell{display:grid;place-items:center}.hap-notification-bell svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .hap-customer-classification{display:block;width:max-content;margin-top:6px;padding:4px 8px;border-radius:999px;background:#fff0cf;color:#8a5700;font-weight:800}.hap-month-switch{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}.hap-month-switch a{padding:4px 8px;border-radius:999px;background:#edf2f0;color:#516963;text-decoration:none;font-size:11px;font-weight:800}.hap-month-switch a.active{background:#176b52;color:#fff}.hap-income-card .stat-value{margin-bottom:2px} .hap-income-month-picker{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:6px;margin-top:7px}.hap-income-month-picker label{color:#657772;font-size:10px;font-weight:800}.hap-income-month-picker input{width:100%;min-width:0;height:30px;padding:2px 5px;border:1px solid #d9e4e1;border-radius:8px;background:#fff;color:#234b43;font-size:11px;font-weight:800} .top-actions .hap-notification-center{position:relative;top:auto;right:auto;z-index:100050}.top-actions .hap-notification-panel{right:0} .hap-notification-panel{width:min(430px,calc(100vw - 24px))}.hap-notification-item{grid-template-columns:44px 1fr;gap:12px;padding:14px 17px}.hap-notification-type{width:42px;height:42px;font-size:20px}.hap-notification-item strong{font-size:14px;line-height:1.35}.hap-notification-item small{font-size:12.5px;line-height:1.45}.hap-toast-stack{width:min(430px,calc(100vw - 36px));gap:12px}.hap-notification-toast{grid-template-columns:46px 1fr;gap:13px;padding:17px 18px;border-radius:16px}.hap-notification-toast>span:first-child{width:44px;height:44px;font-size:21px}.hap-notification-toast strong{font-size:15px;line-height:1.35}.hap-notification-toast small{font-size:13px;line-height:1.45} .hap-history-full{display:block;width:100%}.hap-history-full .table-panel{width:100%} /* Telegram Bot */ .hap-telegram-page{max-width:1450px}.hap-telegram-status-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:16px}.hap-telegram-status-grid .hap-card{display:grid;gap:6px;margin:0!important;padding:17px!important}.hap-telegram-status-grid span{color:var(--hap-muted);font-size:11px;font-weight:800;text-transform:uppercase}.hap-telegram-status-grid strong{color:var(--hap-ink);font-size:15px;overflow-wrap:anywhere}.hap-telegram-status-grid small{color:var(--hap-muted);overflow-wrap:anywhere}.hap-telegram-settings h2,.hap-telegram-actions h2{margin-top:0}.hap-telegram-toggles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:18px 0}.hap-telegram-templates textarea{min-height:310px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px;line-height:1.5}.hap-telegram-templates small{display:block;margin-top:6px;color:var(--hap-muted);line-height:1.45}.hap-telegram-actions>div{display:flex;flex-wrap:wrap;gap:10px}.hap-telegram-actions form{margin:0}.hap-telegram-state,.hap-telegram-log-status{display:inline-flex;padding:5px 8px;border-radius:999px;background:#efefec;color:#68746f;font-size:10px;font-weight:900;white-space:nowrap}.hap-telegram-state.connected,.hap-telegram-log-status.sent{background:#e1f5ec;color:#08724d}.hap-telegram-log-status.revoked{background:#e8eefc;color:#315f9e}.hap-telegram-log-status.failed{background:#fde8e6;color:#b8352c}.hap-telegram-log-status.skipped{background:#fff2dc;color:#925d13}.hap-telegram-page td small{display:block;margin-top:3px;color:var(--hap-muted)}.hap-telegram-page details summary{cursor:pointer;color:#176b52;font-weight:800}.hap-telegram-page details pre{max-width:420px;max-height:260px;padding:10px;border-radius:8px;background:#f4f6f5;white-space:pre-wrap;overflow:auto}.hap-inline-check{margin-top:8px!important;font-weight:500!important}.hap-profile-actions{display:grid;justify-items:end;gap:8px}.hap-telegram-profile-state{display:inline-flex;padding:6px 9px;border-radius:999px;background:rgba(255,255,255,.12);color:#e8fff6;font-size:10px;font-weight:900}.hap-telegram-connect{border-color:rgba(255,255,255,.4)!important;background:rgba(255,255,255,.12)!important;color:#fff!important} @media(max-width:680px){.hap-notification-permission{grid-template-columns:38px 1fr 24px}.hap-notification-permission .btn{grid-column:1/-1}.hap-payroll-history{align-items:flex-start;flex-direction:column}} @media(max-width:680px){.hap-employee-payroll>.panel-head{align-items:flex-start}.hap-payroll-confirm-button{min-width:112px;padding-left:11px;padding-right:11px}.hap-payroll-confirmed-badge{max-width:122px}} @media(max-width:680px){.hap-notification-head{align-items:flex-start}.hap-notification-head-actions{gap:5px}.hap-notification-head [data-hap-enable-browser]{max-width:145px;white-space:normal;line-height:1.2}.hap-notification-panel-close{flex:0 0 30px}} @media(max-width:900px){.hap-telegram-status-grid{grid-template-columns:1fr}.hap-telegram-toggles{grid-template-columns:1fr}} @media(max-width:680px){.hap-profile-actions{justify-items:center;width:100%}.hap-telegram-templates textarea{min-height:240px}} @media(max-width:760px){.hap-order-flags.has-three{grid-template-columns:1fr}.assignment-brief-head>strong:first-child{width:100%;margin-right:0}.hap-order-head-revenue{margin-right:auto}.hap-view-statuses{justify-content:flex-start}} /* Fix-order quality tracking and payroll KPI report. */ .hap-order-flags.has-four{grid-template-columns:repeat(4,minmax(0,1fr))} .fix-check{border:1px solid #f0b5af;background:#fff3f1;color:#a52820;font-weight:800} .status.fix{background:#fee7e4;color:#b12820} .hap-fix-label,.hap-new-label{display:inline-flex!important;align-items:center;gap:5px;margin-top:5px;color:#c52b24!important;font-size:10px!important;font-weight:900!important;text-transform:uppercase;letter-spacing:.04em} .hap-fix-label i,.hap-fix-label span,.hap-new-label i{display:inline-block;width:8px;height:8px;border-radius:50%;background:#ef2d2d;box-shadow:0 0 0 rgba(239,45,45,.65);animation:hapPayrollPulse 1.4s infinite} .hap-new-label{color:#147650!important}.hap-new-label i{background:#18a66e;box-shadow:0 0 0 rgba(24,166,110,.6)} .assignment-card.assignment-old .hap-new-label i{background:#e27c16;box-shadow:0 0 0 rgba(226,124,22,.55)} .assignment-card.assignment-overdue .hap-new-label i{background:#ef2d2d;box-shadow:0 0 0 rgba(239,45,45,.65)} .hap-new-label i{box-sizing:border-box;flex:0 0 9px;width:9px!important;height:9px!important;min-width:9px;min-height:9px;border-radius:999px!important} .assignment-card.assignment-new .hap-new-label{color:#147650!important}.assignment-card.assignment-old .hap-new-label{color:#b4570b!important}.assignment-card.assignment-overdue .hap-new-label{color:#c52b24!important} .hap-assignment-group-title{display:flex;align-items:center;gap:8px;padding:1px 18px 10px;color:#2f4c72;font-size:11px;font-weight:850;letter-spacing:.025em}.hap-assignment-group-title:before{content:"";width:7px;height:7px;border-radius:50%;background:#2563eb;box-shadow:0 0 0 4px rgba(37,99,235,.1)}.hap-assignment-group-title.regular{padding-top:7px;color:#687991}.hap-assignment-group-title.regular:before{background:#94a3b8;box-shadow:none} .assignment-featured-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;padding:0 18px 11px}.assignment-featured-grid .assignment-card{grid-template-columns:112px minmax(0,1fr) auto;grid-template-areas:"when main side";align-items:start;min-width:0;min-height:0;padding:14px 15px;gap:12px}.assignment-featured-grid .assignment-when{grid-area:when;min-width:0}.assignment-featured-grid .assignment-main{grid-area:main;min-width:0}.assignment-featured-grid .assignment-side{grid-area:side;display:flex;height:100%;align-items:flex-end;align-self:stretch;justify-content:flex-end;gap:8px}.assignment-featured-grid .assignment-main h3{font-size:15px;line-height:1.25}.assignment-featured-grid .assignment-request{margin-top:7px;font-size:12.5px}.assignment-featured-grid .assignment-note{margin-top:3px;font-size:10px}.assignment-featured-grid .assignment-meta{display:flex;gap:4px 12px;font-size:11px}.assignment-featured-grid .assignment-meta span{min-width:0;overflow-wrap:anywhere}.assignment-featured-grid .assignment-side .btn{min-width:122px;min-height:34px;padding:8px 11px}.assignment-featured-grid .hap-new-label{max-width:108px;line-height:1.25} .hap-assignment-featured-shell{display:block;position:relative;margin:10px 12px 17px;padding:15px;border:1px solid #c9daeb;border-radius:20px;background:linear-gradient(145deg,#f8fbff 0%,#f1f7fd 100%);box-shadow:0 10px 28px rgba(31,76,126,.14)}.hap-assignment-featured-shell .hap-assignment-group-title{padding:0 2px 11px}.hap-assignment-featured-shell .assignment-featured-grid{padding:0} .assignment-card.assignment-fix{border-color:#efb9b4;background:linear-gradient(90deg,#fff6f4,#fff)} .hap-activity-stats{grid-template-columns:repeat(2,minmax(0,1fr))} .hap-activity-stats a.consultation{border-color:#bfe2cf;background:#eef9f3}.hap-activity-stats a.consultation:hover{border-color:#86c8a6;background:#e5f6ed}.hap-activity-stats a.consultation strong{color:#197548}.hap-activity-stats a.cancelled{border-color:#f0c5c5;background:#fff1f1}.hap-activity-stats a.cancelled:hover{border-color:#e79f9f;background:#ffe9e9}.hap-activity-stats a.cancelled strong{color:#c92f2f}.hap-activity-stats a.fix{border-color:#efd9a3;background:#fff8e7}.hap-activity-stats a.fix:hover{border-color:#e5bd62;background:#fff3d4}.hap-activity-stats a.fix strong{color:#d97800} .hap-performance-report{margin:0 0 18px;padding:15px;border:1px solid #d8e5e1;border-radius:14px;background:#f8fbfa} .hap-performance-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.hap-performance-head>div{display:grid;gap:3px}.hap-performance-head small{color:#6c7e79}.hap-performance-head>span{padding:7px 10px;border-radius:999px;background:#f1e8e4;color:#9b3e31;font-size:11px;font-weight:900}.hap-performance-head>span.qualified{background:#ddf5e9;color:#08724d} .hap-performance-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}.hap-performance-grid>div{min-width:0;padding:11px;border:1px solid #e3eae8;border-radius:11px;background:#fff}.hap-performance-grid span,.hap-performance-grid small{display:block;color:#6d7e79;font-size:10px}.hap-performance-grid strong{display:block;margin:5px 0;color:#123f38;font-size:17px}.hap-performance-grid strong.negative{color:#c43f35} @media(max-width:1100px){.hap-order-flags.has-four{grid-template-columns:repeat(2,minmax(0,1fr))}.hap-performance-grid{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:760px){.hap-order-flags.has-four{grid-template-columns:repeat(2,minmax(0,1fr))}.hap-order-flags .check-line{min-height:82px;padding:9px}.hap-order-flags .check-line strong{font-size:11px}.hap-order-flags .check-line small{font-size:9px}.hap-performance-head{align-items:flex-start;flex-direction:column}.hap-performance-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hap-activity-stats{grid-template-columns:repeat(2,minmax(0,1fr));padding:0 12px 14px}.hap-activity-stats a{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:7px;min-width:0;min-height:72px;padding:10px}.hap-activity-stats a:before{width:32px;height:32px;flex-basis:32px;background-size:18px}.hap-activity-stats span{font-size:10px;line-height:1.25}.hap-activity-stats strong{font-size:19px}} @media(max-width:680px){.hap-assignment-group-title{padding:1px 11px 8px}.hap-assignment-group-title.regular{padding-top:6px}.assignment-featured-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:0 10px 12px}.assignment-featured-grid .assignment-card{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"when" "main" "side";align-self:stretch;min-height:0;padding:11px;gap:7px;border-radius:13px}.assignment-featured-grid .assignment-when{gap:3px}.assignment-featured-grid .assignment-when strong{font-size:17px}.assignment-featured-grid .assignment-main h3{font-size:14px;overflow-wrap:anywhere}.assignment-featured-grid .assignment-request{margin-top:6px;font-size:12px}.assignment-featured-grid .assignment-note{display:-webkit-box;overflow:hidden;margin-top:3px;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-size:10px}.assignment-featured-grid .assignment-meta{display:grid;gap:3px;font-size:10.5px}.assignment-featured-grid .assignment-side{height:auto;align-items:stretch;align-self:stretch;justify-content:flex-start}.assignment-featured-grid .assignment-side .btn{width:100%;min-width:0;min-height:36px;padding:8px 6px;font-size:10px;line-height:1.25;white-space:normal}.assignment-featured-grid .hap-new-label{max-width:none;font-size:9px!important;line-height:1.25}.assignment-featured-grid .hap-new-label i{flex-basis:8px;width:8px!important;height:8px!important;min-width:8px;min-height:8px}} @media(max-width:680px){.hap-assignment-featured-shell{margin:8px 6px 14px;padding:10px;border-radius:17px;box-shadow:0 8px 22px rgba(31,76,126,.14)}.hap-assignment-featured-shell .hap-assignment-group-title{padding:0 1px 9px}.hap-assignment-featured-shell .assignment-featured-grid{padding:0}} /* Admin operations and dispatch calendar. */ .hap-operations-page{max-width:1600px;color:#173f37}.hap-ops-hero{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:18px 0;padding:24px 26px;border-radius:20px;background:linear-gradient(125deg,#103e37,#1d6b5c);color:#fff;box-shadow:0 18px 45px rgba(15,55,47,.2)}.hap-ops-hero h1{margin:4px 0;color:#fff}.hap-ops-hero p{margin:0;color:#d7eee7}.hap-ops-actions{display:flex;gap:9px}.hap-ops-actions .button{min-height:39px;padding:5px 14px;border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.12);color:#fff}.hap-ops-actions .button-primary{background:#ed9c4d;border-color:#ed9c4d} .hap-ops-kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-bottom:14px}.hap-ops-kpi{display:grid;gap:5px;padding:16px;border:1px solid #dde8e5;border-radius:15px;background:#fff;box-shadow:0 8px 24px rgba(20,61,53,.06)}.hap-ops-kpi span,.hap-ops-kpi small{color:#71827e}.hap-ops-kpi strong{font-size:25px;color:#17473e}.hap-ops-kpi.red{border-top:4px solid #e24239}.hap-ops-kpi.green{border-top:4px solid #1aa46d}.hap-ops-kpi.orange{border-top:4px solid #ed9c4d}.hap-ops-kpi.blue{border-top:4px solid #2792cc}.hap-ops-kpi.teal{border-top:4px solid #13a89e}.hap-ops-kpi.purple{border-top:4px solid #755cc9} .hap-ops-panel{margin-bottom:14px;border:1px solid #dce6e3;border-radius:17px;background:#fff;box-shadow:0 9px 28px rgba(17,55,48,.06);overflow:hidden}.hap-ops-panel-head{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:16px 18px;border-bottom:1px solid #e5ecea}.hap-ops-panel-head h2{margin:0 0 3px}.hap-ops-panel-head p{margin:0;color:#70817d}.hap-week-nav{display:flex;align-items:center;gap:12px}.hap-week-nav a{padding:7px 10px;border-radius:9px;background:#edf5f2;color:#176b52;text-decoration:none;font-weight:800} .hap-dispatch-scroll{overflow:auto}.hap-dispatch-calendar{display:grid;grid-template-columns:150px repeat(4,minmax(190px,1fr));min-width:910px}.hap-dispatch-corner,.hap-dispatch-day,.hap-dispatch-employee,.hap-dispatch-cell{border-right:1px solid #e3eae8;border-bottom:1px solid #e3eae8}.hap-dispatch-corner,.hap-dispatch-day{padding:11px;background:#f4f8f7;text-align:center;font-weight:900}.hap-dispatch-day span,.hap-dispatch-day strong{display:block}.hap-dispatch-day span{color:#74847f;font-size:10px;text-transform:uppercase}.hap-dispatch-day.today{background:#e4f5ee;color:#0f7153}.hap-dispatch-day.selected-day{box-shadow:inset 0 -3px #15956a}.hap-dispatch-employee{display:grid;align-content:center;padding:12px;background:#fbfcfc}.hap-dispatch-employee small{color:#74847f}.hap-dispatch-cell{min-height:112px;padding:7px;background:#fff;transition:.15s}.hap-dispatch-cell.busy{background:#fff4f2}.hap-dispatch-cell.drop-ready{outline:3px solid #1aa46d;outline-offset:-3px;background:#ebf8f3}.hap-free-slot{display:block;padding:11px;color:#a1ada9;font-size:10px;text-align:center} .hap-calendar-job{margin-bottom:6px;padding:8px;border:1px solid #bcdacf;border-left:4px solid #15956a;border-radius:9px;background:#f1faf6;cursor:grab;transition:box-shadow .15s,transform .15s}.hap-calendar-job:hover{box-shadow:0 7px 18px rgba(16,78,63,.16);transform:translateY(-1px)}.hap-calendar-job:focus-visible{outline:3px solid rgba(21,149,106,.28);outline-offset:2px}.hap-calendar-job.dragging{opacity:.4}.hap-calendar-job.locked{cursor:pointer;opacity:.72}.hap-calendar-job.fix{border-color:#efa9a3;border-left-color:#df332b;background:#fff0ee}.hap-calendar-job>div{display:flex;justify-content:space-between;gap:5px}.hap-calendar-job>div span{color:#d52e27;font-size:9px;font-weight:950}.hap-calendar-job p{margin:4px 0;font-weight:900}.hap-calendar-job small{display:block;color:#6e807b;line-height:1.25}.hap-ops-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:14px}.hap-quality-list{padding:8px 16px 16px}.hap-quality-list>div{display:flex;justify-content:space-between;gap:12px;padding:11px 2px;border-bottom:1px solid #edf1f0}.hap-quality-list strong{white-space:nowrap;color:#b23830} .hap-job-preview{position:fixed;z-index:100500;box-sizing:border-box;padding:13px 14px;border:1px solid #bdd6cd;border-radius:13px;background:#fff;color:#173f37;box-shadow:0 18px 48px rgba(12,48,40,.25);pointer-events:none}.hap-job-preview h4{margin:0 0 9px;padding-bottom:8px;border-bottom:1px solid #e5eeeb;color:#145f4c;font-size:13px}.hap-job-preview>div{display:grid;grid-template-columns:86px minmax(0,1fr);gap:8px;margin-top:6px}.hap-job-preview>div span{color:#778782;font-size:10px;font-weight:700}.hap-job-preview>div strong{color:#213f39;font-size:11px;line-height:1.35;overflow-wrap:anywhere}.hap-job-preview>small{display:block;margin-top:10px;padding-top:8px;border-top:1px solid #e5eeeb;color:#17805f;font-size:10px;font-weight:800} .hap-stage-badge{display:inline-block;width:max-content;max-width:100%;margin:4px 0 0;padding:3px 7px;border-radius:999px;background:#e2f2ed;color:#116d53!important;font-size:9px!important;font-style:normal;font-weight:900!important;line-height:1.2}.hap-calendar-job>.hap-stage-badge{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hap-assignment-stage-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px}.hap-assignment-stage-options .check-line{margin:0} .hap-case-panel,.hap-stage-progress{margin:0 0 16px;padding:14px;border:1px solid #cfe3dc;border-radius:14px;background:#f7fbfa}.hap-case-panel>.btn{margin-top:12px}.hap-case-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}.hap-case-head strong,.hap-case-head small{display:block}.hap-case-head strong{color:#17483e;font-size:14px}.hap-case-head small{margin-top:3px;color:#74847f;font-size:10px}.hap-case-head>span{padding:5px 8px;border-radius:999px;background:#e2f2ed;color:#126c53;font-size:10px;font-weight:900;white-space:nowrap}.hap-case-timeline{display:grid;gap:7px}.hap-case-timeline article{display:grid;grid-template-columns:12px minmax(0,1fr) auto;align-items:start;gap:8px;padding:9px;border:1px solid #e0ebe7;border-radius:10px;background:#fff}.hap-case-timeline article.active{border-color:#56b093;box-shadow:inset 3px 0 #168b68}.hap-case-timeline article>i{width:9px;height:9px;margin-top:4px;border:2px solid #86bdaa;border-radius:50%;background:#fff}.hap-case-timeline article>div strong,.hap-case-timeline article>div span,.hap-case-timeline article>div small{display:block}.hap-case-timeline article>div strong{color:#23483f;font-size:11px}.hap-case-timeline article>div span{margin-top:2px;color:#71827e;font-size:9px}.hap-case-timeline article>div small{margin-top:4px;color:#50645f;font-size:10px;line-height:1.35}.hap-case-timeline article>b{font-size:9px;white-space:nowrap}.hap-stage-work-form .field textarea{box-sizing:border-box;width:100%}.hap-stage-completed-summary{border-color:#a9d9c8!important;background:#f1faf6!important} @media(max-width:600px){.hap-assignment-stage-options{grid-template-columns:1fr}.hap-case-timeline article{grid-template-columns:10px minmax(0,1fr)}.hap-case-timeline article>b{grid-column:2;justify-self:start}} .hap-calendar-job.cancelled,.hap-calendar-job.cancelled.locked{border-color:#ff4d4f;border-left-color:#ff3437;background:#fff2f2;opacity:1;box-shadow:0 3px 10px rgba(216,42,45,.08)}.hap-calendar-job.cancelled>div>strong,.hap-calendar-job.cancelled p{color:#9f2528}.hap-calendar-job.cancelled small{color:#b56869}.hap-job-cancelled-label{color:#d52327!important;white-space:nowrap} .hap-waiting-board{margin:0 16px 16px;padding:13px;border:1px dashed #c9a36d;border-radius:14px;background:#fffaf2;transition:.15s}.hap-waiting-board.drop-ready{border-color:#15956a;background:#eaf8f2;box-shadow:inset 0 0 0 2px #15956a}.hap-waiting-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:10px}.hap-waiting-head strong,.hap-waiting-head span{display:block}.hap-waiting-head strong{color:#684417;font-size:13px}.hap-waiting-head span{margin-top:3px;color:#8b765d;font-size:10px}.hap-waiting-head-tools{display:flex;align-items:center;gap:6px}.hap-waiting-head b{padding:5px 8px;border-radius:999px;background:#f4e2c8;color:#79501c;font-size:10px;white-space:nowrap}.hap-waiting-controls{display:none!important;align-items:center;gap:4px;margin:0!important}.hap-waiting-controls small{min-width:45px;color:#79501c;font-size:9px;font-weight:800;text-align:center;white-space:nowrap}.hap-waiting-controls button{display:grid;place-items:center;width:27px;height:27px;padding:0;border:1px solid #ddbd8e;border-radius:8px;background:#fff;color:#79501c;font-size:19px;font-weight:900;line-height:1;cursor:pointer}.hap-waiting-controls button:disabled{opacity:.35;cursor:default}.hap-waiting-row{display:flex;gap:9px;min-height:74px;padding:2px;overflow-x:auto;overscroll-behavior-inline:contain}.hap-waiting-row .hap-calendar-job{flex:0 0 190px;margin:0;background:#fff}.hap-waiting-empty{align-self:center;width:100%;color:#9a856b;font-size:11px;text-align:center}.hap-calendar-job[draggable="true"]{touch-action:none;-webkit-user-select:none;user-select:none}.hap-calendar-job.saving{opacity:.45;pointer-events:none}.hap-calendar-job.waiting{border-color:#ddc18e;border-left-color:#c88b2c;background:#fffdf8}.hap-calendar-job.waiting>div>strong{color:#99621a;font-size:9px}.hap-job-flags{display:flex!important;align-items:center;gap:4px}.hap-job-flags i{color:#d52e27;font-size:9px;font-style:normal;font-weight:950}.hap-job-unassign{display:grid;place-items:center;width:21px;height:21px;padding:0;border:1px solid #efc2bd;border-radius:7px;background:#fff;color:#b43c34;font-size:16px;font-weight:800;line-height:1;cursor:pointer}.hap-job-unassign:hover{background:#ffe9e7}.hap-touch-drag-ghost{position:fixed!important;z-index:100200!important;top:0!important;left:0!important;width:190px!important;margin:0!important;opacity:.92!important;pointer-events:none!important;box-shadow:0 18px 45px rgba(16,45,39,.28)!important;transform-origin:top left!important}.hap-touch-drag-ghost.dragging{opacity:.92!important} .hap-job-transfer{display:grid;place-items:center;width:24px;height:21px;padding:0;border:1px solid #acd5c7;border-radius:7px;background:#eef9f5;color:#087452;font-size:14px;font-weight:900;line-height:1;cursor:pointer}.hap-job-transfer:hover{border-color:#15956a;background:#daf3e9}.hap-dispatch-quick-panel{position:fixed;z-index:100150;top:78px;right:18px;bottom:20px;width:min(300px,calc(100vw - 36px));padding:12px;border:1px solid #c9ded7;border-radius:17px;background:rgba(255,255,255,.98);box-shadow:0 22px 55px rgba(13,54,45,.24);backdrop-filter:blur(12px)}.hap-dispatch-quick-panel[hidden]{display:none}.hap-dispatch-quick-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}.hap-dispatch-quick-head strong,.hap-dispatch-quick-head small{display:block}.hap-dispatch-quick-head strong{color:#123f35;font-size:16px}.hap-dispatch-quick-head small{margin-top:2px;color:#72847f;font-size:10px}.hap-dispatch-quick-close{display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:9px;background:#edf3f1;color:#34564e;font-size:20px;cursor:pointer}.hap-dispatch-quick-search{box-sizing:border-box;width:100%;height:38px;margin:0 0 9px;padding:0 11px;border:1px solid #d5e2de;border-radius:10px;background:#fff}.hap-dispatch-quick-list{display:grid;gap:6px;max-height:calc(100% - 83px);overflow:auto;overscroll-behavior:contain}.hap-dispatch-quick-target{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:48px;padding:8px 10px;border:1px solid #d9e6e2;border-radius:11px;background:#f8fbfa;color:#163f36;text-align:left;cursor:pointer}.hap-dispatch-quick-target strong,.hap-dispatch-quick-target small{display:block}.hap-dispatch-quick-target strong{overflow:hidden;text-overflow:ellipsis;font-size:12px;white-space:nowrap}.hap-dispatch-quick-target small{flex:0 0 auto;color:#71827d;font-size:9px}.hap-dispatch-quick-target:hover,.hap-dispatch-quick-target.drop-ready{border-color:#15956a;background:#e4f6ef;box-shadow:inset 0 0 0 2px #15956a}.hap-dispatch-quick-panel.selection-mode .hap-dispatch-quick-head small:after{content:" · bấm để chuyển"}.hap-dispatch-quick-open .hap-job-preview{display:none!important} .hap-dispatch-panel{overflow:visible}.hap-dispatch-sticky{position:sticky;top:0;z-index:20;border-radius:17px 17px 0 0;background:#fff;box-shadow:0 12px 20px -18px rgba(15,55,47,.65)}.hap-dispatch-panel>.hap-dispatch-scroll{border-radius:0 0 17px 17px} .hap-area-groups{padding:15px 18px 18px;border-top:1px solid #e7eeeb;background:#f8fbfa}.hap-area-groups-head{display:flex;align-items:baseline;gap:10px;margin-bottom:10px}.hap-area-groups-head strong{font-size:15px;color:#173b34}.hap-area-groups-head span{font-size:12px;color:#71817d}.hap-area-chip-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.hap-area-chip-list article{padding:11px;border:1px solid #dce9e4;border-radius:11px;background:#fff}.hap-area-chip-list article strong,.hap-area-chip-list article span,.hap-area-chip-list article small{display:block}.hap-area-chip-list article strong{margin-bottom:5px;color:#173b34}.hap-area-chip-list article span{font-weight:800;color:#19825f}.hap-area-chip-list article small{margin-top:4px;color:#778782}.hap-area-empty{color:#778782} @media(max-width:1000px){.hap-ops-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.hap-ops-grid{grid-template-columns:1fr}.hap-ops-hero,.hap-ops-panel-head{align-items:flex-start;flex-direction:column}.hap-week-nav{flex-wrap:wrap}.hap-area-chip-list{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:600px){.hap-ops-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.hap-ops-kpi{padding:12px}.hap-ops-kpi strong{font-size:19px}.hap-ops-actions{display:grid;width:100%;grid-template-columns:1fr 1fr}.hap-week-nav{font-size:11px}.hap-quality-list>div{align-items:flex-start;flex-direction:column}.hap-area-groups-head{align-items:flex-start;flex-direction:column;gap:3px}.hap-area-chip-list{grid-template-columns:1fr 1fr}} @media(max-width:600px){.hap-waiting-board{margin:0 10px 13px;padding:11px}.hap-waiting-head{display:flex;align-items:center}.hap-waiting-head-tools{gap:5px}.hap-waiting-head b{display:inline-block;margin-top:0}.hap-waiting-controls:not([hidden]){display:flex!important}.hap-waiting-row{scroll-snap-type:x mandatory;scroll-padding-inline:2px}.hap-waiting-row .hap-calendar-job{flex-basis:170px;scroll-snap-align:start}.hap-dispatch-scroll{scroll-snap-type:x proximity}.hap-dispatch-calendar{grid-template-columns:105px minmax(210px,1fr);min-width:315px}.hap-dispatch-day:not(.selected-day),.hap-dispatch-cell:not(.selected-day){display:none}.hap-dispatch-employee{position:sticky;left:0;z-index:2}.hap-dispatch-corner{position:sticky;left:0;z-index:3}.hap-week-nav{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:7px}.hap-week-nav strong{grid-column:1/-1;grid-row:1;text-align:center}.hap-week-nav a{text-align:center}.hap-ops-panel-head{padding:13px}.hap-ops-panel-head h2{font-size:18px}} /* Sidebar calendar & notes utility. */ .hap-sidebar-calendar{margin-top:14px;border:1px solid rgba(255,255,255,.14);border-radius:15px;background:rgba(255,255,255,.055);color:#fff;overflow:hidden;flex:0 0 auto}.hap-calendar-mobile-toggle{display:none;width:100%;padding:10px 12px;border:0;background:#3159d9;color:#fff;font:inherit;cursor:pointer;align-items:center;gap:8px;text-align:left}.hap-calendar-mobile-toggle strong{flex:1}.hap-calendar-toggle-caret{font-size:18px}.hap-calendar-shell{padding:11px 10px 9px;max-height:330px;overflow:auto}.hap-calendar-head{display:grid;grid-template-columns:28px 1fr 28px;align-items:center;gap:5px;margin-bottom:8px}.hap-calendar-head strong{text-align:center;font-size:14px}.hap-calendar-head button{height:26px;border:0;border-radius:8px;background:rgba(255,255,255,.12);color:#fff;font-size:18px;cursor:pointer}.hap-calendar-weekdays,.hap-calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}.hap-calendar-weekdays span{padding:2px 0;color:rgba(255,255,255,.55);font-size:9px;text-align:center;font-weight:800}.hap-calendar-grid button{position:relative;min-height:25px;padding:3px 0;border:0;border-radius:7px;background:transparent;color:rgba(255,255,255,.9);font-size:10px;cursor:pointer}.hap-calendar-grid button:hover,.hap-calendar-grid button:focus-visible{background:rgba(93,130,255,.45);outline:0}.hap-calendar-grid button.is-today{background:#3f63dd;color:#fff;font-weight:900}.hap-calendar-grid button.is-empty{pointer-events:none}.hap-calendar-grid button.has-entry:after{content:"";position:absolute;bottom:2px;left:50%;width:5px;height:5px;border-radius:50%;background:#ffd45b;box-shadow:0 0 7px #ffd45b;transform:translateX(-50%)}.hap-calendar-summary{margin-top:8px;padding-top:7px;border-top:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.72);font-size:10px;text-align:center}.hap-calendar-menu{position:fixed;z-index:100500;min-width:170px;padding:5px;border:1px solid #dbe3f5;border-radius:12px;background:#fff;box-shadow:0 14px 35px rgba(10,30,70,.25)}.hap-calendar-menu button{display:block;width:100%;padding:9px 10px;border:0;border-radius:8px;background:#fff;color:#16284a;text-align:left;cursor:pointer}.hap-calendar-menu button:hover{background:#eef3ff}.hap-calendar-modal{position:fixed;z-index:100600;inset:0;display:grid;place-items:center;padding:18px;background:rgba(10,20,40,.46)}.hap-calendar-modal[hidden]{display:none}.hap-calendar-dialog{width:min(430px,100%);padding:20px;border-radius:18px;background:#fff;box-shadow:0 20px 55px rgba(8,24,59,.3);color:#16284a}.hap-calendar-dialog h3{margin:0 0 14px;font-size:19px}.hap-calendar-dialog label{display:grid;gap:6px;margin:10px 0;font-size:12px;font-weight:700}.hap-calendar-dialog input,.hap-calendar-dialog textarea{width:100%;box-sizing:border-box;padding:10px;border:1px solid #d6deed;border-radius:9px;font:inherit}.hap-calendar-dialog textarea{min-height:105px;resize:vertical}.hap-calendar-dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}.hap-calendar-dialog-actions button{padding:9px 14px;border:1px solid #d6deed;border-radius:9px;background:#fff;cursor:pointer}.hap-calendar-dialog-actions .primary{border-color:#3159d9;background:#3159d9;color:#fff}.hap-calendar-tooltip{position:fixed;z-index:100550;max-width:290px;padding:11px 13px;border:1px solid #dbe3f5;border-radius:12px;background:#fff;color:#1c2c4b;box-shadow:0 12px 32px rgba(10,30,70,.22);font-size:12px;line-height:1.45}.hap-calendar-tooltip strong{display:block;margin-bottom:4px}.hap-sidebar-calendar .sidebar-note{margin-top:10px} @media(max-width:700px){.hap-sidebar-calendar{margin-top:10px}.hap-calendar-mobile-toggle{display:flex}.hap-calendar-shell{display:none;max-height:360px}.hap-sidebar-calendar.is-open .hap-calendar-shell{display:block}.hap-sidebar-calendar .hap-calendar-shell{padding:10px 9px}.hap-calendar-grid button{min-height:28px}.hap-calendar-grid button,.hap-calendar-weekdays span{font-size:11px}} /* v0.17.262: balanced assignment filters and clean list-page headings. */ .hap-admin-list-titlebar{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%} .hap-admin-list-titlebar h1{margin:0;line-height:1.2} body.hap-wm-admin-app .hap-admin-list-titlebar .hap-list-add-button{position:static;flex:0 0 auto;margin:0;padding:8px 15px;border-color:#0f5148!important;background:#0f5148!important;color:#fff!important;line-height:24px} body.hap-wm-admin-app .hap-admin-list-titlebar .hap-list-add-button:hover,body.hap-wm-admin-app .hap-admin-list-titlebar .hap-list-add-button:focus-visible{border-color:#087f68!important;background:#087f68!important;color:#fff!important;outline:0} .hap-operations-page>.hap-ops-kpis{margin-top:18px} body.hap-wm-admin-app .hap-assignment-filters{padding:16px!important} body.hap-wm-admin-app .hap-assignment-filters .hap-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:end} body.hap-wm-admin-app .hap-assignment-filters .hap-field{display:flex;flex-direction:column;justify-content:flex-end;min-width:0;height:66px;margin:0} body.hap-wm-admin-app .hap-assignment-filters .hap-field>label{display:flex;align-items:flex-end;min-height:16px;margin:0 0 7px;line-height:1} body.hap-wm-admin-app .hap-assignment-filters .hap-field>input,body.hap-wm-admin-app .hap-assignment-filters .hap-field>select{box-sizing:border-box;width:100%;height:42px;min-height:42px;margin:0;padding:8px 11px} body.hap-wm-admin-app .hap-assignment-filter-actions{display:grid;grid-template-columns:repeat(2,132px);gap:8px;margin:12px 0 0} body.hap-wm-admin-app .hap-assignment-filter-actions .button{box-sizing:border-box;width:100%;height:42px;min-height:42px;margin:0;padding:8px 12px;text-align:center;line-height:24px} body.hap-wm-admin-app .hap-assignment-filter-actions .button-primary{border-color:#0f5148!important;background:#0f5148!important;color:#fff!important} body.hap-wm-admin-app .hap-assignment-filter-actions .button:not(.button-primary){border-color:#d4dfdc!important;background:#fff!important;color:#173f3a!important} body.hap-wm-admin-app .hap-assignment-filter-actions .button:hover{border-color:#087f68!important;color:#087f68!important} body.hap-wm-admin-app .hap-assignment-filter-actions .button-primary:hover{background:#087f68!important;color:#fff!important} @media(max-width:782px){ .hap-admin-list-titlebar{align-items:center;gap:10px} .hap-admin-list-titlebar h1{min-width:0;font-size:24px} body.hap-wm-admin-app .hap-admin-list-titlebar .hap-list-add-button{padding:7px 11px;font-size:11px;white-space:nowrap} body.hap-wm-admin-app .hap-assignment-filters{padding:12px!important} body.hap-wm-admin-app .hap-assignment-filters .hap-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px} body.hap-wm-admin-app .hap-assignment-filters .hap-field{height:70px} body.hap-wm-admin-app .hap-assignment-filters .hap-field>label{min-height:20px;margin-bottom:6px;font-size:11px;line-height:1.15} body.hap-wm-admin-app .hap-assignment-filters .hap-field>input,body.hap-wm-admin-app .hap-assignment-filters .hap-field>select{height:44px;min-height:44px;padding:8px;font-size:12px} body.hap-wm-admin-app .hap-assignment-filter-actions{grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:9px;margin-top:10px} body.hap-wm-admin-app .hap-assignment-filter-actions .button{height:44px;min-height:44px;padding:8px 6px;font-size:12px} .hap-operations-page>.hap-ops-kpis{margin-top:12px} } .sidebar,.hap-app-sidebar{min-height:0}.hap-sidebar-calendar{max-height:390px}.hap-sidebar-calendar .hap-calendar-shell{max-height:300px} .hap-item-supplier-results{z-index:100350!important} /* Final dashboard layout guard: keep the status grid full-width even when a * mobile browser reports a wider WordPress layout viewport. */ .hap-urgent-bar{display:block;width:100%;box-sizing:border-box} .hap-urgent-grid{width:100%;min-width:0} @media (max-width:1180px) and (min-width:783px){.hap-urgent-grid{grid-template-columns:repeat(4,minmax(0,1fr))}} @media (max-width:782px){ .hap-urgent-bar{display:block;width:100%;padding:9px} .hap-urgent-grid{display:grid;width:100%;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px} .hap-urgent-grid .overdue{grid-column:1/-1;width:100%} .hap-urgent-grid>a{width:100%;min-width:0} } /* Dashboard range selector and unified action cards. */ .hap-dashboard-period-form{display:flex;align-items:center;gap:8px;min-height:40px;padding:4px 5px 4px 11px;border:1px solid #dfe6f0;border-radius:11px;background:#fff;box-sizing:border-box} .hap-dashboard-period-form label{color:#6d7b91;font-size:10px;font-weight:800;letter-spacing:.035em;white-space:nowrap} .hap-dashboard-period-form select{min-width:112px;min-height:32px;margin:0;padding:0 30px 0 10px;border:0;border-left:1px solid #e7ebf2;border-radius:0;background-color:#fff;color:#15233a;box-shadow:none;font-weight:750} .hap-modern-range{justify-content:flex-end;margin-top:-7px} .hap-urgent-bar{display:block;padding:11px 12px;background:linear-gradient(95deg,#fff8f8,#fff)} .hap-urgent-title{display:flex;align-items:center;gap:8px;margin:0 0 9px;color:#b92e3b;font-size:12px;font-weight:900} .hap-urgent-title i{width:9px;height:9px;flex:0 0 9px;border-radius:50%;background:#e44855;box-shadow:0 0 0 rgba(228,72,85,.45);animation:hap-modern-pulse 1.7s infinite} .hap-urgent-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px} .hap-urgent-grid>a{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;min-width:0;min-height:48px;padding:8px 10px;border:1px solid rgba(47,79,125,.08);border-radius:10px;background:rgba(255,255,255,.78);color:#53637b!important;text-decoration:none!important;transition:.18s ease;box-sizing:border-box} .hap-urgent-grid>a:hover{border-color:rgba(47,79,125,.18);background:#fff;box-shadow:0 5px 14px rgba(28,47,76,.06);transform:translateY(-1px)} .hap-urgent-grid span{min-width:0;font-size:9px;font-weight:750;line-height:1.25} .hap-urgent-grid span>i{display:inline-grid;width:20px;height:20px;margin-right:6px;place-items:center;border-radius:6px;background:#eef3ff;color:#3561de;font-size:11px;font-style:normal;font-weight:900;vertical-align:middle} .hap-urgent-grid .overdue span>i,.hap-urgent-grid .fix span>i,.hap-urgent-grid .receivable span>i{background:#fff0f0;color:#c13d38} .hap-urgent-grid .telegram span>i{background:#eaf4ff;color:#2482ca} .hap-urgent-grid .debt span>i{background:#fff0ee;color:#c13d38} .hap-urgent-grid .expense span>i{background:#fff5df;color:#b8750a} .hap-urgent-grid .leave span>i{background:#eaf8f0;color:#238056} .hap-urgent-grid strong{color:#142746;font-size:15px;line-height:1;white-space:nowrap} .hap-urgent-grid .overdue strong,.hap-urgent-grid .fix strong,.hap-urgent-grid .receivable strong,.hap-urgent-grid .telegram strong{color:#c13d38} .hap-urgent-grid .expense strong{color:#b8750a} .hap-urgent-grid .leave strong{color:#238056} @media (max-width:1180px) and (min-width:681px){.hap-urgent-grid{grid-template-columns:repeat(4,minmax(0,1fr))}} @media (max-width:680px){ .hap-modern-actions{grid-template-columns:1fr 1fr} .hap-dashboard-period-form{grid-column:1/-1;width:100%;justify-content:space-between} .hap-dashboard-period-form select{flex:1;max-width:170px} .hap-modern-range{align-items:flex-end;margin-top:-6px;text-align:right} .hap-urgent-bar{display:block;padding:9px} .hap-urgent-title{margin-bottom:7px} .hap-urgent-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px} .hap-urgent-grid>a{min-height:51px;padding:8px} .hap-urgent-grid .overdue{grid-column:1/-1} .hap-urgent-grid span{font-size:9px} .hap-urgent-grid strong{font-size:14px} } .hap-supplier-duplicate-warning{display:grid;gap:6px;margin-top:6px;padding:8px 9px;border:1px solid #efc46b;border-radius:9px;background:#fff8e5;color:#805513;font-size:10px;line-height:1.35;white-space:normal}.hap-supplier-duplicate-warning span{font-weight:750}.hap-supplier-duplicate-warning button{width:100%;min-height:28px;padding:4px 7px;border:0;border-radius:7px;background:#9a6517;color:#fff;font-size:10px;font-weight:800;cursor:pointer} .hap-assignment-supplier-select[hidden]{display:none!important}.hap-assignment-supplier-cell .hap-item-supplier-lookup{display:block;width:100%;min-width:115px}.hap-assignment-supplier-cell .hap-assignment-supplier-search{display:block;width:100%!important;min-width:0;height:40px;margin:0!important;box-sizing:border-box} @media(max-width:600px){.hap-dispatch-quick-panel{top:auto;right:8px;bottom:8px;left:8px;width:auto;max-height:min(68vh,560px);padding:11px;border-radius:16px}.hap-dispatch-quick-list{max-height:calc(min(68vh,560px) - 94px)}.hap-dispatch-quick-target{min-height:50px}.hap-job-transfer{width:27px;height:24px}} .hap-pwa-prompt-actions{display:flex;gap:7px}.hap-pwa-prompt-actions .btn{white-space:nowrap} @media(max-width:593px){.hap-notification-permission .hap-pwa-prompt-actions{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr}.hap-notification-permission .hap-pwa-prompt-actions .btn{grid-column:auto}} .hap-telegram-log-status.received{background:#e1f5ec;color:#08724d}.hap-telegram-inbox{border-color:#b9ddcf!important}.hap-telegram-inbox td:last-child{min-width:260px;white-space:normal} /* Legacy dashboard fallback and shared compact modal controls. */ @media(max-width:680px){ .hap-demo-dashboard .page-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:16px} .hap-demo-dashboard .page-actions .btn{width:100%;margin-top:0;padding-left:8px;padding-right:8px;font-size:11px} .hap-demo-dashboard .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .hap-demo-dashboard .stat-card{min-width:0;padding:15px 13px} .hap-demo-dashboard .stat-value{font-size:21px} .modal-close{position:relative;z-index:12;width:44px;height:44px;flex-basis:44px;background:#e8eee9;box-shadow:0 3px 10px rgba(15,44,40,.12)} body.admin-bar .modal{top:54px} .debt-check{align-items:flex-start;flex-wrap:wrap} } /* 0.11.2 — Modern Admin command center; Employee flow stays unchanged. */ body.hap-wm-admin-app, .hap-employee-app { --ink: #12233f; --ink-2: #1b3154; --accent: #2563eb; --accent-soft: #eaf1ff; --paper: #fff; --canvas: #f4f6fa; --line: #e5eaf2; --muted: #6d7b91; --good: #16a36a; --warn: #ed8a19; --bad: #e44855; --shadow: 0 12px 32px rgba(26,44,76,.08); --hap-ink: #12233f; --hap-ink-2: #1b3154; --hap-accent: #2563eb; --hap-accent-soft: #eaf1ff; --hap-paper: #fff; --hap-canvas: #f4f6fa; --hap-line: #e5eaf2; --hap-muted: #6d7b91; --hap-good: #16a36a; --hap-warn: #ed8a19; --hap-bad: #e44855; --hap-shadow: 0 12px 32px rgba(26,44,76,.08); } body.hap-wm-admin-app .hap-app-sidebar, .hap-employee-app .sidebar { background:radial-gradient(circle at 0 0,rgba(61,115,202,.3),transparent 32%),linear-gradient(165deg,#122440 0%,#0c192d 100%); } body.hap-wm-admin-app .nav-item.active, .hap-employee-app .nav-item.active { box-shadow:inset 3px 0 #4e8cff; } body.hap-wm-admin-app .brand-mark, .hap-employee-app .brand-mark { background:linear-gradient(145deg,#4e8cff,#2462d8);box-shadow:0 8px 18px rgba(37,99,235,.28); } body.hap-wm-admin-app .btn-primary, .hap-employee-app .btn-primary { background:#2563eb!important;border-color:#2563eb!important; } .hap-employee-app .btn-accent { background:#2563eb!important;border-color:#2563eb!important; } .hap-employee-app .page-head h1, .hap-employee-app .panel-head h2, .hap-employee-app .profile-banner h2 { font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:-.025em; } .hap-employee-app .profile-banner { background:linear-gradient(125deg,#12233f,#244c82); } .hap-employee-app .stat-card,.hap-employee-app .panel,.hap-employee-app .assignment-card { border-color:#e5eaf2;box-shadow:0 8px 24px rgba(26,44,76,.055); } .hap-employee-app .app-notice,.hap-employee-app .hap-notification-toast { border-radius:14px; } .hap-employee-app .hap-notification-panel { border-color:#dfe6f1;box-shadow:0 18px 46px rgba(20,39,70,.18); } /* Grouped Admin navigation - v0.16.6. */ body.hap-wm-admin-app .hap-app-sidebar { overflow:visible; } .hap-nav-groups { min-height:0; } /* Menu báo giá hai cấp dùng chung trên toàn bộ không gian Nhân viên. */ .hap-employee-quote-nav{display:block;margin:2px 0 5px;border:1px solid transparent;border-radius:13px;transition:border-color .18s ease,background .18s ease}.hap-employee-quote-nav[open],.hap-employee-quote-nav.is-active{border-color:rgba(107,153,229,.2);background:linear-gradient(145deg,rgba(39,80,145,.28),rgba(18,45,82,.35));box-shadow:inset 0 1px rgba(255,255,255,.04)}.hap-employee-quote-nav>summary{list-style:none;cursor:pointer;color:#fff!important;font-size:12px!important;font-weight:750!important}.hap-employee-quote-nav>summary::-webkit-details-marker{display:none}.hap-employee-quote-nav>summary>span:not(.nav-icon):not(.hap-employee-quote-caret){color:#fff!important;font-size:12px!important}.hap-employee-quote-nav .hap-employee-quote-caret{display:grid;width:24px;height:24px;margin-left:auto;place-items:center;border-radius:8px;background:rgba(255,255,255,.08);color:#dce8fb!important;font-size:14px;transition:transform .2s ease,background .2s ease}.hap-employee-quote-nav[open] .hap-employee-quote-caret{background:rgba(78,140,255,.24);transform:rotate(180deg)}.hap-employee-quote-submenu{display:grid;gap:5px;margin:2px 7px 8px;padding:7px;border-radius:10px;background:rgba(5,20,42,.3)}.hap-employee-quote-submenu a,.hap-employee-quote-submenu a:visited{display:flex;min-height:39px;box-sizing:border-box;align-items:center;gap:9px;padding:7px 9px;border:1px solid transparent;border-radius:9px;color:#fff!important;text-decoration:none!important;font-size:12px!important;font-weight:700!important;line-height:1.3}.hap-employee-quote-submenu a:hover,.hap-employee-quote-submenu a.active{border-color:rgba(117,164,242,.25);background:linear-gradient(135deg,rgba(78,140,255,.25),rgba(43,102,193,.14));color:#fff!important;transform:translateX(1px)}.hap-employee-quote-submenu a>span{display:grid;width:27px;height:27px;flex:0 0 27px;place-items:center;border-radius:8px;background:rgba(99,148,229,.2);color:#dceaff!important;font-size:9px!important;font-weight:900}.hap-employee-quote-submenu a.active{box-shadow:inset 3px 0 #67a0ff,0 4px 12px rgba(5,19,42,.12)} .hap-employee-top-search{margin:0}.hap-employee-top-search .search{display:flex;width:310px;min-height:40px;box-sizing:border-box;align-items:center;gap:8px;margin:0;padding:0 11px;border:1px solid #d7e2de;border-radius:12px;background:#fff;box-shadow:0 4px 14px rgba(27,62,52,.06)}.hap-employee-top-search .search span{color:#476b61}.hap-employee-top-search .search input{width:100%;min-width:0;border:0!important;background:transparent!important;box-shadow:none!important;outline:0;font-size:12px}@media(max-width:900px){.hap-employee-top-search .search{width:220px}}@media(max-width:600px){.hap-employee-top-search{order:-1;flex:1;min-width:0}.hap-employee-top-search .search{width:100%;min-height:38px}.hap-employee-top-search .search input{font-size:11px}.hap-employee-list-page .topbar .top-actions{width:calc(100% - 49px)}.hap-employee-list-page .topbar .user-chip,.hap-employee-list-page .topbar .top-actions>a.icon-btn{display:none}} .hap-nav-home { margin-bottom:5px; } .hap-nav-quick-actions { display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:3px 0 9px;padding:0 3px 10px;border-bottom:1px solid rgba(255,255,255,.08); } .hap-nav-quick-actions a { display:flex;min-width:0;min-height:34px;align-items:center;justify-content:center;gap:5px;padding:6px 7px;border:1px solid rgba(255,255,255,.13);border-radius:9px;background:rgba(255,255,255,.07);color:#e8f1ff!important;font-size:10px;font-weight:750;line-height:1.15;text-align:center;text-decoration:none;transition:.18s ease; } .hap-nav-quick-actions a:hover { border-color:rgba(107,156,255,.65);background:rgba(78,140,255,.18);color:#fff!important;transform:translateY(-1px); } .hap-nav-quick-actions a.primary { border-color:rgba(80,142,255,.45);background:#2869d8;color:#fff!important; } .hap-nav-group { position:relative; } .hap-nav-group-trigger { position:relative;cursor:pointer;font:inherit; } .hap-nav-group-trigger>span:nth-child(2) { min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .hap-nav-group-trigger .hap-nav-caret { width:auto;margin-left:auto;color:#91a7ca;font-size:17px;font-weight:500;transition:transform .18s ease,color .18s ease; } .hap-nav-group.is-hovered .hap-nav-caret,.hap-nav-group.is-pinned .hap-nav-caret { color:#fff;transform:translateX(2px); } .hap-nav-group-menu { position:fixed;z-index:100001;left:238px;top:90px;display:grid;width:270px;box-sizing:border-box;gap:4px;padding:9px;border:1px solid rgba(118,149,198,.28);border-radius:15px;background:linear-gradient(160deg,#172d4d,#0f2039);box-shadow:0 20px 50px rgba(5,17,35,.34);opacity:0;visibility:hidden;pointer-events:none;transform:translateX(-7px) scale(.985);transform-origin:left center;transition:opacity .15s ease,transform .15s ease,visibility .15s ease; } .hap-nav-group.is-hovered>.hap-nav-group-menu,.hap-nav-group.is-pinned>.hap-nav-group-menu { opacity:1;visibility:visible;pointer-events:auto;transform:none; } .hap-nav-group-menu:before { content:"";position:absolute;top:0;right:100%;width:14px;height:100%; } .hap-nav-group-menu-head { display:flex;align-items:center;gap:9px;margin:0 2px 3px;padding:7px 8px 10px;border-bottom:1px solid rgba(255,255,255,.1);color:#fff; } .hap-nav-group-menu-head>span { display:grid;width:28px;height:28px;place-items:center;border-radius:9px;background:rgba(78,140,255,.18);color:#8fb5ff;font-size:12px; } .hap-nav-group-menu-head strong { font-size:13px;letter-spacing:.01em; } .hap-nav-group-menu>a,.hap-nav-coming { display:grid;grid-template-columns:32px minmax(0,1fr);align-items:center;gap:8px;min-height:48px;padding:7px 8px;border-radius:10px;color:#dce7f9!important;text-decoration:none;transition:.16s ease; } .hap-nav-group-menu>a:hover,.hap-nav-group-menu>a.active { background:rgba(78,140,255,.15);color:#fff!important; } .hap-nav-group-menu>a.active { box-shadow:inset 3px 0 #4e8cff; } .hap-nav-sub-icon { display:grid;width:29px;height:29px;place-items:center;border-radius:8px;background:rgba(255,255,255,.07);color:#9dbcf5;font-size:10px;font-weight:800; } .hap-nav-group-menu>a>span:last-child,.hap-nav-coming>span:last-child { display:grid;min-width:0;gap:2px; } .hap-nav-group-menu>a strong,.hap-nav-coming strong { color:inherit;font-size:11px;font-weight:750;line-height:1.25; } .hap-nav-group-menu>a small,.hap-nav-coming small { overflow:hidden;color:#93a7c5;font-size:9px;line-height:1.3;text-overflow:ellipsis;white-space:nowrap; } .hap-nav-coming { opacity:.48;cursor:not-allowed; } @media (max-width:960px) { body.hap-wm-admin-app .hap-app-sidebar { overflow-y:auto;overflow-x:hidden; } body.hap-wm-admin-app .hap-nav-groups { flex:0 0 auto;min-height:0;overflow:visible;padding-bottom:8px; } body.hap-wm-admin-app .sidebar-note { display:none; } .hap-nav-group-menu { position:static;display:grid;width:auto;max-height:0;margin:0 5px;padding:0 5px;border:0;border-radius:11px;background:rgba(0,0,0,.16);box-shadow:none;opacity:1;visibility:visible;pointer-events:none;transform:none;overflow:hidden;transition:max-height .22s ease,padding .22s ease,margin .22s ease; } .hap-nav-group.is-pinned>.hap-nav-group-menu { max-height:390px;margin:2px 5px 7px;padding:6px 5px;pointer-events:auto; } .hap-nav-group-menu:before,.hap-nav-group-menu-head { display:none; } .hap-nav-group-trigger .hap-nav-caret { transform:rotate(90deg); } .hap-nav-group.is-pinned .hap-nav-caret { transform:rotate(-90deg); } .hap-nav-group-menu>a,.hap-nav-coming { min-height:42px;padding:5px 7px; } .hap-nav-group-menu>a small,.hap-nav-coming small { white-space:normal; } } /* Keep the calendar below navigation on compact windows; never layer it over a menu item. */ @media (max-width:960px) { body.hap-wm-admin-app .hap-app-sidebar, .hap-employee-app .sidebar { overflow-y:auto; overflow-x:hidden; } .hap-sidebar-calendar { position:relative; z-index:2; flex:0 0 auto; background:#152846; } } @media (min-width:961px) and (max-height:690px) { body.hap-wm-admin-app .sidebar-note { display:none; } body.hap-wm-admin-app .hap-app-sidebar { padding-top:14px;padding-bottom:14px; } body.hap-wm-admin-app .brand { margin-bottom:14px; } } /* Dashboard briefing and compact account controls. */ .hap-admin-session .role-switch a{display:none!important}.hap-admin-session .role-switch span{min-width:92px}.hap-sidebar-online{display:flex;align-items:center;gap:9px;margin-top:auto;margin-bottom:9px;padding:10px 12px;border:1px solid rgba(90,219,155,.22);border-radius:13px;background:rgba(36,171,103,.1);color:#eafbf2!important;text-decoration:none!important}.hap-sidebar-online>i{width:9px;height:9px;flex:0 0 9px;border-radius:50%;background:#55df91;box-shadow:0 0 0 4px rgba(85,223,145,.12),0 0 10px rgba(85,223,145,.7)}.hap-sidebar-online span{display:grid;gap:1px;min-width:0}.hap-sidebar-online strong{font-size:11px;line-height:1.3}.hap-sidebar-online small{color:#91bda5;font-size:9px}.hap-sidebar-online+.sidebar-note{margin-top:0}.hap-modern-head-briefing{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end}.hap-modern-head-briefing .hap-head-insights{grid-column:1/-1}.hap-head-insights{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:15px}.hap-head-insights>a{display:grid;grid-template-columns:40px minmax(0,1fr);align-items:center;gap:10px;min-height:76px;padding:12px 14px;border:1px solid #e3e9f2;border-radius:16px;background:rgba(255,255,255,.86);box-shadow:0 9px 25px rgba(33,52,83,.06);color:#526179!important;text-decoration:none!important;transition:.18s ease}.hap-head-insights>a:hover{border-color:#b9c9e5;box-shadow:0 13px 30px rgba(33,52,83,.1);transform:translateY(-1px)}.hap-head-insights>a>i{display:grid;width:40px;height:40px;place-items:center;border-radius:12px;background:#eef3ff;color:#3561de;font-style:normal;font-weight:900}.hap-head-insights>a>span{display:grid;gap:3px;font-size:11px;font-weight:750}.hap-head-insights>a strong{color:#142746;font-size:21px;line-height:1.05}.hap-head-insights>a.debt>i{background:#fff0ee;color:#d14539}.hap-head-insights>a.expense>i{background:#fff5df;color:#b9780a}.hap-head-insights>a.leave>i{background:#eaf8f0;color:#27845a}.hap-employee-work-list .hap-employee-work-view{min-height:36px!important;padding:7px 16px!important;border-radius:9px!important;font-size:13px!important;font-weight:800}.hap-employee-row-actions>a.button-primary{font-size:0}.hap-employee-row-actions>a.button-primary:after{content:"Chi tiết";font-size:12px}.hap-employee-row-actions>a:last-child:not(.button-primary){display:grid;width:34px;height:34px;place-items:center;padding:0;border:1px solid #d8e1ed;border-radius:9px;background:#fff;color:#315170!important;font-size:0;text-decoration:none}.hap-employee-row-actions>a:last-child:not(.button-primary):before{content:"✎";font-size:18px;line-height:1} @media(max-width:960px){.hap-sidebar-online{margin-top:10px}.hap-modern-head-briefing{display:flex}.hap-head-insights{grid-template-columns:1fr;width:100%;margin-top:3px}.hap-head-insights>a{min-height:66px}.hap-head-insights>a strong{font-size:18px}} .hap-modern-dashboard { max-width:1600px;color:#15233a; } .hap-modern-head { display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:2px 0 15px; } .hap-modern-head h1 { margin:4px 0 5px;color:#12233f;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:clamp(27px,2.4vw,38px);line-height:1.12;letter-spacing:-.04em; } .hap-modern-head p { margin:0;color:#6d7b91; } .hap-modern-actions { display:flex;gap:9px;flex-wrap:wrap;justify-content:flex-end; } .hap-modern-toolbar { display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px; } .hap-modern-toolbar form { display:flex;align-items:center;gap:8px; } .hap-modern-toolbar label { color:#6d7b91;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em; } .hap-modern-toolbar select { min-height:40px;padding:0 34px 0 12px;border:1px solid #e5eaf2;border-radius:11px;background:#fff;color:#15233a;box-shadow:none; } .hap-modern-toolbar>span { color:#7b879a;font-size:11px; } .hap-urgent-bar { display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:15px;padding:12px 13px;border:1px solid #f3d7d9;border-radius:14px;background:linear-gradient(95deg,#fff7f7,#fff); } .hap-urgent-bar>strong { display:flex;align-items:center;gap:8px;margin-right:3px;color:#b92e3b;font-weight:900; } .hap-urgent-bar>strong i { width:9px;height:9px;border-radius:50%;background:#e44855;box-shadow:0 0 0 rgba(228,72,85,.45);animation:hap-modern-pulse 1.7s infinite; } .hap-urgent-bar>a { padding:7px 11px;border:1px solid #f1d9dc;border-radius:999px;background:#fff;color:#8e3540;text-decoration:none;font-size:11px;font-weight:800;transition:.18s ease; } .hap-urgent-bar>a:hover { border-color:#e44855;background:#e44855;color:#fff; } .hap-urgent-main{display:flex;align-items:center;gap:6px;flex:1 1 610px;min-width:0;flex-wrap:wrap}.hap-urgent-main>strong{display:flex;align-items:center;gap:8px;margin-right:3px;color:#b92e3b;font-weight:900;white-space:nowrap}.hap-urgent-main>strong i{width:9px;height:9px;border-radius:50%;background:#e44855;box-shadow:0 0 0 rgba(228,72,85,.45);animation:hap-modern-pulse 1.7s infinite}.hap-urgent-main>a{display:flex;align-items:center;justify-content:center;flex:1 1 105px;min-height:34px;padding:6px 8px;border:1px solid rgba(228,72,85,.10);border-radius:999px;background:rgba(255,255,255,.72);color:#8e3540;text-align:center;text-decoration:none;font-size:10px;font-weight:800;line-height:1.2;transition:.18s ease}.hap-urgent-main>a:hover{border-color:rgba(228,72,85,.24);background:#ffecee;color:#a92532}.hap-urgent-insights{display:grid;grid-template-columns:repeat(3,minmax(132px,1fr));flex:1 1 500px;gap:7px;min-width:0}.hap-urgent-insights>a{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;min-height:42px;padding:7px 10px;border:1px solid rgba(47,79,125,.08);border-radius:10px;background:rgba(255,255,255,.72);color:#53637b!important;text-decoration:none!important;transition:.18s ease}.hap-urgent-insights>a:hover{border-color:rgba(47,79,125,.18);background:#fff}.hap-urgent-insights span{font-size:9px;font-weight:750;line-height:1.25}.hap-urgent-insights strong{color:#142746;font-size:15px;line-height:1;white-space:nowrap}.hap-urgent-insights .debt strong{color:#c13d38}.hap-urgent-insights .expense strong{color:#b8750a}.hap-urgent-insights .leave strong{color:#238056} @keyframes hap-modern-pulse { 70% { box-shadow:0 0 0 8px rgba(228,72,85,0); } 100% { box-shadow:0 0 0 0 rgba(228,72,85,0); } } @media (min-width:681px) and (max-width:1180px) { .hap-urgent-insights { flex-basis:100%; } .hap-urgent-main>a { flex-basis:120px; } } .hap-modern-metrics { display:grid;grid-template-columns:repeat(6,minmax(135px,1fr));gap:11px;margin-bottom:16px; } .hap-modern-metric { position:relative;min-width:0;padding:16px;border:1px solid #e3e8f0;border-radius:15px;background:#fff;color:#15233a;text-decoration:none;box-shadow:0 6px 18px rgba(23,42,72,.04);transition:.18s ease;overflow:hidden; } .hap-modern-metric:hover { transform:translateY(-2px);border-color:#c8d6f2;box-shadow:0 12px 26px rgba(23,42,72,.09);color:#15233a; } .hap-modern-metric>span { display:block;padding-right:32px;color:#6d7b91;font-size:11px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .hap-modern-metric>i { position:absolute;right:13px;top:12px;width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:#eaf1ff;color:#2563eb;font-size:15px;font-style:normal;font-weight:900; } .hap-modern-metric:nth-child(4)>i { background:#fff5e6;color:#d67310; } .hap-modern-metric:nth-child(5)>i { background:#ffedef;color:#d83d4a; } .hap-modern-metric>strong { display:block;margin:14px 0 7px;color:#12233f;font-size:24px;line-height:1;letter-spacing:-.04em;white-space:nowrap; } .hap-modern-metric>small { display:block;color:#758298;font-size:10px;line-height:1.35; } .hap-modern-primary-grid { display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,.65fr);gap:16px;margin-bottom:16px; } .hap-modern-secondary-grid { display:grid;grid-template-columns:minmax(0,1.1fr) minmax(380px,.9fr);gap:16px;margin-bottom:16px; } .hap-modern-dashboard .panel { border:1px solid #e3e8f0;border-radius:18px;background:#fff;box-shadow:0 12px 32px rgba(26,44,76,.07); } .hap-modern-dashboard .panel-head h2 { color:#15233a;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:17px;letter-spacing:-.02em; } .hap-modern-dashboard .panel-head p { color:#6d7b91; } .hap-schedule-panel { display:flex;min-height:0;flex-direction:column; } .hap-today-schedule { flex:1;min-height:0;max-height:none;padding:2px 18px 18px;overflow:auto; } .hap-schedule-job { display:grid;grid-template-columns:52px 8px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:64px;padding:8px 0;border-top:1px solid #edf0f5;color:#15233a;text-decoration:none; } .hap-schedule-job:first-child { border-top:0; } .hap-schedule-job:hover { color:#15233a;background:#f8faff; } .hap-schedule-job>time { color:#6d7b91;font-size:12px;font-weight:900;text-align:right; } .hap-schedule-marker { width:7px;height:38px;border-radius:99px;background:#2563eb; } .hap-schedule-job.is-fix>.hap-schedule-marker { background:#e44855;box-shadow:0 0 11px rgba(228,72,85,.32); } .hap-schedule-copy { min-width:0; } .hap-schedule-copy strong { display:block;overflow:hidden;color:#15233a;font-size:12px;text-overflow:ellipsis;white-space:nowrap; } .hap-schedule-copy small { display:block;margin-top:4px;overflow:hidden;color:#758298;font-size:10px;text-overflow:ellipsis;white-space:nowrap; } .hap-schedule-status { grid-column:4;grid-row:1;justify-self:end;align-self:center; } .hap-staff-load-list { padding:2px 16px 16px;display:grid;gap:8px; } .hap-staff-load { display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:10px;padding:11px;border:1px solid #e6eaf1;border-radius:13px;color:#15233a;text-decoration:none;transition:.18s ease; } .hap-staff-load:hover { border-color:#c6d6f6;background:#f8faff;color:#15233a; } .hap-staff-load .mini-avatar { width:38px;height:38px;background:#eaf1ff;color:#1f56bc;font-size:11px; } .hap-staff-load>span:nth-child(2) { min-width:0; } .hap-staff-load strong { display:block;overflow:hidden;font-size:12px;text-overflow:ellipsis;white-space:nowrap; } .hap-staff-load small { display:block;margin-top:3px;color:#748197;font-size:10px; } .hap-load-label { display:flex;align-items:center;gap:5px;color:#16a36a;font-size:10px;white-space:nowrap; } .hap-load-label>i { width:7px;height:7px;border-radius:50%;background:currentColor; } .hap-load-label.busy { color:#ed8a19; }.hap-load-label.over { color:#e44855; }.hap-load-label.free { color:#2563eb; } .hap-load-bar { grid-column:2/4;height:5px;overflow:hidden;border-radius:999px;background:#eef1f5; } .hap-load-bar>i { display:block;height:100%;border-radius:inherit;background:#16a36a; } .hap-load-bar.busy>i { background:#ed8a19; }.hap-load-bar.over>i { background:#e44855; }.hap-load-bar.free>i { background:#6c9af2; } .hap-modern-chart { height:225px;border-top:1px solid #edf0f5;background:repeating-linear-gradient(to top,transparent 0 52px,#f1f3f7 53px); } .hap-modern-chart .bar { background:linear-gradient(180deg,#7ca5f6,#3471e7); } .hap-modern-chart .bar.highlight { background:linear-gradient(180deg,#233f69,#12233f); } .hap-quality-list { padding:3px 17px 16px; } .hap-modern-dashboard .hap-quality-list>a { display:grid;grid-template-columns:minmax(0,1fr) 62px 62px;align-items:center;gap:8px;padding:11px 0;border-bottom:1px solid #edf0f5;color:#15233a;text-decoration:none; } .hap-modern-dashboard .hap-quality-list>a:last-child { border-bottom:0; } .hap-modern-dashboard .hap-quality-list>a:hover { background:#f8faff; } .hap-modern-dashboard .hap-quality-list>a>span:first-child { min-width:0; } .hap-modern-dashboard .hap-quality-list strong { display:block;overflow:hidden;font-size:12px;text-overflow:ellipsis;white-space:nowrap; } .hap-modern-dashboard .hap-quality-list small { display:block;margin-top:3px;color:#758298;font-size:9px; } .hap-modern-dashboard .hap-quality-list>a>span:not(:first-child) { text-align:right; } .hap-modern-dashboard .hap-quality-list b { display:block;font-size:12px; } .hap-modern-dashboard .negative { color:#e44855!important; } .hap-latest-activity { margin-bottom:16px; } .hap-latest-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid #e8ecf2; } .hap-latest-grid>a { display:grid;grid-template-columns:34px minmax(0,1fr);gap:9px;padding:15px 16px;border-right:1px solid #e8ecf2;color:#15233a;text-decoration:none; } .hap-latest-grid>a:last-child { border-right:0; } .hap-latest-grid>a:hover { background:#f8faff; } .hap-latest-grid>a>i { width:32px;height:32px;display:grid;place-items:center;border-radius:9px;background:#eaf1ff;color:#2563eb;font-style:normal;font-weight:900; } .hap-latest-grid>a>span { min-width:0; } .hap-latest-grid strong { display:block;overflow:hidden;font-size:10px;line-height:1.4;text-overflow:ellipsis;white-space:nowrap; } .hap-latest-grid small { display:block;margin-top:3px;overflow:hidden;color:#748197;font-size:9px;text-overflow:ellipsis;white-space:nowrap; } .hap-latest-grid time { grid-column:2;color:#9aa4b4;font-size:9px; } body.hap-wm-admin-app .hap-notification-bell, .hap-employee-app .hap-notification-bell { border-color:#dfe6f1;background:#fff;color:#12233f;box-shadow:0 3px 10px rgba(26,44,76,.05); } body.hap-wm-admin-app .hap-notification-toast, .hap-employee-app .hap-notification-toast { border-color:#dfe6f1;background:#fff;box-shadow:0 16px 38px rgba(20,39,70,.18); } @media(max-width:1280px) { .hap-modern-metrics { grid-template-columns:repeat(3,1fr); } .hap-latest-grid { grid-template-columns:repeat(2,1fr); } .hap-latest-grid>a:nth-child(2) { border-right:0; } .hap-latest-grid>a:nth-child(-n+2) { border-bottom:1px solid #e8ecf2; } } @media(max-width:1050px) { .hap-modern-primary-grid,.hap-modern-secondary-grid { grid-template-columns:1fr; } .hap-staff-load-list { grid-template-columns:repeat(2,minmax(0,1fr)); } .hap-today-schedule { flex:none;max-height:510px; } } @media(max-width:680px) { .assignment-modal .modal-actions { flex-wrap:wrap; } .assignment-modal .modal-actions .btn { flex:1 1 calc(50% - 5px); } .hap-cancel-actions { display:grid;grid-template-columns:1fr 1fr; } .hap-admin-pagination { margin-top:20px; } .hap-admin-pagination a.page-numbers,.hap-admin-pagination span.page-numbers { min-width:38px;height:38px;padding:0 10px; } .hap-modern-head { align-items:flex-start;flex-direction:column;margin-top:0; } .hap-modern-actions { display:grid;width:100%;grid-template-columns:1fr 1fr; } .hap-modern-toolbar { align-items:flex-start;flex-direction:column; } .hap-modern-toolbar form { width:100%;justify-content:space-between; } .hap-modern-toolbar select { min-width:150px; } .hap-urgent-bar { align-items:stretch;display:grid;grid-template-columns:1fr;padding:10px; } .hap-urgent-main { display:grid;grid-template-columns:1fr 1fr;gap:6px; } .hap-urgent-main>strong { grid-column:1/-1; } .hap-urgent-main>a { min-width:0;padding:8px 6px;text-align:center;white-space:normal; } .hap-urgent-insights { grid-template-columns:1fr;gap:6px; } .hap-urgent-insights>a { min-height:40px; } .hap-modern-metrics { grid-template-columns:repeat(3,minmax(0,1fr));gap:8px; } .hap-modern-metric { padding:10px 9px 11px;border-radius:13px; } .hap-modern-metric>strong { margin:8px 0 4px;font-size:18px; } .hap-modern-metric>span { padding-right:0;white-space:normal;font-size:10px;line-height:1.25; } .hap-modern-metric>small { font-size:9px; } .hap-modern-metric>i { position:static;width:26px;height:26px;margin-bottom:6px;border-radius:8px;font-size:13px; } .hap-staff-load-list { grid-template-columns:1fr; } .hap-schedule-job { grid-template-columns:43px 7px minmax(0,1fr); } .hap-schedule-job>.hap-schedule-status { grid-column:3;grid-row:2;justify-self:start;align-self:start;margin-top:-4px; } .hap-latest-grid { grid-template-columns:1fr; } .hap-latest-grid>a { border-right:0;border-bottom:1px solid #e8ecf2!important; } .hap-latest-grid>a:last-child { border-bottom:0!important; } } /* Daily reminder for appointments that were scheduled before today. */ body.hap-appointment-reminder-open { overflow:hidden; } .hap-appointment-reminder[hidden] { display:none!important; } .hap-appointment-reminder { position:fixed;z-index:100200;inset:0;display:grid;place-items:center;padding:20px; } .hap-appointment-reminder-backdrop { position:absolute;inset:0;background:rgba(10,30,37,.66);backdrop-filter:blur(5px); } .hap-appointment-reminder>section { position:relative;width:min(620px,100%);max-height:calc(100vh - 40px);overflow:auto;padding:28px;border:1px solid rgba(255,255,255,.7);border-radius:24px;background:linear-gradient(145deg,#fff 0%,#f4fbf8 100%);color:#173f37;box-shadow:0 30px 90px rgba(3,25,30,.42); } .hap-appointment-reminder-icon { display:grid;place-items:center;width:62px;height:62px;margin-bottom:16px;border-radius:20px;background:#fff0d7;font-size:31px;box-shadow:0 9px 24px rgba(226,145,42,.24);animation:hapAppointmentBell 1.1s ease-in-out 2; } .hap-appointment-reminder-copy>span { color:#b46716;font-size:11px;font-weight:950;letter-spacing:.13em; } .hap-appointment-reminder-copy h2 { margin:6px 0 7px;color:#102f2a;font-size:25px;line-height:1.2; } .hap-appointment-reminder-copy p { margin:0;color:#60756e;font-size:13px;line-height:1.55; } .hap-appointment-reminder-list { display:grid;gap:8px;margin:20px 0; } .hap-appointment-reminder-list>div { display:grid;grid-template-columns:58px minmax(0,1fr);gap:12px;align-items:center;padding:11px 13px;border:1px solid #dce9e4;border-radius:13px;background:#fff; } .hap-appointment-reminder-list time { color:#12684f;font-size:16px;font-weight:950; } .hap-appointment-reminder-list span,.hap-appointment-reminder-list strong,.hap-appointment-reminder-list small { display:block;min-width:0; } .hap-appointment-reminder-list strong { overflow:hidden;color:#183e36;font-size:14px;text-overflow:ellipsis;white-space:nowrap; } .hap-appointment-reminder-list small { margin-top:3px;overflow:hidden;color:#687c75;font-size:11px;text-overflow:ellipsis;white-space:nowrap; } .hap-appointment-reminder-list>p { margin:2px 0 0;color:#667a73;font-size:12px;font-weight:750;text-align:center; } .hap-appointment-reminder-actions { display:flex;flex-wrap:wrap;justify-content:flex-end;gap:9px; } .hap-appointment-reminder-actions .btn { min-height:42px; } @keyframes hapAppointmentBell { 0%,100%{transform:rotate(0)} 25%{transform:rotate(9deg)} 50%{transform:rotate(-8deg)} 75%{transform:rotate(5deg)} } @media(max-width:600px) { .hap-appointment-reminder { padding:12px;place-items:end center; } .hap-appointment-reminder>section { max-height:calc(100vh - 24px);padding:20px;border-radius:20px; } .hap-appointment-reminder-copy h2 { font-size:21px; } .hap-appointment-reminder-list { margin:16px 0; } .hap-appointment-reminder-actions { display:grid;grid-template-columns:1fr 1fr; } .hap-appointment-reminder-actions .btn-primary { grid-column:1/-1; } } .hap-server-search { margin:0; } .hap-history-row-actions { display:grid;justify-items:start;gap:6px;min-width:82px; } .hap-history-row-actions .hap-history-open { min-height:30px;padding:0 9px!important;font-size:11px!important;line-height:28px!important; } .hap-history-row-actions .hap-history-delete { color:#b32d2e;font-size:11px;font-weight:750;text-decoration:none; } .hap-history-row-actions .hap-history-delete:hover { color:#8f2425;text-decoration:underline; } /* Assignment planned items and Admin bulk work-order actions. */ .hap-planned-items-note { margin:0 0 12px; } .hap-assignment-items-table { margin-bottom:10px; } .hap-assignment-items-table table { min-width:850px; } .hap-assignment-items-table th:nth-child(2) { min-width:190px; } .hap-assignment-items-table input,.hap-assignment-items-table select { width:100%;min-width:78px; } .hap-assignment-items-table .hap-assignment-item-total { min-width:105px;background:#f3f7f5;font-weight:800; } .hap-work-orders-titlebar { display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:12px; } .hap-work-orders-titlebar > div { display:flex;align-items:center;gap:10px;min-width:0; } .hap-work-orders-titlebar h1 { margin:0;color:var(--hap-ink);font-size:25px;line-height:1.25; } .hap-work-orders-titlebar > div > span { display:inline-flex;align-items:center;min-height:27px;padding:4px 9px;border-radius:999px;color:#17634f;background:#e6f3ee;font-size:11px;font-weight:850;white-space:nowrap; } .hap-work-order-toolbar { display:flex;align-items:center;gap:9px;margin:0 0 12px;padding:10px;border:1px solid #d7e2de;border-radius:12px;background:#fff;box-shadow:0 7px 20px rgba(22,60,52,.04); } .hap-work-order-bulk-actions { display:flex;flex:0 0 auto;align-items:center;gap:7px;margin:0;padding:0 9px 0 0;border:0;border-right:1px solid #e2e9e6;background:transparent; } .hap-work-order-bulk-actions select { min-width:180px; } .hap-work-order-bulk-actions .description { margin-left:4px;color:#64736e; } .hap-work-orders-table .check-column { width:34px;padding-left:10px!important;text-align:center; } .hap-work-orders-table .check-column input { margin:0; } .hap-work-order-list-tools { display:flex;flex:1 1 auto;align-items:center;gap:7px;min-width:0;margin:0;padding:0;border:0;background:transparent;box-shadow:none; } .hap-work-order-list-tools input[type=search] { flex:1;min-width:190px;min-height:34px;padding:5px 10px;border-color:#ccd9d4;border-radius:8px; } .hap-work-order-list-tools select { flex:0 1 160px;min-width:135px;min-height:34px;border-color:#ccd9d4;border-radius:8px;font-size:12px; } /* Readable analytics cards and Operations hero title. */ .hap-ops-hero .eyebrow { color:#fff;font-size:18px;font-weight:900;line-height:1.2;letter-spacing:.04em; } .hap-period-card-head span { font-size:20px;line-height:1.2; } .hap-period-card-head small { font-size:13px;line-height:1.45; } .hap-period-card-head em { padding:7px 10px;font-size:15px; } .hap-period-caption { font-size:13px;line-height:1.45; } .hap-mini-metrics span { color:#536c65;font-size:15px;font-weight:750;line-height:1.35; } .hap-mini-metrics strong { margin-top:5px;font-size:15px;line-height:1.35; } .hap-mini-metrics small { display:block;margin-top:4px;color:#72827d;font-size:13px;line-height:1.35; } body.hap-wm-admin-app .page-title-action, body.hap-wm-admin-app .button { min-height:33px;padding:5px 11px;border-radius:9px;font-size:12px;line-height:21px; } body.hap-wm-admin-app .hap-customer-row-actions { gap:8px; } /* v0.17.116: compact analytics range and 1-2-2 totals layout on mobile. */ @media(max-width:782px){.hap-analytics-filter{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;align-items:end}.hap-analytics-filter label{min-width:0}.hap-analytics-filter input{width:100%;min-width:0}.hap-analytics-filter .button{grid-column:1/-1;width:100%;margin:0}.hap-custom-summary{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.hap-custom-summary article:first-child{grid-column:1/-1}.hap-custom-summary article{min-width:0;padding:13px}.hap-custom-summary strong{font-size:17px}} @media(max-width:782px) { .hap-work-orders-titlebar { align-items:center; } .hap-work-orders-titlebar h1 { font-size:21px; } .hap-work-order-toolbar { align-items:stretch;flex-direction:column; } .hap-work-order-list-tools { align-items:stretch;flex-wrap:wrap; } .hap-work-order-list-tools input[type=search] { flex-basis:100%;min-width:0; } .hap-work-order-list-tools select { flex:1;min-width:150px; } .hap-work-order-list-tools .button-primary { flex:1; } .hap-work-order-bulk-actions { align-items:stretch;padding:0 0 9px;border-right:0;border-bottom:1px solid #e2e9e6; } .hap-work-order-bulk-actions select { flex:1;min-width:180px; } .hap-work-order-bulk-actions .description { flex-basis:100%;margin-left:0; } } .hap-password-panel { margin: 0 0 16px; border: 1px solid #dce9e6; background: linear-gradient(135deg, #ffffff 0%, #f5faf8 100%); } .hap-password-panel .panel-head { margin-bottom: 14px; } .hap-password-panel .panel-head h2 { margin-bottom: 4px; } .hap-password-panel > summary { cursor: pointer; list-style: none; margin-bottom: 0; } .hap-password-panel > summary::-webkit-details-marker { display: none; } .hap-password-panel[open] > summary { margin-bottom: 14px; } .hap-password-panel > summary::after { content: '+'; color: #176b52; font-size: 22px; font-weight: 800; } .hap-password-panel[open] > summary::after { content: '−'; } .hap-password-security { display: inline-flex; align-items: center; padding: 7px 11px; border-radius: 999px; background: #e7f5ef; color: #176b52; font-size: 12px; font-weight: 800; } .hap-password-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: end; } .hap-password-form label { display: grid; gap: 6px; font-size: 13px; font-weight: 700; color: #294943; } .hap-password-form input { width: 100%; min-height: 44px; box-sizing: border-box; border: 1px solid #cfddd9; border-radius: 10px; background: #fff; padding: 9px 12px; font: inherit; } .hap-password-form input:focus { outline: 2px solid rgba(23, 107, 82, .18); border-color: #176b52; } .hap-password-submit { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 12px; } .hap-password-submit small { color: #6d807c; } @media (max-width: 780px) { .hap-password-form { grid-template-columns: 1fr; } .hap-password-submit { grid-column: auto; align-items: stretch; flex-direction: column; } .hap-password-submit .btn { width: 100%; justify-content: center; } } .hap-profile-actions { grid-template-columns: auto auto; align-items: center; column-gap: 8px; } .hap-profile-actions .hap-telegram-profile-state, .hap-profile-actions .hap-telegram-connect { grid-column: 1 / -1; } .hap-profile-tool-button { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 5px; min-height: 29px; padding: 6px 10px; border: 1px solid rgba(255,255,255,.24); border-radius: 999px; background: rgba(255,255,255,.12); color: #fff; font: inherit; font-size: 11px; font-weight: 800; cursor: pointer; } .hap-profile-tool-button:hover { background: rgba(255,255,255,.22); } .profile-avatar { position: relative; overflow: visible; } .profile-avatar img { border-radius: inherit; } .hap-avatar-change-button { position: absolute; right: -6px; bottom: -6px; z-index: 4; display: grid; place-items: center; width: 27px; height: 27px; padding: 0; border: 3px solid #17345f; border-radius: 50%; background: #2c6bed; color: #fff; font-size: 18px; font-weight: 900; line-height: 1; cursor: pointer; box-shadow: 0 5px 14px rgba(0,0,0,.25); } .hap-avatar-change-button:hover { transform: scale(1.06); } body.hap-account-modal-open { overflow: hidden; } .hap-account-overlay { position: fixed; inset: 0; z-index: 1000002; display: none; place-items: center; padding: 18px; background: rgba(12,29,47,.58); backdrop-filter: blur(5px); } .hap-account-overlay.open { display: grid; } .hap-account-modal { width: min(590px, 100%); max-height: calc(100vh - 36px); overflow-y: auto; box-sizing: border-box; padding: 20px; border: 1px solid #dce7e3; border-radius: 20px; background: #fffdf9; box-shadow: 0 24px 70px rgba(9,31,47,.3); } .hap-account-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 16px; } .hap-account-modal-head > div { display: flex; align-items: center; gap: 11px; } .hap-account-modal-head h2 { margin: 0 0 3px; color: #173f38; font-size: 21px; } .hap-account-modal-head p { margin: 0; color: #71817d; font-size: 12px; } .hap-account-modal-head > button { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 10px; background: #f0f1ed; color: #31534b; font-size: 21px; cursor: pointer; } .hap-account-modal-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #e7f3ef; font-size: 19px; } .hap-password-modal .hap-password-form { display: grid; grid-template-columns: 1fr; gap: 13px; } .hap-password-current { grid-column: 1 / -1; } .hap-password-new-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; } .hap-password-submit { grid-column: auto; } .hap-avatar-form { display: grid; gap: 17px; } .hap-avatar-picker { display: flex; align-items: center; gap: 14px; padding: 14px; border: 1px dashed #aabfba; border-radius: 15px; background: #f5faf8; cursor: pointer; } .hap-avatar-picker > span:last-of-type { display: grid; gap: 4px; color: #294943; } .hap-avatar-picker small { color: #74837f; font-weight: 500; } .hap-avatar-picker input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; } .hap-avatar-preview { flex: 0 0 76px; display: grid; place-items: center; width: 76px; height: 76px; overflow: hidden; border-radius: 20px; background: #dfeee9; color: #176b52; font-size: 28px; font-weight: 900; } .hap-avatar-preview img { width: 100%; height: 100%; object-fit: cover; } .hap-avatar-actions { display: flex; justify-content: flex-end; gap: 9px; } .hap-employee-admin-pagination .tablenav-pages { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; width: 100%; margin: 12px 0 4px; } .hap-employee-admin-pagination .page-numbers { display: grid; place-items: center; min-width: 44px; height: 44px; box-sizing: border-box; margin: 0!important; padding: 0 13px; border: 1px solid #cfdbd6; border-radius: 12px; background: #fff; color: #264a41; text-decoration: none; font-size: 14px; font-weight: 850; box-shadow: 0 4px 13px rgba(27,61,51,.08); } .hap-employee-admin-pagination a.page-numbers:hover { border-color: #16805f; background: #edf8f3; color: #11684e; } .hap-employee-admin-pagination .page-numbers.current { border-color: #16805f; background: #16805f; color: #fff; } .hap-employee-admin-pagination .page-numbers.prev, .hap-employee-admin-pagination .page-numbers.next { min-width: 88px; } @media (max-width: 680px) { .hap-profile-actions { justify-content: center; justify-items: center; } .hap-account-modal { padding: 16px; border-radius: 17px; } .hap-password-new-row { grid-template-columns: 1fr; } .hap-password-submit { align-items: stretch; flex-direction: column; } .hap-avatar-actions .btn { flex: 1; justify-content: center; } .hap-employee-admin-pagination .page-numbers { min-width: 46px; height: 46px; } } .hap-employee-list-page .view { padding-bottom: 36px; } .hap-cancelled-assignment-detail { display:grid; gap:15px; padding:2px; } .hap-cancelled-assignment-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; border:1px solid #efc3bf; border-radius:14px; background:linear-gradient(135deg,#fff3f2,#fff9f8); } .hap-cancelled-assignment-head span { padding:6px 10px; border-radius:999px; background:#c9473f; color:#fff; font-size:10px; font-weight:900; letter-spacing:.06em; } .hap-cancelled-assignment-head strong { color:#7d2d29; font-size:17px; } .hap-cancelled-assignment-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .hap-cancelled-assignment-grid > div { min-width:0; padding:13px 14px; border:1px solid #dfe9e5; border-radius:12px; background:#f8fbfa; } .hap-cancelled-assignment-grid > div.full { grid-column:1 / -1; } .hap-cancelled-assignment-grid small,.hap-cancelled-reason small { display:block; margin-bottom:5px; color:#71817d; font-size:10px; font-weight:850; text-transform:uppercase; } .hap-cancelled-assignment-grid strong { display:block; color:#173b34; font-size:13px; line-height:1.45; } .hap-cancelled-assignment-grid p { margin:0; color:#294b43; line-height:1.55; } .hap-cancelled-reason { padding:14px 16px; border:1px solid #e9aaa5; border-radius:13px; background:#fff3f2; color:#7d2d29; } .hap-cancelled-reason strong { display:block; line-height:1.5; } .hap-cancelled-assignment-actions { display:flex; justify-content:flex-end; padding-top:2px; } .hap-list-count { display: inline-flex; align-items: center; justify-content: center; min-width: 74px; min-height: 38px; padding: 0 14px; border-radius: 999px; background: #e9f4f0; color: #176b52; font-weight: 800; } .hap-employee-filter-bar { display: flex; flex: 0 0 auto; flex-wrap: nowrap; gap: 7px; padding: 0; } .hap-employee-filter-bar a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border: 1px solid #d6e2de; border-radius: 10px; background: #fff; color: #31534b; font-size: 13px; font-weight: 800; text-decoration: none; } .hap-employee-filter-bar a:hover, .hap-employee-filter-bar a.active { border-color: #176b52; background: #176b52; color: #fff; } .hap-employee-list-toolbar { display: flex; align-items: flex-end; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--line); overflow-x: auto; background: #fff; } .hap-employee-date-filter { display: flex; flex: 1 0 auto; gap: 7px; align-items: end; padding: 0; } .hap-employee-date-filter label { display: grid; gap: 6px; color: #536b65; font-size: 11px; font-weight: 800; } .hap-employee-date-filter label:nth-of-type(1),.hap-employee-date-filter label:nth-of-type(2) { width: 132px; } .hap-employee-date-filter label:nth-of-type(3) { width: 142px; } .hap-employee-date-filter input { width: 100%; min-width: 0; height: 36px; padding: 4px 8px; border: 1px solid #d6e2de; border-radius: 10px; background: #f9fbfa; color: #173b34; font-size: 12px; } .hap-employee-date-actions { display: flex; flex-wrap: nowrap; justify-content: flex-end; gap: 6px; } .hap-employee-date-actions .btn { min-height: 36px; padding: 0 10px; white-space: nowrap; } .hap-export-assignment-btn { border-color: #b9ddcf; background: #e9f7f1; color: #176b52; font-weight: 850; } .hap-employee-records table { min-width: 1120px; } .hap-employee-records table td { vertical-align: middle; } .hap-employee-records .hap-record-revenue { color: #176b52; text-align: right; font-weight: 900; white-space: nowrap; } .hap-employee-records .customer small { max-width: 310px; } .hap-employee-records th:nth-child(6),.hap-employee-records td:nth-child(6){min-width:112px;white-space:nowrap} .hap-employee-records td:nth-child(6) .chip{display:inline-flex;align-items:center;justify-content:center;min-height:28px;box-sizing:border-box;line-height:1.1;white-space:nowrap;word-break:normal} .hap-pagination-large { flex-wrap: wrap; padding: 20px; } .hap-pagination-large a { min-width: 42px; height: 42px; border-radius: 11px; font-size: 14px; } .hap-pagination-large span { display: grid; place-items: center; min-width: 24px; height: 42px; color: #70817d; font-weight: 800; } .hap-pagination-large a.hap-page-direction { min-width: 76px; } @media (max-width: 780px) { .hap-cancelled-assignment-grid { grid-template-columns:1fr; } .hap-cancelled-assignment-grid > div.full { grid-column:auto; } .hap-cancelled-assignment-actions .btn { width:100%; justify-content:center; } .hap-employee-list-page .page-head { align-items: flex-start; } .hap-employee-filter-bar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; padding: 0; } .hap-employee-filter-bar a { justify-content: center; padding: 0 8px; } .hap-employee-list-toolbar { display: grid; overflow: visible; padding: 12px; } .hap-employee-date-filter { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; padding: 0; } .hap-employee-date-filter label:nth-of-type(1),.hap-employee-date-filter label:nth-of-type(2),.hap-employee-date-filter label:nth-of-type(3) { width: auto; } .hap-employee-date-filter label:nth-of-type(3),.hap-employee-date-actions { grid-column: 1 / -1; } .hap-employee-date-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } .hap-employee-date-actions .btn { justify-content: center; padding: 0 7px; font-size: 11px; } .hap-employee-records .table-wrap { overflow-x: auto; } .hap-employee-records table { min-width: 920px; } .hap-pagination-large a { min-width: 44px; height: 44px; } } /* Employee customer history lookup */ .hap-employee-app.hap-customer-history-page .page-head { align-items: end; margin-bottom: 15px; } .hap-employee-app.hap-customer-history-page .page-head h1 { max-width: 760px; font-size: clamp(29px, 3vw, 38px); line-height: 1.08; } .hap-employee-app.hap-customer-history-page .page-head p { max-width: 780px; } .hap-employee-app.hap-customer-history-page .hap-employee-records { overflow: hidden; border: 1px solid #dfe7e3; border-radius: 18px; box-shadow: 0 9px 28px rgba(28, 63, 53, .06); } .hap-customer-history-search { display: grid; grid-template-columns: minmax(300px, 560px) auto; justify-content: start; align-items: end; gap: 10px; width: 100%; padding: 14px 16px; border-bottom: 1px solid #e5ebe8; background: linear-gradient(135deg, #f8fbfa, #fffdf9); } .hap-customer-history-search label, .hap-customer-history-search label:nth-of-type(1) { width: auto; min-width: 0; gap: 7px; } .hap-customer-history-search label > span { color: #395e55; font-size: 11px; line-height: 1.25; white-space: nowrap; } .hap-customer-history-search input[type="search"] { width: 100%; height: 42px; padding: 0 13px; border-color: #cddbd6; border-radius: 11px; background: #fff; font-size: 13px; box-shadow: 0 3px 10px rgba(30, 75, 62, .04); } .hap-customer-history-search input[type="search"]:focus { border-color: #23745d; outline: 0; box-shadow: 0 0 0 3px rgba(35, 116, 93, .12); } .hap-customer-history-search .hap-employee-date-actions { display: flex; gap: 8px; } .hap-customer-history-search .hap-employee-date-actions .btn { min-height: 42px; padding: 0 15px; border-radius: 11px; font-size: 12px; } .hap-employee-app.hap-customer-history-page .hap-employee-records .empty-state { margin: 0; padding: 30px 18px; } .hap-employee-app.hap-customer-history-page .hap-employee-records table { min-width: 1080px; } .hap-employee-app.hap-customer-history-page .hap-employee-records th { padding: 11px 14px; } .hap-employee-app.hap-customer-history-page .hap-employee-records td { padding: 13px 14px; line-height: 1.45; } .hap-employee-app.hap-customer-history-page .hap-employee-records td:nth-child(5) { min-width: 210px; } .hap-employee-app.hap-customer-history-page .hap-employee-records td:nth-child(6) { min-width: 240px; } @media (max-width: 780px) { .hap-employee-app.hap-customer-history-page .page-head { gap: 8px; margin-bottom: 12px; } .hap-employee-app.hap-customer-history-page .page-head h1 { font-size: clamp(27px, 7vw, 34px); } .hap-employee-app.hap-customer-history-page .page-head p { font-size: 12px; line-height: 1.5; } .hap-customer-history-search { grid-template-columns: 1fr; gap: 9px; padding: 12px; } .hap-customer-history-search label, .hap-customer-history-search label:nth-of-type(1) { grid-column: 1; width: 100%; } .hap-customer-history-search .hap-employee-date-actions { grid-column: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .hap-customer-history-search .hap-employee-date-actions .btn { width: 100%; min-width: 0; padding: 0 9px; } .hap-employee-app.hap-customer-history-page .hap-employee-records table { min-width: 980px; } } @media (max-width: 480px) { .hap-employee-app.hap-customer-history-page .page-head h1 { font-size: 27px; } .hap-customer-history-search label > span { white-space: normal; } } .hap-ui-pagination{display:flex;justify-content:center;width:100%;margin:28px 0 14px;padding:0}.hap-ui-pagination ul.page-numbers{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:9px;margin:0;padding:0;list-style:none}.hap-ui-pagination li{margin:0}.hap-ui-pagination a.page-numbers,.hap-ui-pagination span.page-numbers,.hap-ui-pagination.hap-ui-pagination-direct>a,.hap-ui-pagination.hap-ui-pagination-direct>span{display:grid;place-items:center;min-width:44px;height:44px;box-sizing:border-box;margin:0;padding:0 14px;border:1px solid #cfdbd6;border-radius:12px;background:#fff;color:#264a41;text-decoration:none;font-size:14px;font-weight:850;line-height:1;box-shadow:0 4px 13px rgba(27,61,51,.08);transition:transform .18s ease,border-color .18s ease,background .18s ease,color .18s ease,box-shadow .18s ease}.hap-ui-pagination a.page-numbers:hover,.hap-ui-pagination.hap-ui-pagination-direct>a:hover{border-color:#16805f;background:#edf8f3;color:#11684e;transform:translateY(-2px);box-shadow:0 7px 17px rgba(22,128,95,.16)}.hap-ui-pagination span.page-numbers.current,.hap-ui-pagination.hap-ui-pagination-direct>a.active{border-color:#16805f;background:#16805f;color:#fff;box-shadow:0 6px 16px rgba(22,128,95,.25)}.hap-ui-pagination .page-numbers.prev,.hap-ui-pagination .page-numbers.next,.hap-ui-pagination .hap-page-direction{min-width:112px}.hap-ui-pagination .page-numbers.dots,.hap-ui-pagination.hap-ui-pagination-direct>span{min-width:30px;border-color:transparent;background:transparent;box-shadow:none}.hap-ui-pagination.hap-ui-pagination-direct{flex-wrap:wrap;align-items:center;gap:9px}@media(max-width:600px){.hap-ui-pagination{margin:22px 0 10px}.hap-ui-pagination ul.page-numbers,.hap-ui-pagination.hap-ui-pagination-direct{gap:6px}.hap-ui-pagination a.page-numbers,.hap-ui-pagination span.page-numbers,.hap-ui-pagination.hap-ui-pagination-direct>a,.hap-ui-pagination.hap-ui-pagination-direct>span{min-width:40px;height:40px;padding:0 10px;border-radius:10px;font-size:12px}.hap-ui-pagination .page-numbers.prev,.hap-ui-pagination .page-numbers.next,.hap-ui-pagination .hap-page-direction{min-width:94px}}.hap-assignment-filter-actions{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0}.hap-assignment-filter-actions .button{margin:0}.hap-assignment-filters .hap-grid>*{min-width:0}.hap-telegram-reply-filters{display:grid;grid-template-columns:repeat(3,minmax(160px,1fr)) auto;gap:12px;align-items:end;margin:14px 0 16px;padding:14px;border:1px solid var(--hap-line,#dce3ed);border-radius:13px;background:#f8faf9}.hap-telegram-reply-filters label{display:grid;gap:6px;color:var(--hap-ink,#17352d);font-size:12px;font-weight:750}.hap-telegram-reply-filters input,.hap-telegram-reply-filters select{width:100%;min-width:0;min-height:40px;margin:0}.hap-telegram-reply-filter-actions{display:flex;flex-wrap:wrap;gap:8px}.hap-telegram-reply-filter-actions .button{margin:0;white-space:nowrap} @media(max-width:782px){body.hap-wm-admin-app .hap-assignment-filters .hap-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hap-assignment-filters .hap-field input,.hap-assignment-filters .hap-field select{min-width:0;font-size:12px}.hap-telegram-reply-filters{grid-template-columns:repeat(2,minmax(0,1fr));padding:12px}.hap-telegram-reply-filters label:last-of-type,.hap-telegram-reply-filter-actions{grid-column:1/-1}.hap-telegram-reply-filter-actions .button{flex:1}} .hap-material-options{display:flex;flex-wrap:wrap;align-items:stretch;gap:10px;margin:0 0 12px}.hap-material-options .check-line{min-height:44px;margin:0;padding:10px 12px;border:1px solid #d8e0dd;border-radius:11px;background:#f8faf9;font-weight:800}.hap-material-options .hap-device-received-check{border-color:#a9c9f4;background:#eef6ff;color:#145da8}.hap-material-options .hap-device-received-check>span{display:grid;gap:2px}.hap-material-options .hap-device-received-check strong{font-size:12px}@media(max-width:480px){.hap-material-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.hap-material-options .check-line{min-width:0;padding:9px;font-size:10px;line-height:1.3}.hap-material-options .hap-device-received-check strong{font-size:10px}}.hap-material-section-title{display:flex;align-items:center;justify-content:space-between;gap:12px}.hap-material-section-title>span:first-child{min-width:0}.hap-device-received-inline{display:inline-flex;align-items:center;flex:0 0 auto;margin:0;color:#1261b1;font-size:10px;font-weight:850;letter-spacing:0;text-transform:none;white-space:nowrap;cursor:pointer}.hap-device-received-inline input{width:16px!important;height:16px!important;margin:0 6px 0 0!important}.hap-device-received-inline>span{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border:1px solid #b8d7fb;border-radius:999px;background:#f3f8ff}.hap-device-received-inline i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#8da9c7}.hap-device-received-inline input:checked+span{background:#e8f3ff;color:#1261b1}.hap-device-received-inline input:checked+span i{background:#2387f2;animation:hap-device-received-pulse 1.45s infinite}@media(max-width:480px){.hap-material-section-title{gap:7px}.hap-device-received-inline{font-size:9px}.hap-device-received-inline>span{gap:4px;padding:5px 7px}.hap-device-received-inline input{margin-right:4px!important}} .hap-work-finance-title{display:flex;align-items:center;justify-content:space-between;gap:12px}.hap-work-finance-title>span:first-child{min-width:0}.hap-debt-inline{display:inline-flex;align-items:center;flex:0 0 auto;margin:0;color:#a84c17;font-size:10px;font-weight:850;letter-spacing:0;text-transform:none;white-space:nowrap;cursor:pointer}.hap-debt-inline input{width:16px!important;height:16px!important;margin:0 6px 0 0!important}.hap-debt-inline>span{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border:1px solid #f0c9af;border-radius:999px;background:#fff8f2}.hap-debt-inline i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#d4aa8c}.hap-debt-inline input:checked+span{border-color:#e89961;background:#fff0e6;color:#963f0d;box-shadow:0 0 0 3px rgba(232,153,97,.12)}.hap-debt-inline input:checked+span i{background:#e87522;box-shadow:0 0 0 4px rgba(232,117,34,.13)}@media(max-width:480px){.hap-work-finance-title{gap:7px}.hap-debt-inline{font-size:9px}.hap-debt-inline>span{gap:4px;padding:5px 7px}.hap-debt-inline input{margin-right:4px!important}} .hap-vat-control-row{display:grid;grid-template-columns:minmax(0,1fr) 118px;gap:10px;align-items:stretch}.hap-vat-control-row #hap-vat-rate{width:100%;min-width:0}.hap-vat-covered-switch{position:relative;display:block!important;min-width:0;margin:0!important;cursor:pointer;-webkit-tap-highlight-color:transparent}.hap-vat-covered-switch input{position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;margin:0!important;opacity:0;pointer-events:none}.hap-vat-switch-ui{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:100%;min-height:42px;box-sizing:border-box;padding:0 10px;border:1.5px solid #b9ccc5;border-radius:12px;background:#f5f8f7;color:#58716a;font-size:11px;font-weight:850;line-height:1;white-space:nowrap;transition:border-color .18s ease,background .18s ease,color .18s ease,box-shadow .18s ease}.hap-vat-switch-ui i{position:relative;display:block;width:34px;height:19px;flex:0 0 34px;border-radius:999px;background:#bdc9c5;box-shadow:inset 0 1px 3px rgba(17,55,44,.18);transition:background .18s ease}.hap-vat-switch-ui i:after{content:"";position:absolute;top:3px;left:3px;width:13px;height:13px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(20,57,47,.3);transition:transform .18s ease}.hap-vat-covered-switch input:checked+.hap-vat-switch-ui{border-color:#159066;background:#e6f7f0;color:#0d704f;box-shadow:0 0 0 3px rgba(21,144,102,.12)}.hap-vat-covered-switch input:checked+.hap-vat-switch-ui i{background:#159066}.hap-vat-covered-switch input:checked+.hap-vat-switch-ui i:after{transform:translateX(15px)}.hap-vat-covered-switch input:focus-visible+.hap-vat-switch-ui{outline:2px solid #1769aa;outline-offset:2px}@media(max-width:480px){.hap-vat-control-row{grid-template-columns:minmax(0,1fr) 108px;gap:7px}.hap-vat-switch-ui{gap:6px;padding:0 7px;font-size:10px}.hap-vat-switch-ui i{width:30px;flex-basis:30px}.hap-vat-covered-switch input:checked+.hap-vat-switch-ui i:after{transform:translateX(11px)}} .hap-item-supplier-cell{min-width:180px}.hap-item-supplier-cell select{width:100%}.hap-supplier-paid{display:flex!important;align-items:center;gap:6px;margin-top:6px;color:#176e55;font-size:11px;font-weight:850;white-space:nowrap}.hap-supplier-paid input{width:16px!important;height:16px!important;margin:0!important}.hap-assignment-filters .hap-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.hap-dispatch-employee.has-leave{background:#fff5e8}.hap-dispatch-employee.has-leave strong{opacity:.52}.hap-dispatch-employee em{display:inline-flex;width:max-content;margin-top:4px;padding:3px 6px;border-radius:99px;background:#ffe1bb;color:#a55412;font-size:9px;font-style:normal;font-weight:900}.hap-dispatch-cell.has-leave{background-image:linear-gradient(135deg,rgba(239,166,93,.09),rgba(255,255,255,.92))}.hap-leave-slot{display:block;margin:0 0 6px;padding:4px 7px;border:1px solid #efbc7e;border-radius:7px;background:#fff1dd;color:#9b5314;font-size:9px;font-weight:900;text-align:center} @media(max-width:782px){body.hap-wm-admin-app .hap-assignment-filters .hap-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} .hap-day-card.hap-attendance-status-half_morning,.hap-day-card.hap-attendance-status-half_afternoon,.hap-day-card.hap-attendance-status-half{border-color:#ed9c43!important;background:linear-gradient(145deg,#fff4df,#ffdcae)!important;box-shadow:0 5px 16px rgba(204,111,34,.18)!important}.hap-day-card.hap-attendance-status-half_morning .hap-day-head strong,.hap-day-card.hap-attendance-status-half_afternoon .hap-day-head strong,.hap-day-card.hap-attendance-status-half .hap-day-head strong{color:#a34f12!important}.hap-day-card.hap-attendance-status-half_morning select,.hap-day-card.hap-attendance-status-half_afternoon select,.hap-day-card.hap-attendance-status-half select{border-color:#e8a55e;background:#fffaf2} .hap-item-supplier-cell{min-width:190px;white-space:nowrap}.hap-item-supplier-cell select{display:block;width:100%;min-width:0}.hap-material-options .hap-supplier-paid-all-check{border-color:#9fd2bb;background:#eef9f4;color:#176e55}.hap-material-options .hap-supplier-paid-all-check>span{display:grid;gap:2px}.hap-material-options .hap-supplier-paid-all-check strong{font-size:12px}.hap-material-options .hap-supplier-paid-all-check small{color:#628177;font-size:9px;font-weight:600} .hap-employee-statistics{padding:0;overflow:hidden}.hap-employee-stat-head{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 22px;border-bottom:1px solid #e4ebe8;background:linear-gradient(120deg,#fff,#f3faf7)}.hap-employee-stat-head h2{margin:0 0 4px;font-size:22px;color:#173c34}.hap-employee-stat-head p{margin:0;color:#74847f}.hap-employee-period-filter{display:flex;align-items:center;gap:8px}.hap-employee-period-filter select,.hap-employee-period-filter input{min-height:38px;margin:0;border-color:#ccdcd6;border-radius:10px;background:#fff;font-size:12px}.hap-employee-period-filter input{width:145px}.hap-employee-period-filter select{width:auto;min-width:105px}.hap-employee-kpi-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;padding:18px 22px 22px}.hap-employee-kpi-grid article,.hap-employee-kpi-grid>a{position:relative;display:grid;gap:5px;min-width:0;padding:16px;border:1px solid #dce8e3;border-radius:15px;background:#fff;color:#173c34;text-decoration:none;box-shadow:0 6px 18px rgba(25,67,56,.07);transition:.18s}.hap-employee-kpi-grid>a:hover{transform:translateY(-2px);border-color:#86bba8;box-shadow:0 10px 22px rgba(25,67,56,.12)}.hap-employee-kpi-grid span{color:#647b75;font-size:11px;font-weight:800}.hap-employee-kpi-grid strong{font-size:24px;line-height:1.05}.hap-employee-kpi-grid small{color:#8a9a96;font-size:10px}.hap-employee-kpi-grid .revenue{border-color:#acd7c7;background:linear-gradient(145deg,#eaf8f2,#fff)}.hap-employee-kpi-grid .revenue strong{color:#087553}.hap-employee-kpi-grid .cancelled strong,.hap-employee-kpi-grid .fix strong{color:#cf3f35}.hap-employee-kpi-grid .pending strong{color:#d67713}.hap-employee-revenue-chart{margin-top:16px}.hap-employee-revenue-chart .chart{min-height:230px;overflow-x:auto}.hap-employee-revenue-chart .bar-wrap{min-width:34px} @media(max-width:1100px){.hap-employee-kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:700px){.hap-employee-stat-head{display:grid;padding:16px}.hap-employee-stat-head h2{font-size:19px}.hap-employee-period-filter{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}.hap-employee-period-filter select,.hap-employee-period-filter input{width:100%;min-width:0}.hap-employee-period-filter .btn{width:100%}.hap-employee-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;padding:12px}.hap-employee-kpi-grid article,.hap-employee-kpi-grid>a{padding:13px;border-radius:13px}.hap-employee-kpi-grid strong{font-size:21px}.hap-employee-revenue-chart .panel-head{align-items:flex-start}.hap-employee-revenue-chart .chart{min-width:520px;min-height:210px}} .hap-admin-employee-statistics{margin-top:16px} /* Monthly assignment/work-order reconciliation. */ .hap-reconciliation-kpis{grid-template-columns:repeat(4,minmax(0,1fr))!important}@media(max-width:1180px){.hap-reconciliation-kpis{grid-template-columns:repeat(3,minmax(0,1fr))!important}}@media(max-width:700px){.hap-reconciliation-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}} .hap-reconciliation-page{max-width:none}.hap-reconciliation-head{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:8px 0 18px}.hap-reconciliation-head span{color:#16805f;font-size:11px;font-weight:900;letter-spacing:.12em}.hap-reconciliation-head h1{margin:3px 0 5px;color:#173c34;font-family:Georgia,serif;font-size:34px}.hap-reconciliation-head p{margin:0;color:#6f807b}.hap-reconciliation-filters{display:grid;grid-template-columns:150px minmax(180px,230px) minmax(180px,230px) minmax(240px,1fr) auto auto;align-items:end;gap:10px;max-width:none;padding:14px}.hap-reconciliation-filters label{display:grid;gap:6px;color:#61736e;font-size:11px;font-weight:850}.hap-reconciliation-filters input,.hap-reconciliation-filters select{width:100%;min-height:40px;margin:0;border-color:#cedbd6;border-radius:9px}.hap-reconciliation-filters .button{min-height:40px;margin:0}.hap-reconciliation-kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:11px;margin:14px 0}.hap-reconciliation-kpis article{padding:15px;border:1px solid #dae5e1;border-radius:14px;background:#fff;box-shadow:0 5px 15px rgba(24,62,52,.06)}.hap-reconciliation-kpis span{display:block;color:#71827d;font-size:11px;font-weight:750}.hap-reconciliation-kpis strong{display:block;margin-top:5px;color:#173c34;font-size:25px}.hap-reconciliation-kpis .ok{background:#effaf5}.hap-reconciliation-kpis .warn{background:#fff8e9}.hap-reconciliation-kpis .danger{background:#fff1ef}.hap-reconciliation-kpis .checked{background:#eef5ff}.hap-reconciliation-list{max-width:none;padding:0;overflow:hidden}.hap-reconciliation-actions{display:flex;align-items:center;gap:10px;padding:13px 15px;border-bottom:1px solid #dde6e2;background:#f7faf9}.hap-reconciliation-actions label{font-weight:800}.hap-reconciliation-actions select{min-width:210px;min-height:38px}.hap-reconciliation-actions>span{margin-left:auto;color:#71827d;font-size:11px}.hap-reconciliation-list table{min-width:1180px}.hap-reconciliation-list td{vertical-align:top}.hap-reconciliation-list td small{display:block;margin-top:4px;color:#758681}.hap-reconciliation-list tr.state-unentered td{background:#fffaf0}.hap-reconciliation-list tr.state-duplicate td{background:#fff2f0}.hap-reconciliation-list tr.is-reconciled{opacity:.76}.hap-reconcile-state{display:inline-flex;padding:5px 8px;border-radius:999px;background:#eef2f1;color:#49615b;font-size:10px;font-weight:900;white-space:nowrap}.hap-reconcile-state.state-matched{background:#e6f7ef;color:#087553}.hap-reconcile-state.state-unentered{background:#fff0cf;color:#a85a0b}.hap-reconcile-state.state-duplicate{background:#ffe1de;color:#bd3028}.hap-reconcile-state.state-cancelled{background:#ededed;color:#666}.hap-reconciled-mark{color:#1261b1!important;font-weight:850}.hap-match-note{color:#bd3028!important;font-weight:850}@media(max-width:1180px){.hap-reconciliation-filters{grid-template-columns:repeat(3,minmax(0,1fr))}.hap-reconciliation-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:700px){.hap-reconciliation-head{align-items:flex-start;flex-direction:column}.hap-reconciliation-head h1{font-size:29px}.hap-reconciliation-filters{grid-template-columns:repeat(2,minmax(0,1fr));padding:11px}.hap-reconciliation-filters .search{grid-column:1/-1}.hap-reconciliation-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.hap-reconciliation-kpis article{padding:12px}.hap-reconciliation-kpis strong{font-size:22px}.hap-reconciliation-actions{align-items:stretch;flex-wrap:wrap}.hap-reconciliation-actions label{width:100%}.hap-reconciliation-actions select{flex:1;min-width:0}.hap-reconciliation-actions>span{width:100%;margin:0}} /* Reconciliation polish, employee quick switch and wider work-entry dialogs. */ body.hap-wm-admin-app .hap-reconciliation-filters{grid-template-columns:repeat(4,minmax(0,1fr)) auto;align-items:end;gap:14px;padding:16px 18px;border:1px solid #dce7e2;background:#fff;box-shadow:0 7px 20px rgba(26,62,53,.06)} body.hap-wm-admin-app .hap-reconciliation-filters input,body.hap-wm-admin-app .hap-reconciliation-filters select,body.hap-wm-admin-app .hap-reconciliation-filters .button{min-height:38px} body.hap-wm-admin-app .hap-reconciliation-filters label.search{display:grid!important;gap:6px;width:auto;height:auto;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none} body.hap-wm-admin-app .hap-reconciliation-filters label.search input{height:38px;padding:7px 10px;border:1px solid #cedbd6!important;border-radius:9px!important;background:#fff!important} .hap-reconciliation-filter-actions{display:flex;align-items:center;gap:8px}.hap-reconciliation-filter-actions .button{display:inline-flex;align-items:center;justify-content:center;padding:0 13px;white-space:nowrap} body.hap-wm-admin-app .hap-reconciliation-list,body.hap-wm-admin-app .hap-reconciliation-list table,body.hap-wm-admin-app .hap-reconciliation-list tbody,body.hap-wm-admin-app .hap-reconciliation-list td{background:#fff} body.hap-wm-admin-app .hap-reconciliation-list thead th{background:#f5f8f7;color:#506a63;font-size:10px;font-weight:900} body.hap-wm-admin-app .hap-reconciliation-list tbody tr{opacity:1;transition:background-color .16s ease,box-shadow .16s ease} body.hap-wm-admin-app .hap-reconciliation-list tbody tr.is-selected td{background:#fff1a8!important} body.hap-wm-admin-app .hap-reconciliation-list tbody tr.is-selected{box-shadow:inset 4px 0 #e2a400} body.hap-wm-admin-app .hap-reconciliation-list tbody tr.is-reconciled:not(.is-selected) td{background:#f8fbfa} .hap-net-revenue{color:#087553}.hap-reconcile-split-fee{color:#b85e0a!important;font-weight:850} .hap-employee-filter-grid{grid-template-columns:140px 140px 170px 170px minmax(220px,1fr)} .hap-top-employee-switcher{display:flex;align-items:center;gap:8px;height:42px;padding:0 9px 0 12px;border:1px solid #d8e2df;border-radius:13px;background:#fff;box-shadow:0 3px 10px rgba(26,44,76,.05)}.hap-top-employee-switcher>span{color:#60766f;font-size:10px;font-weight:850;white-space:nowrap}.hap-top-employee-switcher select{width:190px;min-height:32px;margin:0;border:0!important;border-radius:8px;background:#edf8f3!important;color:#155f49;font-size:12px;font-weight:850;box-shadow:none!important} .hap-assignment-new-location,.hap-work-new-location-pair{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:10px}.hap-work-new-location-pair{display:grid;margin-top:8px;padding:10px;border:1px dashed #b9d4ca;border-radius:11px;background:#f5faf8}.hap-work-new-location-pair[hidden]{display:none!important}.hap-work-new-location-pair>.lookup-input,.hap-assignment-new-location>.lookup-input{min-width:0}.hap-work-new-location-pair input,.hap-assignment-new-location input{width:100%;min-height:42px}.hap-request-note-grid textarea{height:104px;min-height:104px;resize:vertical}.readonly-item.hap-assignment-address,.readonly-item.hap-assignment-request{height:100%;min-height:72px}.hap-reconciliation-modal-actions{align-items:center}.hap-reconciliation-check{display:flex;align-items:center;gap:9px;margin-right:auto;padding:8px 12px;border:1px solid #9fd2bb;border-radius:11px;background:#eef9f4;color:#176e55}.hap-reconciliation-check span{display:grid;gap:1px}.hap-reconciliation-check small{font-size:9px;font-weight:600}.hap-reconciliation-check input{width:18px!important;height:18px!important;margin:0!important} @media(min-width:900px){.modal.hap-work-entry-modal,.modal.assignment-modal{width:min(1280px,calc(100vw - 44px));max-height:calc(100dvh - 28px);background:#fff}.modal.hap-work-entry-modal .modal-body,.modal.assignment-modal .modal-body{background:#fff;overscroll-behavior:contain}.modal.hap-work-entry-modal .material-table table,.modal.assignment-modal .material-table table{min-width:1000px}.modal.hap-work-entry-modal .modal-body,.modal.assignment-modal .modal-body{padding-right:18px;padding-left:18px}} /* Keep every desktop popup inside the usable area beside the 248px sidebar. */ @media(min-width:961px){ body.hap-wm-admin-app .modal, .app-shell.hap-employee-app~.modal{left:calc(248px + (100vw - 248px)/2);max-width:calc(100vw - 276px)} .app-shell.hap-employee-app~.modal.hap-work-entry-modal{width:min(1180px,calc(100vw - 276px))} } @media(min-width:681px){.form-grid.customer-fields{grid-template-columns:repeat(4,minmax(0,1fr))}.customer-fields>.hap-phone-choice-field,.customer-fields>.hap-customer-name-field{grid-column:span 2}.customer-fields>.field.full,.customer-fields>.customer-mode{grid-column:1/-1}} @media(max-width:680px){.hap-phone-choice-row{grid-template-columns:1fr}.hap-phone-unavailable-check{justify-content:flex-start}} .hap-clickable-row,[data-hap-row-url]{cursor:pointer}.hap-clickable-row:hover>td,.hap-clickable-row:hover>th{background:#f2f8f5!important}.hap-clickable-row:focus{outline:3px solid rgba(32,118,91,.22);outline-offset:-3px}.assignment-card.hap-clickable-row:hover{border-color:#91bdb0;box-shadow:0 10px 24px rgba(27,75,64,.1)} .hap-operations-page .hap-quality-list>div>span{display:grid;gap:3px}.hap-operations-page .hap-quality-list>div>span>b{color:#183f38;font-size:12px}.hap-operations-page .hap-quality-list>div>span>small{color:#74837f;font-size:10px} .hap-quality-counts{display:flex;align-items:center;justify-content:flex-end;gap:5px;white-space:normal!important}.hap-quality-counts i{display:inline-flex;align-items:center;padding:5px 7px;border-radius:999px;font-size:10px;font-style:normal;font-weight:850;white-space:nowrap}.hap-quality-counts i.completed{background:#e8f6ef;color:#13734e}.hap-quality-counts i.fix{background:#fff4da;color:#bd7004}.hap-quality-counts i.cancelled{background:#fdebea;color:#ba352e}@media(max-width:600px){.hap-quality-counts{justify-content:flex-start;flex-wrap:wrap}} .hap-employee-quality-panel{grid-column:1/-1}.hap-quality-overview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:0 17px 13px}.hap-quality-overview article{position:relative;overflow:hidden;min-height:82px;padding:13px 14px;border:1px solid #dde7e4;border-radius:14px;background:#f8fbfa}.hap-quality-overview article:after{content:"";position:absolute;right:-18px;top:-24px;width:68px;height:68px;border-radius:50%;background:currentColor;opacity:.08}.hap-quality-overview span,.hap-quality-overview small{display:block}.hap-quality-overview span{color:#63756f;font-size:10px;font-weight:800;text-transform:uppercase}.hap-quality-overview strong{display:block;margin:5px 0 2px;font-size:24px;line-height:1}.hap-quality-overview small{color:#7b8985;font-size:9px}.hap-quality-overview .completed{border-color:#bde0d0;background:#eff9f4;color:#14724d}.hap-quality-overview .fix{border-color:#efdbab;background:#fff9e9;color:#c77405}.hap-quality-overview .cancelled{border-color:#efc7c4;background:#fff3f2;color:#bf3b33}.hap-modern-dashboard .hap-quality-employee-list{display:grid;gap:8px;padding-top:0}.hap-modern-dashboard .hap-quality-employee-list>a.hap-quality-employee{display:grid;grid-template-columns:minmax(200px,1.35fr) repeat(3,minmax(105px,.7fr));gap:12px;padding:12px;border:1px solid #e2e9e7;border-radius:14px;background:#fff;box-shadow:0 4px 16px rgba(25,57,50,.035)}.hap-modern-dashboard .hap-quality-employee-list>a.hap-quality-employee:hover{border-color:#a9ccc1;background:#fbfefd;box-shadow:0 9px 22px rgba(25,70,59,.08)}.hap-quality-person{display:flex!important;align-items:center;gap:10px;min-width:0}.hap-quality-person>.mini-avatar{width:35px;height:35px;flex:0 0 35px;font-style:normal}.hap-quality-person>span{min-width:0}.hap-quality-metric{display:grid;align-content:center;gap:4px;padding-left:11px;border-left:1px solid #e8eeec}.hap-quality-metric>span{display:flex;align-items:baseline;justify-content:space-between;gap:5px}.hap-quality-metric>span small{margin:0;font-size:8px;font-weight:850}.hap-quality-metric b{font-size:13px}.hap-quality-metric>i{display:block;overflow:hidden;height:5px;border-radius:999px;background:#e8eeec}.hap-quality-metric>i>em{display:block;width:var(--hap-quality-value);height:100%;border-radius:inherit;background:currentColor}.hap-quality-metric>small{margin:0!important}.hap-quality-metric.completed{color:#16805a}.hap-quality-metric.fix{color:#d0800b}.hap-quality-metric.cancelled{color:#c83f36}@media(max-width:760px){.hap-quality-overview{gap:7px;padding:0 12px 11px}.hap-quality-overview article{min-height:72px;padding:10px}.hap-quality-overview strong{font-size:20px}.hap-modern-dashboard .hap-quality-employee-list{padding-left:12px;padding-right:12px}.hap-modern-dashboard .hap-quality-employee-list>a.hap-quality-employee{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.hap-quality-person{grid-column:1/-1}.hap-quality-metric{padding:8px 0 0;border-top:1px solid #edf1ef;border-left:0}.hap-quality-metric>span{display:grid;gap:1px}.hap-quality-metric b{font-size:12px}}@media(max-width:430px){.hap-quality-overview span{font-size:8px}.hap-quality-overview strong{font-size:17px}.hap-quality-overview small{font-size:8px}.hap-quality-metric>span small{font-size:7px}} .hap-modern-secondary-grid>.hap-revenue-chart-panel,.hap-modern-secondary-grid>.hap-latest-activity{align-self:stretch;margin-bottom:0}.hap-modern-secondary-grid>.hap-latest-activity{display:flex;min-height:0;flex-direction:column}.hap-modern-secondary-grid>.hap-latest-activity .hap-latest-grid{display:grid;grid-template-columns:1fr;height:225px;min-height:225px;overflow:auto;border-top:1px solid #e8ecf2}.hap-modern-secondary-grid>.hap-latest-activity .hap-latest-grid>a{grid-template-columns:32px minmax(0,1fr) auto;padding:9px 13px;border-right:0;border-bottom:1px solid #e8ecf2}.hap-modern-secondary-grid>.hap-latest-activity .hap-latest-grid>a:last-child{border-bottom:0}.hap-modern-secondary-grid>.hap-latest-activity .hap-latest-grid time{grid-column:auto;align-self:center;white-space:nowrap} @media(max-width:1180px){body.hap-wm-admin-app .hap-reconciliation-filters{grid-template-columns:repeat(2,minmax(0,1fr))}.hap-reconciliation-filter-actions{grid-column:1/-1;justify-content:flex-end}.hap-employee-filter-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.hap-top-employee-switcher select{width:155px}} @media(max-width:700px){body.hap-wm-admin-app .hap-reconciliation-filters{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:11px}body.hap-wm-admin-app .hap-reconciliation-filters .search,.hap-reconciliation-filter-actions{grid-column:1/-1}.hap-reconciliation-filter-actions .button{flex:1}.hap-employee-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hap-employee-work-search{grid-column:1/-1}.hap-assignment-new-location,.hap-work-new-location-pair{grid-template-columns:1fr}.hap-request-note-grid textarea{height:92px;min-height:92px}.hap-top-employee-switcher{order:2;width:min(100%,260px)}.hap-top-employee-switcher select{width:100%;min-width:0}.hap-reconciliation-modal-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.hap-reconciliation-check{grid-column:1/-1;margin:0}.hap-reconciliation-modal-actions .btn{width:100%}} /* Clear assignment routing: order owner, receiver, role and automatic fee. */ .hap-assignment-routing-box{margin:14px 0 4px;padding:15px;border:1px solid #b8d8cc;border-radius:15px;background:linear-gradient(135deg,#f1faf6,#fff);box-shadow:0 6px 18px rgba(22,128,95,.07)} .hap-assignment-routing-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:12px}.hap-assignment-routing-head strong{color:#155f49;font-size:15px}.hap-assignment-routing-head small{color:#71857e;font-size:10px} .hap-assignment-routing-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:11px!important}.hap-assignment-routing-grid .field{min-width:0}.hap-assignment-routing-grid select,.hap-assignment-routing-grid input{width:100%;min-width:0} .hap-routing-preview{display:flex;align-items:center;min-height:42px;box-sizing:border-box;padding:9px 11px;border:1px solid #9fcdbb;border-radius:10px;background:#e9f7f1;color:#155f49;font-size:11px;font-weight:850;line-height:1.4} .hap-assignee-role-badge{border-color:#a9c9f4!important;background:#eef6ff!important;color:#145da8!important} @media(max-width:1050px){.hap-assignment-routing-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}} @media(max-width:600px){.hap-assignment-routing-box{padding:11px;border-radius:13px}.hap-assignment-routing-head{display:grid;gap:3px}.hap-assignment-routing-grid{grid-template-columns:1fr!important}.hap-routing-preview{min-height:40px}} /* Admin can edit the assignment snapshot directly from a full work-order popup. */ .hap-admin-assignment-meta{margin-bottom:12px}.hap-admin-assignment-edit{margin-top:12px;padding:14px;border:1px solid #9fcfbd;border-radius:14px;background:#fff;box-shadow:0 6px 18px rgba(22,96,74,.07)}.hap-admin-assignment-edit-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-bottom:10px;border-bottom:1px solid #e1ebe7}.hap-admin-assignment-edit-head strong{color:#126b51;font-size:13px}.hap-admin-assignment-edit-head small{color:#6f817b;font-size:10px;text-align:right}.hap-admin-assignment-fields{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:11px;margin-top:12px}.hap-admin-assignment-fields .field{min-width:0;margin:0}.hap-admin-assignment-fields input,.hap-admin-assignment-fields textarea{width:100%;box-sizing:border-box}.hap-admin-assignment-fields textarea{height:78px;min-height:78px;resize:vertical} @media(max-width:700px){.hap-admin-assignment-edit{padding:11px}.hap-admin-assignment-edit-head{display:grid;gap:4px}.hap-admin-assignment-edit-head small{text-align:left}.hap-admin-assignment-fields{grid-template-columns:1fr}.hap-admin-assignment-fields textarea{height:72px;min-height:72px}} /* Clear, touch-friendly debt control for employee work-order entry. */ .hap-debt-inline{position:relative;display:inline-flex!important;align-items:center;flex:0 0 auto;margin:0!important;color:#93430f!important;font-size:11px!important;font-weight:850!important;line-height:1;letter-spacing:0;text-transform:none;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent}.hap-debt-inline input{position:absolute!important;width:1px!important;height:1px!important;margin:0!important;opacity:0;pointer-events:none}.hap-debt-inline>span{display:inline-flex!important;align-items:center;gap:7px;min-height:38px;box-sizing:border-box;padding:0 13px 0 10px!important;border:1.5px solid #e9a775!important;border-radius:999px!important;background:linear-gradient(180deg,#fffaf5,#fff1e5)!important;box-shadow:0 3px 9px rgba(163,76,20,.10);transition:border-color .16s ease,background .16s ease,color .16s ease,box-shadow .16s ease,transform .16s ease}.hap-debt-inline>span:before{content:"";display:grid;place-items:center;width:19px;height:19px;box-sizing:border-box;border:2px solid #d8874d;border-radius:6px;background:#fff;color:#fff;font-size:12px;font-weight:950;line-height:1;transition:.16s}.hap-debt-inline i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#e28748;box-shadow:0 0 0 4px rgba(226,135,72,.12)}.hap-debt-inline:hover>span{border-color:#d77936!important;box-shadow:0 5px 13px rgba(163,76,20,.16);transform:translateY(-1px)}.hap-debt-inline input:focus-visible+span{outline:3px solid rgba(226,117,42,.22);outline-offset:2px}.hap-debt-inline input:checked+span{border-color:#dd6f24!important;background:linear-gradient(180deg,#fff1e4,#ffe4cf)!important;color:#7f3108!important;box-shadow:0 0 0 3px rgba(226,111,36,.12),0 5px 13px rgba(163,76,20,.14)}.hap-debt-inline input:checked+span:before{content:"✓";border-color:#d85f15;background:#df681b;box-shadow:0 2px 6px rgba(180,73,9,.25)}.hap-debt-inline input:checked+span i{background:#d94f14;box-shadow:0 0 0 4px rgba(217,79,20,.14)} @media(max-width:480px){.hap-work-finance-title{gap:8px}.hap-debt-inline{font-size:10px!important}.hap-debt-inline>span{min-height:36px;padding:0 10px 0 8px!important;gap:6px}.hap-debt-inline>span:before{width:18px;height:18px}} /* Compact employee list search and right-aligned account tools. */ .hap-employee-app .topbar>.top-actions{margin-left:auto} .hap-assignment-quick-search{position:relative!important;display:flex!important;align-items:center!important;width:260px!important;min-width:220px;height:36px;box-sizing:border-box} .hap-assignment-quick-search>span{position:absolute;left:11px;z-index:1;color:#67807a;font-size:16px;line-height:1} .hap-employee-date-filter .hap-assignment-quick-search>input{height:36px;padding-left:34px;padding-right:11px;background:#fff} @media(max-width:780px){.hap-employee-date-actions .hap-assignment-quick-search{grid-column:1/-1;width:100%!important;min-width:0}.hap-employee-date-actions{grid-template-columns:repeat(3,minmax(0,1fr))}} /* Employee home refresh - compact professional header and dashboard. */ .hap-home-live-clock{display:none} @media(min-width:783px){ .hap-employee-home-header{margin:0 0 14px;padding:0} .hap-employee-home-header .topbar{min-height:48px;margin:0 0 5px} .hap-employee-home-header .top-actions{margin-left:auto} .hap-employee-home-heading{display:grid;grid-template-columns:minmax(390px,1fr) auto auto;align-items:center;gap:18px;padding:2px 0} .hap-home-heading-copy{align-self:center;padding:0} .hap-home-live-clock{display:flex;align-items:center;gap:8px;margin:0;color:#52647e;font-variant-numeric:tabular-nums;line-height:1;white-space:nowrap} .hap-home-live-clock span,.hap-home-live-clock strong{font-size:14px;font-weight:850;letter-spacing:0}.hap-home-live-clock strong{color:#1e56d5} .hap-home-heading-copy .eyebrow{margin-bottom:6px;color:#2f68ec;font-size:11px} .hap-home-heading-copy h1{margin:0 0 6px;color:#172746;font-family:Inter,ui-sans-serif,"Segoe UI",sans-serif;font-size:38px;line-height:1;letter-spacing:-.042em} .hap-home-heading-copy p{margin:0;color:#748199;font-size:13px} .hap-home-quick-metrics{display:flex;align-items:stretch;gap:10px} .hap-home-quick-metrics>a,.hap-home-quick-metrics>.hap-next-schedule{display:flex;min-width:126px;box-sizing:border-box;align-items:center;gap:10px;padding:11px 13px;border:1px solid #e0e7f1;border-radius:14px;background:#fff;color:#172746;text-decoration:none;box-shadow:0 6px 18px rgba(26,44,76,.055)} .hap-home-quick-metrics>a:hover{border-color:#aac3f5;transform:translateY(-1px);box-shadow:0 10px 24px rgba(26,72,160,.1)} .hap-home-quick-metrics i{display:grid;width:36px;height:36px;flex:0 0 36px;place-items:center;border-radius:11px;background:#eaf1ff;color:#2864e8;font-size:18px;font-style:normal} .hap-home-quick-metrics i svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .hap-home-quick-metrics>a:nth-child(2) i{background:#fff0df;color:#dc7607}.hap-home-quick-metrics>.hap-next-schedule i{background:#e5f8ed;color:#169c5b} .hap-home-quick-metrics span span{display:grid;gap:2px}.hap-home-quick-metrics strong,.hap-home-quick-metrics small{display:block;white-space:nowrap}.hap-home-quick-metrics strong{font-size:18px;line-height:1}.hap-home-quick-metrics small{color:#758198;font-size:10px}.hap-next-schedule span strong{margin-top:3px;color:#159559} .hap-home-create{display:inline-flex;align-self:center;align-items:center;justify-content:center;gap:8px;height:60px;min-height:60px;box-sizing:border-box;padding:0 18px;border-radius:14px;white-space:nowrap;box-shadow:0 8px 20px rgba(46,98,230,.2)} .hap-home-create svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .hap-employee-home-header+.view .profile-banner{min-height:124px;box-sizing:border-box;gap:18px;padding:20px 22px;border-radius:20px;background:linear-gradient(115deg,#14294d 0%,#244579 72%,#2e4f87 100%);box-shadow:0 13px 32px rgba(20,42,80,.16)} .hap-employee-home-header+.view .profile-banner h2{font-family:Inter,ui-sans-serif,"Segoe UI",sans-serif;font-size:25px} .hap-employee-home-header+.view .profile-avatar{width:76px;height:76px;border-radius:22px} .hap-employee-home-header+.view .hap-profile-actions{grid-template-columns:auto auto;align-content:center} .hap-employee-home-header+.view .hap-employee-home-stats{gap:12px;margin-bottom:16px} .hap-employee-home-header+.view .hap-employee-home-stats .stat-card{min-height:122px;box-sizing:border-box;padding:18px 16px 16px 68px;border-color:#e1e7f0;border-radius:17px;background:#fff;box-shadow:0 8px 22px rgba(26,44,76,.06)} .hap-employee-home-header+.view .hap-employee-home-stats .stat-card:after{display:none} .hap-employee-home-header+.view .hap-employee-home-stats .stat-card:before{position:absolute;left:16px;top:26px;display:grid;width:40px;height:40px;place-items:center;border-radius:12px;background:#eaf1ff;color:#2e68e7;font-size:19px;font-weight:900} .hap-employee-home-header+.view .hap-today-schedule-card{display:grid;grid-template-columns:40px minmax(0,1fr);align-items:center;gap:12px;padding-left:16px!important} .hap-employee-home-header+.view .hap-today-icon{display:grid;width:40px;height:40px;place-items:center;border-radius:12px;background:#eaf1ff} .hap-employee-home-header+.view .hap-today-icon svg{width:22px;height:22px;fill:none;stroke:#2e68e7;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .hap-employee-home-header+.view .hap-today-action{display:none} .hap-employee-home-header+.view .hap-recent-ticket-card:before{content:"";background-color:#eaf1ff!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232e68e7' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3.5h12a2 2 0 0 1 2 2v15H6a2 2 0 0 1-2-2v-13a2 2 0 0 1 2-2Z'/%3E%3Cpath d='M8 8h8M8 12h8M8 16h5'/%3E%3C/svg%3E")!important;background-position:center!important;background-repeat:no-repeat!important;background-size:22px!important} .hap-employee-home-header+.view .hap-income-card:before{content:"";background-color:#e7f7ef!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23118356' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 18V9M10 18V5M16 18v-7M3 20h18'/%3E%3Cpath d='m14 6 3-3 3 3M17 3v7'/%3E%3C/svg%3E")!important;background-position:center!important;background-repeat:no-repeat!important;background-size:22px!important} .hap-employee-home-header+.view .hap-extra-income-card:before{content:"";background-color:#edf0fb!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23556bb3' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='18' height='13' rx='2.5'/%3E%3Cpath d='M16 11h5v4h-5a2 2 0 1 1 0-4ZM7 6V4h9v2'/%3E%3C/svg%3E")!important;background-position:center!important;background-repeat:no-repeat!important;background-size:22px!important} .hap-employee-home-header+.view .hap-pending-work-card:before{content:"";background-color:#fff0df!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d87208' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5M12 16.5h.01'/%3E%3C/svg%3E")!important;background-position:center!important;background-repeat:no-repeat!important;background-size:22px!important} .hap-employee-home-header+.view .hap-pending-work-card{border-color:#f0d6b7!important;background:#fffaf4!important} .hap-employee-home-header+.view .stat-label{color:#6e7b91;font-size:11px;font-weight:800}.hap-employee-home-header+.view .stat-value{margin:8px 0 6px;color:#142442;font-size:25px}.hap-employee-home-header+.view .stat-foot{font-size:10px} .hap-employee-home-header+.view .hap-income-month-picker{grid-template-columns:auto minmax(0,1fr);margin-top:5px}.hap-employee-home-header+.view .hap-income-month-picker input{height:30px} .hap-employee-insights{grid-template-columns:minmax(0,1.55fr) minmax(360px,.95fr);align-items:stretch;gap:14px;margin-top:0} .hap-employee-insights>.panel{display:flex;min-height:310px;flex-direction:column} .hap-employee-insights .panel-head{padding:19px 20px 14px}.hap-employee-insights .panel-head h2{font-family:Inter,ui-sans-serif,"Segoe UI",sans-serif;font-size:19px} .hap-employee-insights .hap-activity-stats{flex:1;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;padding:0 18px 18px} .hap-employee-insights .hap-activity-stats a{min-height:86px;box-sizing:border-box;border-radius:13px}.hap-employee-insights .hap-activity-stats strong{font-size:24px} .hap-month-revenue-chart{position:relative;flex:1;height:230px;grid-template-columns:repeat(auto-fit,minmax(70px,1fr));padding:20px 24px 16px;background:linear-gradient(180deg,#fff,#fbfcff)} .hap-month-revenue-chart .bar{width:min(52px,64%);min-height:3px;background:linear-gradient(180deg,#3568eb,#88a9ef)}.hap-month-revenue-chart .bar.highlight{background:linear-gradient(180deg,#17325e,#35a36f)} .hap-assigned-head-tools{display:flex;align-items:center;justify-content:flex-end;gap:8px}.hap-assigned-head-tools form{margin:0}.hap-assigned-quick-search{width:260px;height:38px;box-sizing:border-box;padding:7px 11px;background:#fff}.hap-assigned-head-tools .btn{min-height:38px;padding:0 13px;white-space:nowrap} } @media(min-width:783px) and (max-width:1250px){.hap-employee-home-heading{grid-template-columns:1fr auto}.hap-home-quick-metrics{grid-row:2;grid-column:1/-1}.hap-home-create{grid-row:1;grid-column:2}.hap-employee-home-stats{grid-template-columns:repeat(3,minmax(0,1fr))}.hap-employee-insights{grid-template-columns:1fr}} @media(max-width:782px){.hap-employee-home-heading{display:none}.hap-employee-home-header{margin:0}.hap-employee-home-header .topbar{margin:0!important}.hap-assigned-head-tools{display:grid;grid-template-columns:1fr 1fr;gap:7px;width:100%}.hap-assigned-head-tools form{margin:0}.hap-assigned-head-tools .mini-filter,.hap-assigned-head-tools .btn{width:100%;min-width:0}.hap-assigned-quick-search{grid-column:1/-1;width:100%;box-sizing:border-box}.hap-employee-app .sidebar-download{display:none!important}} /* ========== Customer volume – 2 cột (giống mockup) ========== */ .hap-customer-volume-section { margin-bottom: 18px; } .hap-cust-range-bar { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; margin-bottom: 12px; padding: 10px 12px; border: 1px solid #e3e8f0; border-radius: 14px; background: #fff; box-shadow: 0 4px 14px rgba(23,42,72,.04); overflow-x: auto; } .hap-cust-range-bar > label { color: #5b6b82; font-size: 12px; font-weight: 800; margin-right: 2px; white-space: nowrap; flex-shrink: 0; } .hap-cust-range-bar select, .hap-cust-range-bar input[type="date"] { height: 34px; padding: 0 10px; border: 1px solid #d5deeb; border-radius: 10px; background: #fff; color: #1e2a3b; font-size: 12px; font-weight: 600; flex-shrink: 0; } .hap-cust-range-bar select { min-width: 110px; } .hap-cust-range-bar input[type="date"] { min-width: 128px; } .hap-cust-range-bar .btn { height: 34px; padding: 0 14px; border-radius: 10px; font-size: 12px; font-weight: 800; flex-shrink: 0; white-space: nowrap; } .hap-customer-volume-grid { display: grid; grid-template-columns: minmax(280px, 0.95fr) minmax(340px, 1.25fr); gap: 14px; align-items: stretch; } .hap-cust-today-panel, .hap-cust-chart-panel { margin: 0; padding: 14px 16px 12px; border: 1px solid #e3e8f0; border-radius: 16px; background: #fff; box-shadow: 0 6px 18px rgba(23,42,72,.04); } .hap-cust-today-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2px; } .hap-cust-today-head > span { color: #5b6b82; font-size: 12px; font-weight: 800; } .hap-cust-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: #e8f0fe; } .hap-cust-today-total { display: block; margin: 2px 0 10px; color: #12233f; font-size: 32px; line-height: 1; letter-spacing: -.045em; font-weight: 900; } .hap-cust-breakdown { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; } .hap-cust-pill { padding: 10px 6px; border-radius: 12px; text-align: center; min-width: 0; } .hap-cust-pill span { display: block; color: #6b7c93; font-size: 10px; font-weight: 700; margin-bottom: 5px; line-height: 1.2; } .hap-cust-pill b { display: block; font-size: 20px; font-weight: 900; letter-spacing: -.02em; line-height: 1; } .hap-cust-pill.new { background: #e8f8ef; } .hap-cust-pill.new b { color: #0d8a4a; } .hap-cust-pill.returning { background: #eaf1ff; } .hap-cust-pill.returning b { color: #2563eb; } .hap-cust-pill.stranger { background: #fff6e8; } .hap-cust-pill.stranger b { color: #d97706; } .hap-cust-chart-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 6px; } .hap-cust-chart-label { display: block; color: #5b6b82; font-size: 12px; font-weight: 800; } .hap-cust-period-total { display: block; margin-top: 2px; color: #12233f; font-size: 28px; line-height: 1; letter-spacing: -.04em; font-weight: 900; } /* Day navigation: ← ngày → */ .hap-cust-day-nav { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .hap-cust-nav-btn { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid #d5deeb; border-radius: 9px; background: #fff; color: #1e2a3b; font-size: 14px; font-weight: 800; text-decoration: none; transition: .15s ease; } .hap-cust-nav-btn:hover { border-color: #3b82f6; color: #3b82f6; background: #f0f5ff; } .hap-cust-nav-btn.is-disabled { opacity: .35; pointer-events: none; cursor: default; } .hap-cust-nav-current { min-width: 78px; text-align: center; color: #12233f; font-size: 12px; font-weight: 800; padding: 0 4px; } .hap-cust-line-chart { position: relative; height: 148px; padding-bottom: 20px; } .hap-cust-svg { width: 100%; height: 120px; display: block; } .hap-cust-x-labels { position: absolute; left: 0; right: 0; bottom: 0; height: 18px; } .hap-cust-x-labels span { position: absolute; transform: translateX(-50%); color: #7a8aa0; font-size: 10px; font-weight: 600; white-space: nowrap; } .hap-cust-x-labels span.is-focus { color: #1d4ed8; font-weight: 800; } @media (max-width: 960px) { .hap-customer-volume-grid { grid-template-columns: 1fr; } .hap-cust-breakdown { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 6px; } .hap-cust-pill span { font-size: 9px; } .hap-cust-pill b { font-size: 18px; } .hap-cust-range-bar { flex-wrap: wrap; gap: 6px 8px; padding: 10px; } .hap-cust-range-bar > label { width: 100%; margin-bottom: 2px; } .hap-cust-range-bar select { flex: 0 0 auto; min-width: 100px; } .hap-cust-range-bar input[type="date"] { flex: 1 1 120px; min-width: 0; } .hap-cust-range-bar .btn { flex: 0 0 auto; } } /* Toast auto-dismiss + nút đóng */ .hap-notification-toast { grid-template-columns: 38px 1fr 28px !important; align-items: start; } .hap-notification-toast-body { display: grid; gap: 2px; color: inherit; text-decoration: none; min-width: 0; } .hap-notification-toast-body:hover strong { color: #1d4ed8; } .hap-notification-toast-close { width: 28px; height: 28px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #8a9aa8; font-size: 20px; line-height: 1; cursor: pointer; } .hap-notification-toast-close:hover { background: #f1f5f9; color: #b8352c; } .hap-customer-volume-section.is-loading { opacity: 0.65; pointer-events: none; transition: opacity .15s ease; } .hap-cust-nav-btn { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid #d5deeb; border-radius: 9px; background: #fff; color: #1e2a3b; font-size: 14px; font-weight: 800; cursor: pointer; transition: .15s ease; } .hap-cust-nav-btn:hover:not(.is-disabled):not(:disabled) { border-color: #3b82f6; color: #3b82f6; background: #f0f5ff; } .hap-cust-nav-btn.is-disabled, .hap-cust-nav-btn:disabled { opacity: .35; pointer-events: none; cursor: default; } .hap-calendar-job.cancelled .hap-job-cancel-reason { display: block; margin-top: 4px; color: #b45309; font-size: 11px; line-height: 1.35; font-weight: 600; } .hap-job-preview strong { white-space: pre-wrap; word-break: break-word; } /* Multi-address picker hint under location select */ .hap-location-more { position: relative; margin: 8px 0 4px; } .hap-location-more-btn { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid #cfe8dc; border-radius: 999px; background: #f3fbf7; color: #0f6b4c; font-size: 12px; font-weight: 700; cursor: pointer; box-shadow: 0 2px 8px rgba(22, 128, 95, 0.08); } .hap-location-more-btn:hover { background: #e7f7ef; border-color: #9fd4b8; } .hap-location-more-dot { width: 8px; height: 8px; border-radius: 50%; background: #16a34a; box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18); flex: 0 0 auto; } .hap-location-more-chevron { font-size: 10px; opacity: 0.75; margin-left: 2px; } .hap-location-more-btn[aria-expanded="true"] .hap-location-more-chevron { transform: rotate(180deg); display: inline-block; } .hap-location-more-list { position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 6px); display: none; /* mặc định ẩn — chỉ mở khi bấm nút */ gap: 4px; max-height: 220px; overflow: auto; padding: 8px; border: 1px solid #d7e3ef; border-radius: 12px; background: #fff; box-shadow: 0 14px 32px rgba(20, 40, 70, 0.14); } .hap-location-more-list.is-open { display: grid; } .hap-location-more-list[hidden] { display: none !important; } .hap-location-more-item { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: 10px; background: transparent; color: #1f334f; text-align: left; font-size: 12.5px; font-weight: 600; line-height: 1.4; cursor: pointer; } .hap-location-more-item:hover { background: #f3f8ff; } .hap-location-more-item .hap-location-more-dot { margin-top: 5px; background: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15); } /* 0.17.77: workflow, self-purchase and returned-device refinements. */ .hap-location-choice-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:10px} .hap-location-choice-row>.hap-work-new-location-pair,.hap-location-choice-row>.hap-assignment-new-location{margin:0;padding:0;border:0;background:transparent;grid-template-columns:1fr} .material-table.has-self-purchase table{min-width:1160px;table-layout:fixed} .material-table.has-self-purchase th:nth-child(1){width:88px} .material-table.has-self-purchase th:nth-child(2){width:210px} .material-table.has-self-purchase th:nth-child(3){width:54px;text-align:center;font-size:8px;letter-spacing:0} .material-table.has-self-purchase th:nth-child(4){width:58px} .material-table.has-self-purchase th:nth-child(5){width:76px} .material-table.has-self-purchase th:nth-child(6){width:106px} .material-table.has-self-purchase th:nth-child(7){width:168px} .material-table.has-self-purchase th:nth-child(8){width:116px} .material-table.has-self-purchase th:nth-child(9){width:160px} .material-table.has-self-purchase th:nth-child(10){width:42px} .hap-item-name-cell{min-width:0!important}.hap-item-name-cell>.hap-item-name{width:100%;min-width:0}.hap-item-self-purchase-cell{text-align:center}.material-table input.hap-item-self-purchase{display:inline-block!important;width:16px!important;max-width:16px!important;min-width:16px!important;height:16px!important;min-height:16px!important;margin:0!important;padding:0!important;border-radius:4px!important;background:#fff!important;box-shadow:none!important;appearance:auto!important;-webkit-appearance:checkbox!important;accent-color:#16745c;pointer-events:auto!important;cursor:pointer} .hap-item-supplier-cell{min-width:0!important}.hap-item-supplier-cell select,.hap-item-purchase-source{width:100%;min-width:0}.hap-item-purchase-source{display:block;margin-top:5px;border-color:#e2b96f!important;background:#fffaf0!important}.hap-item-purchase-source[hidden]{display:none!important} .hap-item-total{min-width:150px!important;width:100%!important;box-sizing:border-box;text-align:right;font-weight:850} .hap-assignment-outcome-flags{grid-template-columns:repeat(4,minmax(0,1fr))}.hap-assignment-outcome-flags .check-line{min-height:40px;padding:7px 10px;align-items:center}.hap-device-returned-check{border:1px solid #c9b7f2;background:#f6f2ff;color:#6841ad} .status.device-returned{gap:6px;border:1px solid #c9b7f2;background:#f4efff;color:#6b3fb3}.status.device-returned::before{display:none}.status.device-returned i{display:inline-block;width:8px;height:8px;border-radius:50%;background:#8b5cf6;animation:hap-device-returned-pulse 1.35s infinite}@keyframes hap-device-returned-pulse{0%{box-shadow:0 0 0 0 rgba(139,92,246,.65)}70%{box-shadow:0 0 0 8px rgba(139,92,246,0)}100%{box-shadow:0 0 0 0 rgba(139,92,246,0)}} @media(min-width:783px){.form-grid.customer-fields.hap-assignment-customer-fields{grid-template-columns:repeat(3,minmax(0,1fr))}.hap-assignment-customer-fields>.hap-assignment-location-entry-field{grid-column:1/-1}.hap-assignment-customer-fields>.customer-mode{grid-column:1/-1}} .hap-assignment-location-entry-field{grid-column:1/-1}.hap-assignment-location-entry-field .hap-assignment-new-location{display:block;margin:0;padding:0;border:0;background:transparent}.hap-assignment-location-entry-field .lookup-input{width:100%;min-width:0}.hap-assignment-location-entry-field #hap-assignment-new-location{width:100%} .hap-assignment-location-history-row{display:flex;align-items:center;gap:10px;min-width:0}.hap-assignment-location-history-row .hap-assignment-new-location{flex:0 1 720px;min-width:0}.hap-assignment-customer-history{display:inline-flex;align-items:center;justify-content:center;min-height:42px;box-sizing:border-box;white-space:nowrap}.hap-assignment-customer-history.is-disabled{opacity:.48;cursor:not-allowed;pointer-events:none} @media(max-width:782px){.hap-assignment-location-history-row .hap-assignment-new-location{flex:1 1 0}.hap-assignment-customer-history{padding-right:10px;padding-left:10px;font-size:11px}} @media(max-width:980px){.hap-assignment-outcome-flags{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:700px){.hap-location-choice-row,.hap-assignment-outcome-flags{grid-template-columns:1fr}.material-table.has-self-purchase{overflow-x:auto}.hap-assignment-outcome-flags .check-line{min-height:40px}} /* Purchase claim metadata: compact desktop grid; date/payment stay paired on mobile. */ .hap-item-purchase-meta-row>td{padding:0 10px 10px!important;background:#f4faf7!important;border-top:0!important}.hap-item-purchase-meta-row[hidden]{display:none!important}.hap-self-purchase-meta{display:grid;grid-template-columns:minmax(150px,.65fr) minmax(210px,1fr) minmax(240px,1.2fr);gap:10px;padding:10px 12px;border:1px solid #cfe5dc;border-radius:10px;background:#fff;box-sizing:border-box}.hap-self-purchase-meta label{display:grid;gap:5px;min-width:0;font-size:11px;font-weight:700;color:#315b50}.hap-self-purchase-meta label>span{line-height:1.2}.hap-self-purchase-meta label small{font-weight:500;color:#758781}.hap-self-purchase-meta input,.hap-self-purchase-meta select{width:100%;min-width:0;min-height:36px;max-width:none!important;margin:0!important}.hap-item-purchase-meta-row+tr.hap-item-row td{border-top:1px solid #e2ebe7!important}@media(max-width:782px){.hap-self-purchase-meta{position:sticky;left:6px;width:calc(100dvw - 32px);max-width:calc(100dvw - 32px);grid-template-columns:minmax(0,44fr) minmax(0,56fr);gap:7px;padding:8px}.hap-self-purchase-meta label{font-size:10px}.hap-self-purchase-meta input,.hap-self-purchase-meta select{padding-right:7px!important;padding-left:7px!important}.hap-self-purchase-receipt-field{grid-column:1/-1}.hap-item-purchase-meta-row>td{padding:0 6px 8px!important}} /* Mobile waiting-board controls: large tap targets and deterministic one-card scrolling. */ .hap-waiting-row{scroll-behavior:auto} .hap-waiting-controls button{touch-action:manipulation} @media(max-width:782px){.hap-waiting-controls:not([hidden]){display:flex!important}.hap-waiting-controls button{width:36px;height:36px;border-radius:10px;font-size:24px}.hap-waiting-controls small{min-width:50px;font-size:10px}} /* 0.17.87: dashboard charts, report layout and shared Excel action. */ .hap-revenue-chart-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px}.hap-revenue-chart-actions select,.hap-revenue-chart-actions input{width:auto;min-width:104px;min-height:36px;margin:0;border:1px solid #d6e0eb;border-radius:10px;background:#fff;font-size:12px}.hap-revenue-chart-panel.is-loading{opacity:.62;pointer-events:none}.hap-revenue-chart-panel .hap-modern-chart{grid-template-columns:repeat(7,minmax(24px,1fr));overflow-x:auto}.hap-revenue-chart-panel .hap-modern-chart .bar-wrap{min-width:24px}.hap-month-revenue-chart{grid-template-columns:repeat(5,minmax(46px,1fr));overflow:visible}.hap-month-revenue-chart .bar-wrap{min-width:46px} .hap-employee-revenue-chart .hap-modern-chart{grid-template-columns:repeat(7,minmax(24px,1fr));overflow-x:auto}.hap-telegram-replies-table{min-width:920px;table-layout:auto}.hap-telegram-replies-table th:nth-child(1),.hap-telegram-replies-table td:nth-child(1){width:145px;min-width:145px;white-space:nowrap}.hap-telegram-replies-table th:nth-child(2),.hap-telegram-replies-table td:nth-child(2){width:190px;min-width:190px}.hap-telegram-replies-table th:nth-child(3),.hap-telegram-replies-table td:nth-child(3){width:175px;min-width:175px;white-space:nowrap}.hap-telegram-replies-table th:nth-child(4),.hap-telegram-replies-table td:nth-child(4){width:135px;min-width:135px;white-space:nowrap} .hap-report-page-head,.hap-report-detail-head{display:flex;align-items:center;justify-content:space-between;gap:14px}.hap-report-page-head h1,.hap-report-detail-head h2{margin:0}.hap-report-filter-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.hap-report-detail-head{margin:0 0 16px}.hap-report-detail-head form{display:flex;align-items:center;gap:8px;min-width:min(440px,100%)}.hap-report-detail-head input[type="text"],.hap-report-detail-head input:not([type]){flex:1;min-width:0}.hap-admin-report-page>.hap-card{max-width:none;border-radius:14px}.hap-excel-button{display:inline-flex!important;align-items:center;justify-content:center;gap:7px!important}.hap-excel-button::before{content:"X";display:grid;place-items:center;flex:0 0 18px;width:18px;height:18px;border-radius:3px;background:#197447;color:#fff;font:800 11px/1 Arial,sans-serif;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)} @media(max-width:782px){.hap-revenue-chart-actions{justify-content:flex-start}.hap-revenue-chart-panel .panel-head{align-items:flex-start}.hap-report-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.hap-report-page-head,.hap-report-detail-head{align-items:stretch}.hap-report-detail-head{display:grid}.hap-report-detail-head form{width:100%;min-width:0}.hap-report-detail-head form input{min-width:0}.hap-admin-report-page>.hap-card{padding:14px}} @media(max-width:480px){.hap-report-page-head{align-items:center}.hap-report-page-head .button{padding-left:9px;padding-right:9px}.hap-revenue-chart-actions select,.hap-revenue-chart-actions input{min-width:0;max-width:118px}} .hap-telegram-assignment-link{display:inline-flex;align-items:center;gap:5px;color:#176fd1;font-weight:850;text-decoration:none}.hap-telegram-assignment-link::before{content:"▤";font-size:12px}.hap-telegram-assignment-link:hover{color:#0d4f9d;text-decoration:underline} /* Assignment request/note/photo share one balanced row on desktop. */ #hap-assignment-form .hap-request-note-grid>.hap-assignment-text-photo-grid{grid-column:1/-1!important;min-width:0} #hap-assignment-form .hap-assignment-text-photo-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.9fr) minmax(175px,.8fr);gap:12px;align-items:stretch} #hap-assignment-form .hap-assignment-text-photo-grid>.field{min-width:0} #hap-assignment-form .hap-assignment-text-photo-grid textarea{box-sizing:border-box;width:100%;height:104px;min-height:104px} .hap-assignment-photo-field{min-width:0} .hap-assignment-photo-drop{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;min-height:104px;padding:9px;border:1px dashed #a8c8c2;border-radius:11px;background:#f5faf8;text-align:center;cursor:pointer} .hap-assignment-photo-drop:focus{outline:2px solid #2875d4;outline-offset:2px} .hap-assignment-photo-drop img{display:block;max-width:100%;max-height:76px;object-fit:contain;border-radius:5px} .hap-assignment-photo-drop img[hidden],.hap-assignment-photo-drop [hidden]{display:none!important} .hap-assignment-photo-drop span{color:#3b625a;font-size:11px;line-height:1.35} .hap-assignment-photo-field .field-help,.hap-assignment-photo-field .description{display:block;margin-top:5px;font-size:10px;line-height:1.4} @media(max-width:900px){#hap-assignment-form .hap-assignment-text-photo-grid{grid-template-columns:minmax(0,1.12fr) minmax(0,.9fr)}#hap-assignment-form .hap-assignment-photo-field{grid-column:1/-1}} @media(max-width:600px){#hap-assignment-form .hap-assignment-text-photo-grid{grid-template-columns:1fr;gap:10px}#hap-assignment-form .hap-assignment-photo-field{grid-column:auto}#hap-assignment-form .hap-assignment-text-photo-grid textarea{height:92px;min-height:92px}} /* Three outcome controls stay compact and on one row on phones. */ @media(max-width:700px){.hap-assignment-outcome-flags{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.hap-assignment-outcome-flags .check-line{min-height:44px;padding:7px 6px;border-radius:10px;align-items:center;gap:5px}.hap-assignment-outcome-flags .check-line input{width:15px!important;height:15px!important;flex:0 0 15px}.hap-assignment-outcome-flags .check-line strong{font-size:10px;line-height:1.2}.hap-assignment-outcome-flags .check-line small{display:none}} .hap-wm-customer-readonly .page-title-action,.hap-wm-customer-readonly .hap-customer-row-actions a:not(.button-primary),.hap-wm-customer-readonly .hap-customer-history-head-actions form,.hap-wm-customer-readonly .hap-customer-history-head-actions a[href*="hap-wm-vat-batches"],.hap-wm-customer-readonly .hap-history-delete,.hap-wm-customer-readonly a[href*="action=edit"]{display:none!important} /* Customer list: compact activity state, work count and icon-only record actions. */ .hap-customer-state-dot,.hap-partner-state-dot{display:inline-block;width:12px;height:12px;border-radius:50%;vertical-align:middle;background:#1dbd69;box-shadow:0 0 0 4px rgba(29,189,105,.13),0 0 12px rgba(29,189,105,.72)} .hap-customer-state-dot.inactive,.hap-partner-state-dot.inactive{background:#343a40;box-shadow:0 0 0 4px rgba(52,58,64,.12)} .hap-customer-work-count{display:inline;color:#1d2327;font-size:13px;font-weight:700;line-height:1;background:transparent;box-shadow:none} .hap-icon-action{display:inline-grid;width:34px;height:34px;place-items:center;border:1px solid #cbdcd6;border-radius:9px;background:#fff;color:#176b52;font-size:18px;line-height:1;text-decoration:none;transition:transform .16s ease,background .16s ease,border-color .16s ease}.hap-icon-action:hover{border-color:#176b52;background:#edf8f3;color:#0d553f;transform:translateY(-1px)} .hap-icon-action-danger{border-color:#f2caca;color:#bd3a38}.hap-icon-action-danger:hover{border-color:#d65a55;background:#fff4f3;color:#a42423} /* v0.17.129: Five financial totals stay balanced on desktop. */ @media(min-width:783px){ .hap-custom-summary{grid-template-columns:repeat(5,minmax(0,1fr));align-items:stretch;gap:12px} .hap-custom-summary article{display:flex;min-height:118px;box-sizing:border-box;flex-direction:column;justify-content:center;padding:16px;border:1px solid #dfe7f3;border-radius:15px;box-shadow:0 7px 18px rgba(25,45,82,.055)} .hap-custom-summary article:nth-child(1){border-color:#cbdafa;background:#f2f6ff}.hap-custom-summary article:nth-child(1) strong{color:#2859c7} .hap-custom-summary article:nth-child(2){border-color:#d8d1f0;background:#f7f5ff}.hap-custom-summary article:nth-child(2) strong{color:#6953b8} .hap-custom-summary article:nth-child(3){border-color:#f1d9a8;background:#fff9ea}.hap-custom-summary article:nth-child(3) strong{color:#c27708} .hap-custom-summary article:nth-child(4){border-color:#c7e2d4;background:#f1faf5}.hap-custom-summary article:nth-child(4) strong{color:#18724e} .hap-custom-summary article:nth-child(5){border-color:#f1c9cb;background:#fff3f3}.hap-custom-summary article:nth-child(5) strong{color:#c4383b} .hap-custom-summary span{font-weight:800}.hap-custom-summary strong{font-size:20px}.hap-custom-summary small{margin-top:7px} }/* v0.17.130: customer chart tooltips, clearer KPI cards, and employee portal search. */ .hap-cust-x-labels span{cursor:help} .hap-cust-x-labels span:hover{color:#1d4ed8;font-weight:900;transform:translateX(-50%) translateY(-1px)} .hap-cust-pill{min-height:58px;padding:13px 7px;display:flex;flex-direction:column;justify-content:center} .hap-cust-pill b{font-size:23px} .hap-portal-global-search{position:relative;overflow:visible!important} .hap-portal-search-results{position:absolute;z-index:1000;top:calc(100% + 8px);left:0;width:min(390px,calc(100vw - 30px));max-height:360px;overflow:auto;padding:6px;border:1px solid #d9e3f3;border-radius:13px;background:#fff;box-shadow:0 14px 34px rgba(23,42,72,.18)} .hap-portal-search-results[hidden]{display:none} .hap-portal-search-item{display:block;padding:10px 11px;border-radius:9px;color:#172b4d;text-decoration:none;font-size:12px;line-height:1.35} .hap-portal-search-item:hover{background:#eef4ff;color:#1d4ed8} .hap-portal-search-empty{padding:11px;color:#718096;font-size:12px} .hap-customer-history-items{display:block;margin-top:4px;color:#718096;font-size:11px;line-height:1.35} @media(min-width:783px){.hap-admin-employee-chart .hap-modern-chart{grid-template-columns:repeat(15,minmax(24px,1fr));overflow-x:auto}.hap-admin-employee-chart .bar-wrap{min-width:30px}}/* v0.17.131: balanced employee overview layout. */ .hap-admin-employee-overview{display:grid;grid-template-columns:minmax(0,1.28fr) minmax(360px,.92fr);gap:16px;align-items:stretch;margin:16px 0} .hap-admin-employee-overview>.hap-employee-revenue-chart{grid-column:1;grid-row:1;margin:0;height:100%;box-sizing:border-box} .hap-admin-employee-overview>.hap-admin-employee-statistics{grid-column:2;grid-row:1;margin:0;height:100%;box-sizing:border-box} .hap-admin-employee-overview .hap-employee-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));height:calc(100% - 94px);box-sizing:border-box;align-content:center} .hap-admin-employee-overview .hap-employee-kpi-grid article,.hap-admin-employee-overview .hap-employee-kpi-grid>a{min-height:108px} .hap-admin-employee-overview .hap-employee-revenue-chart .chart{min-height:300px;height:calc(100% - 78px)} @media(max-width:1100px){.hap-admin-employee-overview{grid-template-columns:1fr}.hap-admin-employee-overview>.hap-employee-revenue-chart{grid-column:1;grid-row:2}.hap-admin-employee-overview>.hap-admin-employee-statistics{grid-column:1;grid-row:1}} @media(max-width:700px){.hap-admin-employee-overview .hap-employee-kpi-grid{height:auto}.hap-admin-employee-overview .hap-employee-revenue-chart .chart{height:auto;min-height:230px}}/* v0.17.133: compact headings, balanced statistics cards, and visible chart hover data. */ .hap-admin-employee-stat-head h2{white-space:nowrap} .hap-admin-employee-stat-head{padding-bottom:14px} .hap-admin-employee-overview .hap-employee-kpi-grid{padding-top:12px;padding-bottom:14px;gap:10px} .hap-admin-employee-overview .hap-employee-kpi-grid article,.hap-admin-employee-overview .hap-employee-kpi-grid>a{min-height:92px;padding:13px} .hap-cust-x-labels span{cursor:help} .hap-cust-x-labels span:hover{color:#1d4ed8;font-weight:900} @media(max-width:700px){.hap-admin-employee-stat-head h2{white-space:normal}}/* v0.17.136: visible customer chart tooltip and non-overflowing employee filters. */ .hap-cust-line-chart{position:relative} .hap-cust-chart-tooltip{position:absolute;z-index:12;top:8px;left:50%;transform:translateX(-50%);padding:7px 11px;border-radius:9px;background:#172b4d;color:#fff;font-size:12px;font-weight:800;white-space:nowrap;box-shadow:0 8px 18px rgba(23,43,77,.22);pointer-events:none} .hap-cust-chart-tooltip[hidden]{display:none} .hap-admin-employee-stat-head{display:grid!important;grid-template-columns:1fr!important;gap:10px!important;align-items:start!important} .hap-admin-employee-stat-head h2{white-space:nowrap!important;line-height:1.1!important} .hap-admin-employee-stat-head form{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:8px;width:100%;box-sizing:border-box} .hap-admin-employee-stat-head form select,.hap-admin-employee-stat-head form input,.hap-admin-employee-stat-head form button{min-width:0;box-sizing:border-box} .hap-admin-employee-overview .hap-employee-kpi-grid{align-content:start!important;padding-top:10px!important;padding-bottom:10px!important} @media(max-width:700px){.hap-admin-employee-stat-head h2{white-space:normal!important}.hap-admin-employee-stat-head form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.hap-admin-employee-stat-head form button{width:100%}} /* v0.17.138: employee detail statistics header stays inside the panel. */ .hap-admin-employee-statistics .hap-admin-employee-stat-head{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:10px!important;align-items:start!important;min-width:0!important;overflow:hidden!important} .hap-admin-employee-statistics .hap-admin-employee-stat-head>div{min-width:0!important} .hap-admin-employee-statistics .hap-admin-employee-stat-head h2{margin:0!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;line-height:1.15!important} .hap-admin-employee-statistics .hap-admin-employee-period-form{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:8px!important;width:100%!important;max-width:100%!important;min-width:0!important;margin:0!important;align-items:stretch!important} .hap-admin-employee-statistics .hap-admin-employee-period-form select,.hap-admin-employee-statistics .hap-admin-employee-period-form input,.hap-admin-employee-statistics .hap-admin-employee-period-form button{width:100%!important;min-width:0!important;max-width:100%!important;box-sizing:border-box!important;margin:0!important} @media(max-width:1100px){.hap-admin-employee-statistics .hap-admin-employee-period-form{grid-template-columns:repeat(2,minmax(0,1fr))!important}.hap-admin-employee-statistics .hap-admin-employee-period-form button{grid-column:span 2!important}} @media(max-width:700px){.hap-admin-employee-statistics .hap-admin-employee-stat-head{padding:16px!important}.hap-admin-employee-statistics .hap-admin-employee-stat-head h2{white-space:normal!important;font-size:19px!important}.hap-admin-employee-statistics .hap-admin-employee-period-form{grid-template-columns:repeat(2,minmax(0,1fr))!important}.hap-admin-employee-statistics .hap-admin-employee-period-form button{grid-column:span 2!important}} /* v0.17.142: fill both employee insight panels and truly compact secondary-page headers. */ .hap-employee-insights>.panel{height:100%;min-height:326px;box-sizing:border-box} .hap-employee-insights>.hap-employee-revenue-chart{margin-top:0} /* v0.17.147: keep employee-profile filters compact and prevent the 15-day * revenue chart from wrapping into awkward rows on narrow screens. */ body.hap-wm-admin-app .hap-employee-work-filter .hap-field input, body.hap-wm-admin-app .hap-employee-work-filter .hap-field select, body.hap-wm-admin-app .hap-employee-work-filter > .hap-filter-actions .button { height: 42px; min-height: 42px; box-sizing: border-box; margin: 0; } body.hap-wm-admin-app .hap-employee-work-filter > .hap-filter-actions .button { display: inline-flex; align-items: center; justify-content: center; line-height: 1; text-decoration: none; } @media (min-width: 781px) { body.hap-wm-admin-app .hap-employee-work-filter { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: flex-end; gap: 10px; overflow: visible; } body.hap-wm-admin-app .hap-employee-work-filter .hap-employee-filter-grid { min-width: 0; grid-template-columns: repeat(4, minmax(96px, 1fr)) minmax(210px, 1.55fr); gap: 9px; } body.hap-wm-admin-app .hap-employee-work-filter > .hap-filter-actions { flex: 0 0 auto; margin: 0; gap: 6px; } body.hap-wm-admin-app .hap-employee-work-filter > .hap-filter-actions .button { padding: 0 10px; white-space: nowrap; } } /* v0.17.149: unclipped employee filters, compact directory details and * clickable work rows without a redundant action column. */ .hap-employee-work-filter { max-width:100%; box-sizing:border-box; } body.hap-wm-admin-app .hap-employee-work-filter .hap-field, body.hap-wm-admin-app .hap-employee-work-filter .hap-field label { min-width: 0; overflow: visible; } body.hap-wm-admin-app .hap-employee-work-filter .hap-field label { display: block; margin-bottom: 6px; line-height: 1.25; white-space: normal; } body.hap-wm-admin-app .hap-employee-work-filter .hap-field input, body.hap-wm-admin-app .hap-employee-work-filter .hap-field select { width: 100%; min-width: 0; } .hap-employee-work-list .hap-clickable-row:hover td { background:#f1f7ff!important; } .hap-employee-work-list .hap-clickable-row:focus { outline:2px solid #2d68ee; outline-offset:-2px; } .hap-employee-work-list .hap-row-open-code { color:#1f5fd2; } .hap-employee-status-quick-form { display:inline-flex; width:auto; margin:0; } .hap-employee-status-quick { width:auto; min-width:116px; max-width:132px; height:32px; margin:0; padding:0 27px 0 10px; border-radius:999px; font-size:11px; font-weight:800; line-height:30px; box-sizing:border-box; box-shadow:0 2px 8px rgba(24,55,103,.07); cursor:pointer; } .hap-employee-status-quick.employment-status-official { border-color:#93dfbd; background:#effbf5; color:#12734d; } .hap-employee-status-quick.employment-status-probation { border-color:#f0ca75; background:#fff9e9; color:#9b6300; } .hap-employee-status-quick.employment-status-inactive { border-color:#efa4a4; background:#fff1f1; color:#b72d2d; } .hap-employee-status-quick.input-access-enabled { border-color:#93dfbd; background:#effbf5; color:#12734d; } .hap-employee-status-quick.input-access-disabled { border-color:#efa4a4; background:#fff1f1; color:#b72d2d; } .hap-employee-status-quick.input-access-enabled, .hap-employee-status-quick.input-access-disabled { min-width:82px; max-width:88px; } .hap-employee-status-quick:focus { border-color:#2d68ee; box-shadow:0 0 0 3px rgba(45,104,238,.14); outline:0; } .hap-employee-row-actions>a.button-primary { font-size:12px; } .hap-employee-row-actions>a.button-primary:after { content:none; display:none; } .hap-employee-directory-table th:nth-child(1){min-width:88px} .hap-employee-directory-table th:nth-child(2){min-width:165px} .hap-employee-directory-table th:nth-child(3){min-width:120px} .hap-employee-directory-table th:nth-child(4){min-width:125px} .hap-employee-directory-table th:nth-child(5){min-width:150px} .hap-employee-directory-table th:nth-child(6){min-width:124px} .hap-employee-directory-table th:nth-child(8){min-width:92px} .hap-employee-directory-table td:nth-child(6), .hap-employee-directory-table td:nth-child(8){white-space:nowrap} @media (min-width: 781px) and (max-width: 1220px) { body.hap-wm-admin-app .hap-employee-work-filter { grid-template-columns: minmax(0, 1fr); } body.hap-wm-admin-app .hap-employee-work-filter > .hap-filter-actions { justify-content: flex-end; } } @media (max-width: 780px) { body.hap-wm-admin-app .hap-employee-work-filter { width:100%; max-width:100%; box-sizing:border-box; overflow:visible; } body.hap-wm-admin-app .hap-employee-work-filter .hap-employee-filter-grid { display:grid!important; width:100%; max-width:100%; min-width:0!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; } body.hap-wm-admin-app .hap-employee-work-filter .hap-employee-work-search { grid-column:1/-1!important; } body.hap-wm-admin-app .hap-employee-work-filter { gap: 9px; } body.hap-wm-admin-app .hap-employee-work-filter > .hap-filter-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 6px; margin-top: 0; } body.hap-wm-admin-app .hap-employee-work-filter > .hap-filter-actions .button, body.hap-wm-admin-app .hap-employee-work-filter > .hap-filter-actions > a { min-width: 0; padding: 0 5px; font-size: 11px; white-space: nowrap; text-align: center; } body.hap-wm-admin-app .hap-admin-employee-chart .hap-modern-chart { grid-template-columns: repeat(15, minmax(30px, 1fr)); min-width: 540px; overflow-x: auto; } body.hap-wm-admin-app .hap-admin-employee-chart .hap-modern-chart .bar-wrap { min-width: 30px; } } @media (max-width: 1100px) { .hap-employee-work-filter .hap-employee-filter-grid { display:grid!important; width:100%; max-width:100%; min-width:0!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; } .hap-employee-work-filter .hap-employee-work-search { grid-column:1/-1!important; } } .hap-employee-insights>.hap-home-activity-panel .hap-activity-stats{flex:1;grid-template-rows:repeat(2,minmax(0,1fr));align-content:stretch;min-height:0} .hap-employee-insights>.hap-home-activity-panel .hap-activity-stats>a{height:100%;min-height:0;box-sizing:border-box} @media(min-width:783px){.hap-employee-list-page .main{padding-top:6px}.hap-employee-list-page .topbar{min-height:42px;margin-bottom:0}.hap-employee-list-page .page-head{margin-top:0;margin-bottom:12px}} @media(max-width:782px){.hap-employee-insights>.panel{height:auto;min-height:0}.hap-employee-insights>.hap-home-activity-panel .hap-activity-stats{grid-template-rows:auto}.hap-employee-insights>.hap-home-activity-panel .hap-activity-stats>a{height:auto;min-height:72px}.hap-employee-list-page .main{padding-top:6px}.hap-employee-list-page .topbar{min-height:46px;margin-bottom:4px}.hap-employee-list-page .page-head{margin-bottom:8px}} /* Searchable supplier picker: the input retains the original popup field size. */ .hap-item-supplier[hidden]{display:none!important}.hap-item-supplier-lookup{display:block;width:100%;min-width:0}.material-table .hap-item-supplier-search{display:block;width:100%!important;min-width:0;margin:0!important}.hap-item-supplier-results{position:fixed;z-index:100000;overflow:auto;padding:5px;border:1px solid #cbd9d5;border-radius:11px;background:#fff;box-shadow:0 16px 36px rgba(24,65,54,.2)}.hap-item-supplier-results button{display:grid;width:100%;gap:3px;padding:9px 10px;border:0;border-radius:8px;background:#fff;color:#17352d;text-align:left;cursor:pointer}.hap-item-supplier-results button:hover,.hap-item-supplier-results button:focus{outline:0;background:#eef6f3}.hap-item-supplier-results button strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hap-item-supplier-results button small{overflow:hidden;color:#72847f;font-size:10px;text-overflow:ellipsis;white-space:nowrap}.hap-item-supplier-results .empty{display:block;padding:11px;color:#72847f;font-size:11px} /* Employee work-card revenue: compact, red and readable without adding a new column. */ .assignment-revenue{display:block;color:#c52b24;font-size:12px;font-weight:900;line-height:1.2;white-space:nowrap}.assignment-revenue-regular{margin-top:1px;text-align:right}.assignment-featured-grid .assignment-card{position:relative}.assignment-featured-grid .assignment-revenue{position:absolute;top:12px;right:15px;z-index:2}.assignment-featured-grid .assignment-side{padding-top:22px} @media(max-width:680px){.assignment-featured-grid .assignment-revenue{top:10px;right:11px;font-size:11px}.assignment-featured-grid .assignment-side{padding-top:20px}.assignment-revenue-regular{text-align:left;font-size:11px}} /* Assignment material rows have one extra supplier column. Keep the technical * select hidden and reserve a proper column for the visible supplier search. */ .hap-assignment-items-table table{min-width:1080px!important} .hap-assignment-items-table th:nth-child(1){width:90px} .hap-assignment-items-table th:nth-child(2){width:205px} .hap-assignment-items-table th:nth-child(3){width:68px} .hap-assignment-items-table th:nth-child(4){width:90px} .hap-assignment-items-table th:nth-child(5){width:125px} .hap-assignment-items-table th:nth-child(6){width:145px} .hap-assignment-items-table th:nth-child(7){width:125px} .hap-assignment-items-table th:nth-child(8){width:115px} .hap-assignment-items-table th:nth-child(9){width:42px} .hap-assignment-supplier-select[hidden]{display:none!important} .hap-assignment-supplier-cell .hap-item-supplier-lookup{display:block;width:100%;min-width:0} .hap-assignment-supplier-cell .hap-assignment-supplier-search{display:block;width:100%!important;min-width:0;height:40px;margin:0!important;box-sizing:border-box} .hap-item-supplier-results{z-index:100350!important} /* Keep these overrides last: older dashboard rules above still support legacy pages. */ .hap-urgent-bar{display:block;width:100%;box-sizing:border-box} .hap-urgent-grid{display:grid;width:100%;min-width:0;grid-template-columns:repeat(7,minmax(0,1fr))} @media (max-width:1180px) and (min-width:783px){.hap-urgent-grid{grid-template-columns:repeat(4,minmax(0,1fr))}} @media (max-width:782px){ .hap-urgent-bar{display:block;width:100%;padding:9px} .hap-urgent-grid{display:grid;width:100%;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px} .hap-urgent-grid .overdue{grid-column:1/-1;width:100%} .hap-urgent-grid>a{width:100%;min-width:0} } /* 0.17.220: source markers, linked reconciliation totals and month controls. */ .hap-self-code,.hap-self-code:visited,.hap-row-open-code.hap-self-code{color:#b70000!important} .hap-work-source.self_created{color:#d50303!important;background:#efeeee!important} .hap-reconciliation-kpis article{position:relative;min-height:96px;box-sizing:border-box;overflow:hidden;transition:transform .18s,border-color .18s,box-shadow .18s} .hap-reconciliation-kpis article>a{display:flex;flex-direction:column;justify-content:center;box-sizing:border-box;min-height:64px;height:100%;text-decoration:none;color:inherit} .hap-reconciliation-kpis article>a:focus-visible{outline:2px solid #2271b1;outline-offset:3px} .hap-reconciliation-kpis article:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(24,62,52,.12)} .hap-reconciliation-kpis article::after{content:"";position:absolute;right:-19px;top:-24px;width:72px;height:72px;border-radius:50%;background:currentColor;opacity:.08;pointer-events:none} .hap-reconciliation-kpis article small{display:block;margin-top:4px;color:inherit;font-size:9px;font-weight:750;opacity:.65} .hap-reconciliation-kpis article.total{color:#215f9c;background:linear-gradient(145deg,#eaf4ff,#fff);border-color:#b9d7f2} .hap-reconciliation-kpis article.ok{color:#087553;background:linear-gradient(145deg,#e6f8f0,#fff);border-color:#a8d9c7} .hap-reconciliation-kpis article.warn{color:#a76308;background:linear-gradient(145deg,#fff3d7,#fff);border-color:#efd091} .hap-reconciliation-kpis article.self{color:#7650a4;background:linear-gradient(145deg,#f3eaff,#fff);border-color:#d4bce9} .hap-reconciliation-kpis article.admin-created{color:#08768b;background:linear-gradient(145deg,#e5f8fb,#fff);border-color:#a9dce5} .hap-reconciliation-kpis article.danger{color:#bb3229;background:linear-gradient(145deg,#ffe8e5,#fff);border-color:#efb0aa} .hap-reconciliation-kpis article.cancelled{color:#8c4d49;background:linear-gradient(145deg,#f4eceb,#fff);border-color:#d9c0bd} .hap-reconciliation-kpis article.checked{color:#385fab;background:linear-gradient(145deg,#e9f0ff,#fff);border-color:#b8c9ef} .hap-reconciliation-kpis article.is-active{border-width:2px;box-shadow:0 0 0 3px rgba(34,113,177,.10),0 8px 20px rgba(24,62,52,.11)} .hap-reconciliation-kpis article strong{color:inherit} .hap-month-picker{position:relative;display:inline-flex;align-items:center;min-width:100px} .hap-month-picker>.button{width:100%;height:42px;margin:0;white-space:nowrap} .hap-month-picker input[type=month]{position:absolute;left:0;bottom:0;width:1px!important;height:1px!important;min-height:0!important;padding:0!important;border:0!important;opacity:0;pointer-events:none} .hap-work-month-actions>div{display:grid;grid-template-columns:minmax(100px,1fr) auto;gap:6px;align-items:stretch;height:42px} .hap-work-month-actions>div>.button{height:42px;margin:0} body.hap-wm-admin-app .hap-employee-work-filter{display:block!important} body.hap-wm-admin-app .hap-employee-work-filter .hap-employee-filter-grid{grid-template-columns:minmax(92px,.68fr) minmax(92px,.68fr) minmax(142px,.95fr) minmax(112px,.82fr) minmax(112px,.82fr) minmax(175px,1.35fr) minmax(96px,.64fr)!important;gap:9px;align-items:end} .hap-employee-work-filter .hap-field{display:flex;flex-direction:column;justify-content:flex-end;min-width:0;height:66px;margin:0} .hap-employee-work-filter .hap-field>label:first-child{display:flex;align-items:flex-end;min-height:16px;margin:0 0 7px;line-height:1} .hap-employee-work-filter .hap-field>input,.hap-employee-work-filter .hap-field>select{box-sizing:border-box;width:100%;height:42px;min-height:42px;margin:0} .hap-employee-work-filter .hap-work-filter-submit{align-self:end;height:42px;margin:0} .hap-employee-work-filter .hap-work-filter-submit .button{width:100%;height:42px;margin:0} @media(min-width:781px){body.hap-wm-admin-app .hap-employee-work-filter .hap-employee-filter-grid{display:grid!important;width:100%!important;grid-template-columns:minmax(92px,.68fr) minmax(92px,.68fr) minmax(142px,.95fr) minmax(112px,.82fr) minmax(112px,.82fr) minmax(175px,1.35fr) minmax(96px,.64fr)!important}body.hap-wm-admin-app .hap-employee-work-filter .hap-employee-work-search{grid-column:auto!important}body.hap-wm-admin-app .hap-employee-work-filter .hap-work-filter-submit{grid-column:auto!important}} @media(max-width:780px){body.hap-wm-admin-app .hap-employee-work-filter{padding:12px!important}body.hap-wm-admin-app .hap-employee-work-filter .hap-employee-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px}.hap-employee-work-filter .hap-field{height:auto}.hap-employee-work-filter .hap-field:nth-child(1){order:1}.hap-employee-work-filter .hap-field:nth-child(2){order:2}.hap-employee-work-filter .hap-field:nth-child(4){order:3}.hap-employee-work-filter .hap-field:nth-child(5){order:4}.hap-employee-work-filter .hap-work-month-actions{order:5;grid-column:1/-1}.hap-employee-work-filter .hap-employee-work-search{order:6;grid-column:1/-1!important}.hap-employee-work-filter .hap-work-filter-submit{order:7;grid-column:1/-1}.hap-work-month-actions>div{grid-template-columns:1fr 1fr}.hap-reconciliation-kpis article{min-height:88px;padding:12px}.hap-reconciliation-kpis article strong{font-size:22px}} /* Shared desktop popup controls. They only change the visual frame; form state * and submission behavior remain owned by each existing popup. */ @media (min-width:783px) and (pointer:fine) { .hap-popup-adjustable { box-sizing:border-box; } .hap-popup-adjustable:not(.modal) { position:relative; } .hap-popup-adjustable.hap-popup-adjusted { position:fixed!important; right:auto!important; bottom:auto!important; margin:0!important; transform:none!important; max-width:calc(100vw - 16px)!important; max-height:calc(100vh - 16px)!important; } .hap-popup-adjustable:not(.modal).hap-popup-adjusted { overflow:auto; } .hap-popup-drag-handle { position:absolute; top:5px; left:50%; z-index:100; width:54px; height:18px; border:0; padding:0; background:transparent; cursor:grab; transform:translateX(-50%); touch-action:none; } .hap-popup-drag-handle::before { content:""; position:absolute; top:5px; left:50%; width:34px; height:5px; border-radius:999px; background:#aab8b4; box-shadow:0 1px 2px rgba(14,44,37,.18); transform:translateX(-50%); } .hap-popup-drag-handle:hover::before { background:#55766d; } .hap-popup-drag-handle:active { cursor:grabbing; } .hap-popup-resize-handle { position:absolute; right:3px; bottom:3px; z-index:101; width:24px; height:24px; padding:0; border:0; background:transparent; cursor:nwse-resize; touch-action:none; } .hap-popup-resize-handle::before { content:""; position:absolute; right:4px; bottom:4px; width:11px; height:11px; border-right:3px solid #6e8982; border-bottom:3px solid #6e8982; border-radius:0 0 4px; } } @media (max-width:782px), (pointer:coarse) { .hap-popup-drag-handle,.hap-popup-resize-handle { display:none!important; } } /* Immediate visual feedback while a server-rendered popup is opening. */ body.hap-popup-page-loading::before { content:""; position:fixed; inset:0; z-index:1000900; background:rgba(14,35,31,.18); backdrop-filter:blur(1px); pointer-events:all; } body.hap-popup-page-loading::after { content:"Đang mở…"; position:fixed; top:50%; left:50%; z-index:1000901; min-width:112px; padding:13px 18px 13px 44px; border:1px solid rgba(255,255,255,.82); border-radius:14px; background:#fff radial-gradient(circle at 24px 50%,transparent 7px,#2367ee 8px 10px,transparent 11px); color:#173f38; box-shadow:0 16px 44px rgba(10,38,31,.24); font-size:13px; font-weight:850; transform:translate(-50%,-50%); } /* Lightweight popup documents retain the normal styles without dashboard geometry. */ .hap-popup-host { position:fixed!important; inset:0!important; z-index:2147483000!important; background:rgba(19,30,45,.48); display:flex; align-items:center; justify-content:center; padding:0; } .hap-popup-host iframe { display:block; width:100%; height:100%; border:0; background:#f2f4f8; } .hap-popup-host [hidden] { display:none!important; } .hap-popup-loading { background:#fff; color:#182536; border-radius:14px; padding:22px; box-shadow:0 12px 40px #0003; } .hap-popup-loading button,.hap-popup-loading a { margin-left:14px; } html.hap-popup-frame,html.hap-popup-frame body { margin:0!important; padding:0!important; min-width:0!important; width:100%!important; height:100%!important; overflow:hidden!important; background:#f2f4f8!important; } html.hap-popup-frame #adminmenumain,html.hap-popup-frame #wpadminbar,html.hap-popup-frame #wpfooter,html.hap-popup-frame .hap-app-sidebar,html.hap-popup-frame .hap-app-topbar { display:none!important; } html.hap-popup-frame #wpcontent,html.hap-popup-frame #wpbody,html.hap-popup-frame #wpbody-content,html.hap-popup-frame #hap-system-content { margin:0!important; padding:0!important; min-width:0!important; } html.hap-popup-frame .overlay.open { position:fixed!important; inset:0!important; background:#f2f4f8!important; opacity:1!important; } html.hap-popup-frame .modal.open { position:fixed!important; left:50%!important; top:50%!important; right:auto!important; bottom:auto!important; transform:translate(-50%,-50%)!important; width:calc(100% - 32px)!important; max-width:1180px!important; min-width:0!important; height:calc(100% - 32px)!important; max-height:calc(100% - 32px)!important; margin:0!important; display:flex!important; flex-direction:column!important; box-sizing:border-box!important; background:#fff!important; overflow:hidden!important; } html.hap-popup-frame .modal.open > .modal-head { flex:0 0 auto; } html.hap-popup-frame .modal.open > .modal-body { flex:1 1 auto; min-height:0!important; overflow:auto!important; overscroll-behavior:contain; } html.hap-popup-frame .modal.open .modal-actions { margin-left:0!important; margin-right:0!important; max-width:100%; box-sizing:border-box; } html.hap-popup-frame .modal.open .modal-actions{padding-bottom:max(12px,env(safe-area-inset-bottom))} @media(max-width:767px){html.hap-popup-frame .modal.open .hap-fixed-form-actions{left:0;right:0;bottom:0!important;width:100%}} /* Employee edit/create footer matches Admin: three compact actions at the right. */ .hap-employee-ticket .hap-ticket-form-actions{display:flex;flex-wrap:nowrap;justify-content:flex-end;gap:8px} .hap-employee-ticket .hap-ticket-form-actions>.btn{flex:0 0 auto;width:auto;min-width:96px;margin:0} /* On phones retain the original two-above, completion-below layout. */ @media(max-width:767px){ .hap-employee-ticket .hap-ticket-form-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;justify-content:stretch} .hap-employee-ticket .hap-ticket-form-actions>.btn{width:100%;min-width:0;margin:0} .hap-employee-ticket .hap-ticket-form-actions>.btn:last-child{grid-column:1/-1} } html.hap-popup-frame .hap-popup-drag-handle,html.hap-popup-frame .hap-popup-resize-handle { display:none!important; } @media(max-width:767px) { html.hap-popup-frame .modal.open { inset:0!important; transform:none!important; width:100%!important; max-width:100%!important; height:100%!important; max-height:100%!important; border-radius:0!important; } html.hap-popup-frame .modal.open > .modal-body { padding:12px!important; padding-bottom:calc(145px + env(safe-area-inset-bottom))!important; } } /* Employee ticket: compact mobile pairs; all form names and calculations stay unchanged. */ @media(max-width:767px) { :is(.hap-employee-ticket,.hap-admin-ticket) .assignment-brief-head { display:flex!important; flex-direction:row!important; flex-wrap:wrap; align-items:center; gap:8px; } :is(.hap-employee-ticket,.hap-admin-ticket) .assignment-brief-head > strong { flex:1 1 0; width:auto!important; min-width:0; font-size:14px; } :is(.hap-employee-ticket,.hap-admin-ticket) .assignment-brief-head > .hap-order-head-revenue { margin:0 0 0 auto!important; flex:0 0 auto; width:auto!important; max-width:48%; padding:6px 8px; } :is(.hap-employee-ticket,.hap-admin-ticket) .assignment-brief-head .hap-order-head-revenue small { font-size:8px; } :is(.hap-employee-ticket,.hap-admin-ticket) .assignment-brief-head .hap-order-head-revenue i { display:none; } :is(.hap-employee-ticket,.hap-admin-ticket) .assignment-brief-head .hap-order-head-revenue b { font-size:13px; white-space:normal; overflow-wrap:anywhere; } :is(.hap-employee-ticket,.hap-admin-ticket) .assignment-brief .readonly-grid, :is(.hap-employee-ticket,.hap-admin-ticket) .hap-work-staff-grid, :is(.hap-employee-ticket,.hap-admin-ticket) .hap-role-fees, :is(.hap-employee-ticket,.hap-admin-ticket) .hap-work-total-grid { display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:10px!important; } :is(.hap-employee-ticket,.hap-admin-ticket) .readonly-item,:is(.hap-employee-ticket,.hap-admin-ticket) .field { min-width:0; } :is(.hap-employee-ticket,.hap-admin-ticket) .readonly-item strong { overflow-wrap:anywhere; } :is(.hap-employee-ticket,.hap-admin-ticket) .hap-assignment-address,:is(.hap-employee-ticket,.hap-admin-ticket) .hap-assignment-request, :is(.hap-employee-ticket,.hap-admin-ticket) .readonly-item.full,:is(.hap-employee-ticket,.hap-admin-ticket) .field.full,:is(.hap-employee-ticket,.hap-admin-ticket) .fee-note { grid-column:1/-1!important; } :is(.hap-employee-ticket,.hap-admin-ticket) .hap-work-staff-grid > .field:not(.full), :is(.hap-employee-ticket,.hap-admin-ticket) .hap-role-fees > .field:not(.full), :is(.hap-employee-ticket,.hap-admin-ticket) .hap-work-total-grid > .field:not(.full) { grid-column:auto!important; width:auto!important; } :is(.hap-employee-ticket,.hap-admin-ticket) input,:is(.hap-employee-ticket,.hap-admin-ticket) select { min-width:0!important; max-width:100%; box-sizing:border-box; } :is(.hap-employee-ticket,.hap-admin-ticket) .hap-grab-row { display:grid!important; grid-template-columns:minmax(0,1fr) minmax(0,1fr) 26px!important; gap:8px; align-items:end; } :is(.hap-employee-ticket,.hap-admin-ticket) .hap-grab-row > .field { width:auto!important; grid-column:auto!important; } :is(.hap-employee-ticket,.hap-admin-ticket) .hap-grab-row .remove-line { width:26px; min-width:0; margin:0; } .hap-home-job-pages { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; } .hap-home-job-pages a,.hap-home-job-pages span { min-width:32px!important; padding:8px!important; } } /* 0.17.240: code stays above income/status badges on employee mobile. */ @media(max-width:767px) { .hap-employee-ticket .assignment-brief-head.hap-ticket-code-head > strong { flex:0 0 100%!important; width:100%!important; overflow-wrap:anywhere; } .hap-employee-ticket .hap-ticket-code-head > .hap-order-head-revenue { margin-left:0!important; } .hap-employee-ticket .hap-ticket-code-head .hap-view-statuses { flex-wrap:wrap; min-width:0; } .hap-employee-ticket .hap-edit-remaining { display:none; } .hap-employee-ticket .hap-assignment-customer-update > .form-grid, .hap-admin-ticket .hap-admin-assignment-meta, .hap-admin-ticket .hap-admin-assignment-fields { display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:10px!important; } .hap-employee-ticket .hap-assignment-customer-update > .form-grid > .field { grid-column:auto!important; min-width:0; } :is(.hap-employee-ticket,.hap-admin-ticket) .hap-work-staff-grid > .field:nth-child(3) { grid-column:1/-1!important; } .hap-admin-ticket .hap-admin-assignment-fields > .field { grid-column:1/-1!important; min-width:0; } .hap-admin-ticket .hap-admin-assignment-fields > .field:nth-child(2), .hap-admin-ticket .hap-admin-assignment-fields > .field:nth-child(3) { grid-column:auto!important; } } /* 0.17.241: the top document owns safe-area spacing; iframe has its own viewport. */ @media(max-width:767px) { .hap-popup-host { box-sizing:border-box!important; padding:var(--hap-safe-top,env(safe-area-inset-top,0px)) var(--hap-safe-right,env(safe-area-inset-right,0px)) var(--hap-safe-bottom,env(safe-area-inset-bottom,0px)) var(--hap-safe-left,env(safe-area-inset-left,0px))!important; background:#f2f4f8; } .hap-popup-host iframe { flex:1 1 auto; min-height:0; min-width:0; } html:not(.hap-popup-frame) .modal.open > .modal-head { padding-top:calc(16px + var(--hap-safe-top,env(safe-area-inset-top,0px)))!important; padding-left:max(16px,env(safe-area-inset-left,0px))!important; padding-right:max(16px,env(safe-area-inset-right,0px))!important; } html.hap-popup-frame .modal.open > .modal-head { padding-top:16px!important; } :is(.hap-employee-ticket,.hap-admin-ticket) .readonly-item.hap-assignment-address, :is(.hap-employee-ticket,.hap-admin-ticket) .readonly-item.hap-assignment-request { height:auto!important; min-height:0!important; align-self:start; } :is(.hap-employee-ticket,.hap-admin-ticket) .assignment-brief .readonly-grid { grid-auto-rows:auto!important; align-items:start; } .hap-admin-ticket .customer-fields,#hap-assignment-form .customer-fields, #hap-assignment-form .hap-request-note-grid,#hap-assignment-form .hap-assignment-routing-grid { display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:10px!important; } .hap-admin-ticket .customer-fields > .field,#hap-assignment-form .customer-fields > .field { grid-column:1/-1!important; min-width:0; } .hap-admin-ticket .customer-fields > .field:nth-child(1),.hap-admin-ticket .customer-fields > .field:nth-child(2), #hap-assignment-form .customer-fields > .field:nth-child(1),#hap-assignment-form .customer-fields > .field:nth-child(2) { grid-column:auto!important; } #hap-assignment-form .hap-request-note-grid > .field { grid-column:1/-1!important; min-width:0; } #hap-assignment-form .hap-request-note-grid > .field:nth-child(1),#hap-assignment-form .hap-request-note-grid > .field:nth-child(2) { grid-column:auto!important; } #hap-assignment-form .hap-assignment-routing-grid > .field { grid-column:auto!important; min-width:0; } #hap-assignment-form input,#hap-assignment-form select,.hap-admin-ticket .customer-fields input { min-width:0!important; max-width:100%; box-sizing:border-box; } #hap-assignment-form .hap-assignment-stage-options { display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:6px!important; } #hap-assignment-form .hap-assignment-stage-options > label { min-width:0; width:auto!important; margin:0!important; padding:9px 6px!important; display:flex; flex-direction:column; align-items:flex-start; gap:6px; } #hap-assignment-form .hap-assignment-stage-options strong { font-size:11px; line-height:1.4; overflow-wrap:anywhere; } } /* 0.17.244: avoid stretched implicit grid tracks in employee mobile briefs. */ @media(max-width:767px) { .hap-employee-ticket .assignment-brief > .readonly-grid { display:flex!important; flex-wrap:wrap!important; flex-direction:row!important; align-content:flex-start!important; align-items:flex-start!important; justify-content:flex-start!important; gap:10px!important; height:auto!important; min-height:0!important; flex:0 0 auto!important; } .hap-employee-ticket .assignment-brief > .readonly-grid > .readonly-item { flex:0 0 calc((100% - 10px)/2)!important; width:calc((100% - 10px)/2)!important; box-sizing:border-box!important; height:auto!important; min-height:0!important; margin:0!important; align-self:flex-start!important; } .hap-employee-ticket .assignment-brief > .readonly-grid > :is(.full,.hap-assignment-address,.hap-assignment-request) { flex-basis:100%!important; width:100%!important; } } /* Employee salary statement: keep all five columns readable on small screens. */ .hap-employee-payroll .hap-employee-salary-scroll{margin:16px;overflow-x:auto;border-radius:12px;-webkit-overflow-scrolling:touch} .hap-employee-payroll .hap-employee-salary-table{width:100%;min-width:640px;table-layout:fixed} .hap-employee-salary-table th:nth-child(1){width:44px} .hap-employee-salary-table th:nth-child(2){width:19%} .hap-employee-salary-table th:nth-child(3){width:22%} .hap-employee-salary-table th:nth-child(5){width:150px} .hap-employee-payroll .hap-employee-salary-table th{background:#144b5d;color:#fff;font-size:11px;text-transform:uppercase;letter-spacing:.03em;padding:12px 10px} .hap-employee-payroll .hap-employee-salary-table td{padding:12px 10px;vertical-align:top;font-size:13px;line-height:1.5;overflow-wrap:anywhere} .hap-employee-salary-table th:first-child,.hap-employee-salary-table td:first-child{text-align:center} .hap-employee-salary-table td:last-child,.hap-employee-salary-table th:last-child{text-align:right;white-space:nowrap} .hap-employee-salary-table tbody tr:nth-child(even):not(.hap-net-row){background:#f6faf9} .hap-employee-salary-table small{display:block;margin-top:3px;color:#70857e;font-size:11px} .hap-employee-payroll .hap-employee-salary-table .hap-net-row td{background:#e6f4ec;padding:15px 12px;vertical-align:middle;font-weight:800} .hap-employee-payroll .hap-employee-salary-table .hap-net-row td:last-child{color:#08794e;font-size:20px} @media(max-width:680px){.hap-employee-payroll .hap-employee-salary-scroll{margin:12px 8px}.hap-employee-payroll .hap-employee-salary-table{min-width:640px}} .hap-received-label-short { display:none; } @media(max-width:767px) { .hap-employee-create-ticket .hap-phone-choice-row { display:grid!important; grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important; gap:8px; align-items:stretch; } .hap-employee-create-ticket .hap-phone-choice-row > .lookup-input { min-width:0; } .hap-employee-create-ticket .hap-phone-unavailable-check { width:auto!important; min-width:0; margin:0!important; padding:8px!important; box-sizing:border-box; gap:6px; min-height:44px; } .hap-employee-create-ticket .hap-phone-unavailable-check strong { white-space:normal!important; font-size:11px; line-height:1.35; overflow-wrap:anywhere; } .hap-employee-create-ticket .hap-material-options { display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:7px!important; align-items:stretch; } .hap-employee-create-ticket .hap-material-options > .check-line { display:flex!important; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:6px; width:auto!important; min-width:0; margin:0!important; padding:9px 7px!important; font-size:11px!important; line-height:1.35; box-sizing:border-box; } .hap-employee-create-ticket .hap-material-options > .check-line strong { font-size:11px!important; line-height:1.35; } .hap-employee-create-ticket .hap-material-options > .check-line input[type="checkbox"] { flex:0 0 auto; width:18px!important; height:18px!important; margin:0!important; } .hap-employee-create-ticket .hap-received-label-full { display:none; } .hap-employee-create-ticket .hap-received-label-short { display:inline; } } /* iOS mobile: prevent Safari focus zoom inside work-order popups. */ @media(max-width:782px){body.hap-wm-app input:not([type=checkbox]):not([type=radio]),body.hap-wm-app select,body.hap-wm-app textarea,body.hap-wm-admin-app input:not([type=checkbox]):not([type=radio]),body.hap-wm-admin-app select,body.hap-wm-admin-app textarea,.hap-modal input:not([type=checkbox]):not([type=radio]),.hap-modal select,.hap-modal textarea{font-size:16px!important;}} /* Employee ticket material choices: same compact type for all three labels. */ .hap-employee-ticket .hap-material-options>.check-line, .hap-employee-ticket .hap-material-options>.check-line strong, .hap-employee-ticket .hap-material-options>.check-line span{ font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif!important; font-size:12px!important; font-weight:650!important; line-height:1.3!important; letter-spacing:0!important; text-transform:none!important; } .hap-employee-ticket .hap-material-options>.check-line{min-height:38px;padding:7px 10px;gap:7px;align-items:center} @media(max-width:767px){ .hap-employee-ticket .hap-material-options>.check-line, .hap-employee-ticket .hap-material-options>.check-line strong, .hap-employee-ticket .hap-material-options>.check-line span{font-size:10.5px!important;line-height:1.25!important} .hap-employee-ticket .hap-material-options>.check-line{min-height:0;padding:8px 7px!important} } /* v0.17.263: assignment filter actions share the page-title row. */ .hap-assignment-titlebar{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%} .hap-assignment-titlebar h1{min-width:0;margin:0;line-height:1.2} .hap-assignment-title-actions{display:grid;grid-template-columns:repeat(2,132px);gap:8px;flex:0 0 auto} body.hap-wm-admin-app .hap-assignment-title-actions .button{box-sizing:border-box;width:100%;height:42px;min-height:42px;margin:0;padding:8px 12px;text-align:center;line-height:24px} body.hap-wm-admin-app .hap-assignment-title-actions .button-primary{border-color:#0f5148!important;background:#0f5148!important;color:#fff!important} body.hap-wm-admin-app .hap-assignment-title-actions .button:not(.button-primary){border-color:#d4dfdc!important;background:#fff!important;color:#173f3a!important} body.hap-wm-admin-app .hap-assignment-title-actions .button:hover{border-color:#087f68!important;color:#087f68!important} body.hap-wm-admin-app .hap-assignment-title-actions .button-primary:hover{background:#087f68!important;color:#fff!important} @media(max-width:782px){ .hap-assignment-titlebar{gap:8px} .hap-assignment-titlebar h1{font-size:21px} .hap-assignment-title-actions{grid-template-columns:repeat(2,minmax(76px,88px));gap:6px} body.hap-wm-admin-app .hap-assignment-title-actions .button{height:40px;min-height:40px;padding:7px 5px;font-size:10px;line-height:24px;white-space:nowrap} } /* Operations: quick creation actions live immediately before the top search. */ .hap-operations-top-actions{display:flex;align-items:center;gap:7px;flex:0 0 auto} body.hap-wm-admin-app .hap-operations-top-actions .button{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:42px;min-height:42px;margin:0;padding:0 12px;white-space:nowrap} body.hap-wm-admin-app .hap-operations-top-actions .button-primary{border-color:#2563eb!important;background:#2563eb!important;color:#fff!important} body.hap-wm-admin-app .hap-operations-top-actions .button-primary:hover{border-color:#1d4ed8!important;background:#1d4ed8!important;color:#fff!important} body.hap-wm-admin-app .hap-operations-top-actions+.search{box-sizing:border-box;height:42px;min-height:42px;margin:0;padding:0 13px} @media(max-width:782px){.hap-operations-top-actions{display:none!important}} .hap-calendar-job.waiting>div{flex-wrap:wrap;align-items:center} .hap-calendar-job.waiting .hap-job-flags{flex-wrap:wrap;margin-left:auto} .hap-calendar-job.waiting .hap-job-appointment{font-size:9px;color:#80551e;white-space:nowrap;font-weight:700} /* Employee directory filters and private recurring payroll adjustments. */ .hap-employee-status-filter{margin:0}.hap-employee-status-filter select{min-width:156px;max-width:190px;margin:0;font-weight:700} .hap-employee-default-adjustments{grid-column:1/-1;margin-top:18px;padding-top:16px;border-top:1px solid #dce7e3}.hap-employee-default-adjustments h2{margin:0 0 4px}.hap-employee-default-adjustments>.description{margin:0 0 12px;color:#657872} .hap-private-payroll-adjustment{background:#f3faf7}.hap-private-payroll-adjustment td:nth-child(3) small{display:block;color:#218064;font-size:9px;font-weight:800} /* Customer edit heading and order shortcuts in profit breakdowns. */ .hap-customer-form-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:18px 0 10px}.hap-customer-form-head h1{margin:0}.hap-customer-form-head .button{display:inline-flex;align-items:center;justify-content:center;min-height:38px;margin:0} .hap-profit-table{width:100%;min-width:0!important;table-layout:fixed}.hap-profit-table th,.hap-profit-table td{box-sizing:border-box;overflow-wrap:anywhere}.hap-profit-table .money{white-space:nowrap;text-align:right}.hap-profit-customer-table th:nth-child(1){width:30%}.hap-profit-customer-table th:nth-child(2){width:38%}.hap-profit-customer-table th:nth-child(3){width:10%}.hap-profit-customer-table th:nth-child(4){width:22%}.hap-profit-service-table th:nth-child(1){width:52%}.hap-profit-service-table th:nth-child(2){width:18%}.hap-profit-service-table th:nth-child(3){width:30%}.hap-profit-service-label{display:flex;align-items:center;flex-wrap:wrap;gap:5px;min-width:0}.hap-profit-service-label>strong{min-width:0}.hap-profit-order-links{display:inline-flex;align-items:center;flex-wrap:wrap;gap:4px;max-width:100%;margin:0 0 0 7px;vertical-align:middle}.hap-profit-code-cell .hap-profit-order-links{margin-left:0}.hap-profit-order-links a{display:inline-flex;align-items:center;min-height:23px;max-width:100%;padding:1px 7px;border:1px solid #bcd9cf;border-radius:999px;background:#f0faf6;color:#12634d;font-size:9px;font-weight:800;text-decoration:none;overflow-wrap:anywhere}.hap-profit-order-links a:hover{border-color:#15956a;background:#e2f6ee;color:#0d4f3d} @media(max-width:782px){.hap-customer-form-head{align-items:stretch;flex-direction:column}.hap-customer-form-head .button{width:100%}.hap-profit-table{font-size:11px}.hap-profit-table th,.hap-profit-table td{padding:8px 6px}.hap-profit-customer-table th:nth-child(1){width:27%}.hap-profit-customer-table th:nth-child(2){width:37%}.hap-profit-customer-table th:nth-child(3){width:12%}.hap-profit-customer-table th:nth-child(4){width:24%}.hap-profit-order-links{margin-left:4px}.hap-profit-order-links a{padding:1px 5px;font-size:8px}} /* ===== Tổng quan quỹ lương (0.17.301) — gọn, dùng lại style dashboard ===== */ .hap-po-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0} .hap-po-grid>a,.hap-po-grid>div{display:block;padding:18px;border:1px solid #e3eae8;border-radius:14px;background:#fff;text-decoration:none;color:inherit} .hap-po-grid>a:hover{box-shadow:0 8px 22px rgba(18,60,50,.1)} .hap-po-grid .po-label{display:block;color:#6d7e79;font-size:12px;font-weight:700} .hap-po-grid .po-value{display:block;margin-top:8px;color:#123f38;font-size:27px;letter-spacing:-.02em;font-weight:800} .hap-po-grid .po-sub{display:block;margin-top:6px;color:#8a9a95;font-size:11px} .hap-po-final{background:linear-gradient(120deg,#f0fdf4,#ecfdf5)!important;border-color:#bbf7d0!important} .hap-po-final.is-negative{background:linear-gradient(120deg,#fef2f2,#fff7ed)!important;border-color:#fecaca!important} .hap-po-final.is-negative .po-value{color:#c43f35} .hap-po-lines{margin-top:14px;padding-top:12px;border-top:1px dashed #dce7e4;display:grid;gap:8px} .hap-po-lines>div{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:#6d7e79} .hap-po-lines strong{color:#123f38;font-size:15px} /* Nút gạt — span-based, không phụ thuộc style label/checkbox của theme */ .hap-payroll-overview-page .hap-card{padding:20px 22px;margin-bottom:16px} .hap-po-h2{margin:0 0 16px;font-size:19px;line-height:1.35} .hap-po-toolbar{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap} .hap-po-toolbar-left .hap-eyebrow{font-size:11px;font-weight:800;letter-spacing:.08em;color:#2563eb;text-transform:uppercase} .hap-po-toolbar-left h1{margin:4px 0 6px;font-size:24px;line-height:1.25;color:#123f38} .hap-po-toolbar-left p{margin:0;color:#6d7e79;font-size:13px} .hap-po-toolbar-right{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap} .hap-po-toolbar-right .hap-field{display:flex;align-items:center;gap:8px;margin:0} .hap-po-toolbar-right .hap-field>label{font-size:12px;font-weight:700;color:#3d4f4b;white-space:nowrap} .hap-po-toolbar-right select[name=month],.hap-po-toolbar-right input[name=year]{width:132px;height:40px;min-height:40px;box-sizing:border-box;margin:0;padding-top:0;padding-bottom:0;line-height:normal;vertical-align:middle} .hap-po-toolbar-right select[name=month]{padding-left:12px;padding-right:32px} .hap-po-toolbar-right .button{height:40px;display:inline-flex;align-items:center;box-sizing:border-box} .hap-po-toolbar-right .hap-switch{padding-bottom:8px} .hap-po-family-label-short,.hap-po-export-short{display:none} .hap-switch{position:relative;display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-weight:700;font-size:13px;line-height:1.4;color:#123f38;padding:6px 0} .hap-switch-input{position:absolute!important;top:0;left:0;opacity:0!important;width:100%!important;height:100%!important;margin:0!important;padding:0!important;border:0!important;cursor:pointer;z-index:2} .hap-switch .sw-track{position:relative;flex:0 0 auto;width:44px;height:24px;border-radius:999px;background:#cbd5e1;transition:background .18s;pointer-events:none} .hap-switch .sw-thumb{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:left .18s} .hap-switch-input:checked~.sw-track{background:#22c55e} .hap-switch-input:checked~.sw-track .sw-thumb{left:23px} .hap-switch-input:focus-visible~.sw-track{outline:2px solid #2563eb;outline-offset:2px} .hap-switch .sw-text{pointer-events:none} .hap-method-switch .m-transfer{display:none} .hap-method-switch .hap-switch-input:checked~.sw-text .m-cash{display:none} .hap-method-switch .hap-switch-input:checked~.sw-text .m-transfer{display:inline} .hap-family-badge{display:inline-block;margin-left:8px;padding:3px 10px;border-radius:999px;background:#fef3c7;color:#b45309;font-size:11px;font-weight:800} /* Biểu đồ cột chồng */ .hap-po-chart{position:relative;display:flex;align-items:stretch;gap:6px;height:216px;padding:26px 6px 0; background:repeating-linear-gradient(to top,transparent 0 calc(25% - 1px),#edf0f3 calc(25% - 1px) 25%)} .hap-po-chart .bw{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-width:0;height:100%} .hap-po-chart .bval{font-size:10px;font-weight:800;color:#6d7e79;margin-bottom:4px;white-space:nowrap} .hap-po-chart .bw.cur .bval{color:#123f38} .hap-po-chart .bs{width:72%;max-width:32px;min-height:4px;background:#e6ebf2;border-radius:7px 7px 3px 3px;height:var(--h);display:flex;align-items:flex-end;overflow:hidden} .hap-po-chart .bp{width:100%;background:linear-gradient(180deg,#34d399,#16a34a)} .hap-po-chart .bmon{margin-top:8px;font-size:10px;color:#8a9a95} .hap-po-chart .bw.cur .bmon{font-weight:900;color:#123f38} .hap-po-chart .bw.cur .bs{outline:2px solid #2563eb;outline-offset:2px} .hap-po-legend{font-size:12px;color:#6d7e79}.hap-po-legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:4px;vertical-align:-1px} .hap-po-legend .lg-paid{background:#22c55e}.hap-po-legend .lg-unpaid{background:#e8edf5;border:1px solid #d5dce8} .hap-po-cols{display:grid;grid-template-columns:1.25fr 1fr;gap:16px;margin-top:16px} .hap-po-summary-cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .hap-po-ratio{margin:6px 0 4px}.hap-po-ratio strong{font-size:36px;letter-spacing:-.02em;color:#123f38;line-height:1.1} .hap-po-compare-caption{margin:-10px 0 16px!important;color:#71827f;font-size:12px} .hap-po-compare-visual{display:grid;grid-template-columns:174px minmax(0,1fr);gap:22px;align-items:center;min-height:220px} .hap-po-ratio-ring{position:relative;display:grid;place-items:center;width:166px;height:166px;margin:auto;border-radius:50%;background:conic-gradient(#16805f 0 var(--ratio),#e8efed var(--ratio) 360deg);box-shadow:inset 0 0 0 1px rgba(20,62,57,.04)} .hap-po-ratio-ring:after{content:"";position:absolute;inset:27px;border-radius:50%;background:#fff;box-shadow:0 2px 12px rgba(20,57,50,.09)} .hap-po-ratio-ring>div{position:relative;z-index:1;max-width:108px;text-align:center} .hap-po-ratio-ring span,.hap-po-ratio-ring small{display:block;color:#758682;font-size:9px;font-weight:800;line-height:1.3;text-transform:uppercase;letter-spacing:.04em} .hap-po-ratio-ring strong{display:block;margin:5px 0;color:#153f38;font-size:26px;line-height:1} .hap-po-compare-list{display:flex;flex-direction:column;min-width:0} .hap-po-compare-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px 10px;padding:10px 0;border-bottom:1px solid #edf2f1} .hap-po-compare-row:last-child{border-bottom:0} .hap-po-compare-name{display:grid;grid-template-columns:10px minmax(0,1fr);gap:9px;align-items:start;min-width:0} .hap-po-compare-name i{width:9px;height:9px;margin-top:5px;border-radius:50%;box-shadow:0 0 0 4px color-mix(in srgb,currentColor 13%,transparent)} .hap-po-compare-name strong{display:block;overflow:hidden;color:#173f3a;font-size:12px;line-height:1.3;text-overflow:ellipsis;white-space:nowrap} .hap-po-compare-name small{display:block;margin-top:3px;color:#758682;font-size:10px;line-height:1.35} .hap-po-compare-name small b{color:#15803d;font-weight:800}.hap-po-compare-name small b.is-down{color:#c43f35}.hap-po-compare-name small b.is-flat{color:#71827f} .hap-po-compare-amount{align-self:start;color:#153e39;font-size:13px;font-weight:800;white-space:nowrap} .hap-po-compare-bar{grid-column:1/-1;height:5px;margin-left:19px;overflow:hidden;border-radius:99px;background:#edf2f1} .hap-po-compare-bar i{display:block;height:100%;border-radius:inherit} .hap-po-expenses{display:grid;gap:10px;margin-bottom:12px} .hap-po-expenses .erow{display:grid;grid-template-columns:minmax(120px,1.1fr) 1.6fr auto;gap:12px;align-items:center;font-size:13px} .hap-po-expenses .ecat{color:#3d4f4b;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .hap-po-expenses .ebar{height:8px;border-radius:99px;background:#eef1f4;overflow:hidden} .hap-po-expenses .ebar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#f59e0b,#fbbf24)} .hap-po-expenses .erow strong{color:#123f38;white-space:nowrap} .hap-po-notes ul{margin:0;padding-left:20px;display:grid;gap:8px;font-size:13px;line-height:1.6;color:#3d4f4b} .hap-po-compare-table{width:100%;min-width:0!important;table-layout:fixed} .hap-po-compare-table th:first-child{width:34%} .hap-po-compare-table th:not(:first-child){width:22%} .hap-po-compare-table th,.hap-po-compare-table td{box-sizing:border-box;overflow-wrap:anywhere} /* Panel thanh toán lương */ .hap-pay-panel{margin-top:18px} .hap-pay-panel .hap-sheet-title{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .hap-pay-panel .hap-sheet-title>span:first-child{font-size:11px;font-weight:800;letter-spacing:.1em;color:#6d7e79} .hap-pay-panel .hap-sheet-title strong{font-size:16px} .hap-pay-badge{padding:5px 12px;border-radius:999px;font-size:11px;font-weight:800;background:#f1f5f9;color:#64748b} .hap-pay-badge.partial{background:#fef3c7;color:#b45309}.hap-pay-badge.paid{background:#dcfce7;color:#15803d} .hap-pay-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:14px 0} .hap-pay-grid>div{padding:14px;border:1px solid #e3eae8;border-radius:12px;background:#fff;display:grid;gap:4px} .hap-pay-grid span{font-size:11px;color:#6d7e79;font-weight:700}.hap-pay-grid strong{font-size:20px} .hap-pay-form{display:grid;grid-template-columns:1fr 1fr 1.4fr auto;gap:12px;align-items:end} .hap-pay-form label{display:grid;gap:6px;font-size:12px;font-weight:700;color:#3d4f4b} .hap-pay-stats{margin:18px 0 4px} .hap-pay-inline{display:inline-flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-left:auto;padding-left:14px;border-left:1px solid #e2e8e6} .hap-pay-inline .hap-pay-amount{margin:0} .hap-pay-inline .hap-method-switch{padding-bottom:8px} .hap-pay-slim{margin-top:16px} .hap-pay-row{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;justify-content:flex-end;margin-top:6px} .hap-pay-amount{display:grid;gap:6px;font-size:12px;font-weight:700;color:#3d4f4b;margin:0} .hap-pay-amount input{min-width:170px;height:44px;box-sizing:border-box;margin:0} .hap-pay-inline .btn{height:44px;min-height:44px;box-sizing:border-box} .hap-pay-debt{color:#b45309} .hap-debt-label{display:inline-block;padding:4px 10px;border-radius:999px;background:#fef3c7;color:#b45309;font-size:11px;font-weight:800;white-space:nowrap} .hap-debt-label.hap-debt-paid{background:#dcfce7;color:#15803d} .hap-pay-row .hap-method-switch{padding-bottom:8px} .hap-pay-done{color:#15803d;font-weight:800} @media(max-width:900px){.hap-po-grid{grid-template-columns:1fr 1fr}.hap-po-cols{grid-template-columns:1fr}.hap-pay-form{grid-template-columns:1fr 1fr}.hap-po-toolbar{flex-direction:column;align-items:stretch}.hap-po-toolbar-right{width:100%}} @media(max-width:560px){ .hap-payroll-overview-page .hap-card{padding:16px 14px} .hap-po-toolbar-right{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px 7px;align-items:end} .hap-po-toolbar-right .hap-field{grid-column:span 3;display:grid;grid-template-columns:auto minmax(0,1fr);gap:7px;align-items:center;min-width:0} .hap-po-toolbar-right .hap-field select,.hap-po-toolbar-right .hap-field input{width:100%!important;min-width:0} .hap-po-toolbar-right .hap-switch,.hap-po-toolbar-right>.button{grid-column:span 2;width:100%;min-width:0;height:40px;min-height:40px;margin:0!important;padding:0 5px;justify-content:center;box-sizing:border-box;font-size:10px;line-height:1.15;text-align:center;white-space:normal} .hap-po-toolbar-right .hap-switch{gap:5px} .hap-po-toolbar-right .hap-switch .sw-track{width:34px;height:20px} .hap-po-toolbar-right .hap-switch .sw-thumb{top:3px;left:3px;width:14px;height:14px} .hap-po-toolbar-right .hap-switch-input:checked~.sw-track .sw-thumb{left:17px} .hap-po-family-label-full,.hap-po-export-full{display:none} .hap-po-family-label-short,.hap-po-export-short{display:inline} .hap-po-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px} .hap-po-grid>a,.hap-po-grid>div{min-width:0;padding:13px 11px;border-radius:12px} .hap-po-grid .po-label{font-size:10px;line-height:1.3} .hap-po-grid .po-value{margin-top:5px;font-size:19px;line-height:1.15;overflow-wrap:anywhere} .hap-po-grid .po-sub{margin-top:5px;font-size:9px;line-height:1.35} .hap-po-compare-visual{grid-template-columns:1fr;gap:12px;min-height:0} .hap-po-ratio-ring{width:142px;height:142px} .hap-po-ratio-ring:after{inset:24px} .hap-po-ratio-ring strong{font-size:22px} .hap-po-compare-row{padding:9px 0} .hap-po-compare-name strong{white-space:normal} .hap-po-compare-name small{font-size:9px} .hap-po-compare-amount{font-size:11px} .hap-po-lines>div{align-items:flex-start;font-size:11px} .hap-po-lines>div span{min-width:0} .hap-po-lines strong{flex:0 0 auto;font-size:12px;text-align:right} .hap-po-compare-table{font-size:10px} .hap-po-compare-table th,.hap-po-compare-table td{padding:7px 4px!important;line-height:1.25} .hap-po-compare-table th:first-child{width:31%} .hap-po-compare-table th:not(:first-child){width:23%} .hap-po-expenses .erow{grid-template-columns:1fr auto}.hap-po-expenses .ebar{display:none}.hap-pay-row{justify-content:stretch}.hap-pay-amount{flex:1 1 100%}.hap-pay-amount input{width:100%} } /* Compact operations KPIs: number beside the label, with a quieter card outline. */ .hap-operations-page .hap-ops-kpis{gap:10px} .hap-operations-page .hap-ops-kpi{grid-template-columns:max-content minmax(0,1fr);grid-template-rows:auto auto;align-content:center;align-items:center;column-gap:10px;row-gap:1px;box-sizing:border-box;min-width:0;min-height:68px;padding:9px 12px;border-top-width:3px;border-right-color:#edf2f0;border-bottom-color:#edf2f0;border-left-color:#edf2f0;border-radius:12px;box-shadow:0 3px 12px rgba(20,61,53,.035)} .hap-operations-page .hap-ops-kpi strong{grid-column:1;grid-row:1/3;font-size:27px;line-height:1;white-space:nowrap} .hap-operations-page .hap-ops-kpi span{grid-column:2;grid-row:1;min-width:0;color:#405c56;font-size:12px;line-height:1.2} .hap-operations-page .hap-ops-kpi small{grid-column:2;grid-row:2;min-width:0;font-size:10px;line-height:1.2} @media(max-width:600px){ .hap-operations-page .hap-ops-kpi{min-height:62px;padding:8px 9px;column-gap:7px} .hap-operations-page .hap-ops-kpi strong{font-size:23px} .hap-operations-page .hap-ops-kpi span{font-size:10px} .hap-operations-page .hap-ops-kpi small{font-size:9px} }