:root{--p:#0f766e;--p2:#0b5f59;--bg:#f5f7fb;--b:#e5e7eb;--t:#111827;--muted:#6b7280;--sidebar:168px}*{box-sizing:border-box}html,body{min-height:100%}body{margin:0;font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans",Arial,sans-serif;background:var(--bg);color:var(--t)}a{color:var(--p)}.sidebar{position:fixed;left:0;top:0;bottom:0;width:var(--sidebar);background:#fff;border-right:1px solid var(--b);z-index:30;overflow:auto}.brand{height:54px;display:flex;align-items:center;gap:10px;padding:0 18px;font-weight:800;color:#111827;text-decoration:none;font-size:17px;border-bottom:1px solid var(--b)}.brand-mark{width:32px;height:32px;border-radius:9px;background:var(--p);color:#fff;display:grid;place-items:center;font-size:18px}.side-nav{padding:6px 7px}.side-nav a{display:flex;align-items:center;gap:10px;padding:6px 9px;border-radius:7px;color:#374151;text-decoration:none;margin:1px 0;font-size:13.5px;min-height:33px;white-space:nowrap}.side-nav a:hover,.side-nav a.active{background:#ecfdf5;color:var(--p);font-weight:700}.menu-icon{width:20px;text-align:center;font-size:16px;line-height:1}.menu-icon i{vertical-align:middle}.app-shell{margin-left:var(--sidebar);min-height:100vh}.topbar{height:64px;background:#fff;border-bottom:1px solid var(--b);position:sticky;top:0;z-index:20;display:flex;align-items:center;padding:0 18px;gap:9px}.topbar-spacer{flex:1}.mobile-menu{display:none;border:0;background:transparent;font-size:22px}.notify-wrap{position:relative}.notify-btn{width:38px;height:38px;border:1px solid var(--b);border-radius:50%;background:#fff;display:grid;place-items:center;text-decoration:none;position:relative;cursor:pointer}.notify-btn:hover{background:#f3f4f6}.badge{position:absolute;right:-4px;top:-5px;min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:#dc2626;color:#fff;font-size:11px;font-weight:800;line-height:19px;text-align:center}.notify-panel{display:none;position:absolute;right:0;top:46px;width:370px;max-height:520px;background:#fff;border:1px solid var(--b);box-shadow:0 15px 40px rgba(0,0,0,.16);border-radius:12px;overflow:hidden}.notify-panel.open{display:block}.notify-head{display:flex;justify-content:space-between;padding:13px 14px;border-bottom:1px solid var(--b)}.notify-list{max-height:430px;overflow:auto}.notify-item{display:block;padding:11px 14px;border-bottom:1px solid #f1f5f9;color:#111827;text-decoration:none}.notify-item.unread{background:#eff6ff}.notify-item small{display:block;color:var(--muted);margin-top:3px}.pad{padding:14px}.userbox{display:flex;align-items:center;gap:9px;margin-left:4px}.userbox small{display:block;color:var(--muted);font-size:11px}.userbox>a{text-decoration:none;color:#6b7280;font-size:18px}.avatar-mini{width:34px;height:34px;border-radius:50%;background:#d1fae5;color:var(--p);display:grid;place-items:center;font-weight:800}.content{max-width:1600px;margin:auto;padding:20px}.login-main{max-width:1450px;margin:auto;padding:20px}.page-title{display:flex;align-items:center;justify-content:space-between}.page-title h1{font-size:23px;margin:0 0 16px}.card{background:#fff;border:1px solid var(--b);border-radius:12px;padding:16px;margin-bottom:16px;box-shadow:0 1px 2px rgba(0,0,0,.02)}.card h3{margin-top:0}.card-head{display:flex;justify-content:space-between;align-items:center;gap:10px}.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}label{display:block;font-weight:600;margin:7px 0 5px}input,select,textarea{width:100%;padding:9px 10px;border:1px solid #cbd5e1;border-radius:8px;background:#fff;color:#111827;font:inherit}textarea{min-height:90px;resize:vertical}.btn{display:inline-block;border:0;border-radius:8px;padding:9px 13px;background:var(--p);color:#fff;text-decoration:none;cursor:pointer;font-weight:600}.btn:hover{background:var(--p2)}.btn.gray{background:#475569}.btn.red{background:#b91c1c}.btn.orange{background:#d97706}.btn.light{background:#eef2ff;color:#3730a3}.toolbar{display:flex;gap:8px;align-items:end;flex-wrap:wrap;margin-bottom:12px}.toolbar>div{min-width:150px;flex:0 1 220px}.table-wrap{overflow:auto;border:1px solid var(--b);border-radius:10px}table{width:100%;border-collapse:collapse;background:#fff}th,td{padding:10px;border-bottom:1px solid var(--b);text-align:left;vertical-align:top}th{background:#f8fafc;white-space:nowrap}.flash{padding:10px 12px;background:#dcfce7;border:1px solid #86efac;border-radius:8px;margin-bottom:12px}.kpi{font-size:26px;font-weight:800}.muted{color:var(--muted)}.danger{color:#dc2626}.warn{color:#d97706}.ok{color:#15803d}.progress{height:8px;background:#e2e8f0;border-radius:99px;overflow:hidden}.progress span{display:block;height:100%;background:var(--p)}.attachment-list{display:grid;gap:7px}.attachment-item{display:flex;gap:9px;align-items:center;padding:9px;border:1px solid var(--b);border-radius:9px}.attachment-item a{text-decoration:none}.attachment-item small{display:block;color:var(--muted)}.status-pill{display:inline-block;padding:3px 8px;border-radius:99px;background:#f3f4f6;font-size:12px}.row-overdue td{color:#dc2626;font-weight:600}.row-warning td{color:#d97706;font-weight:600}.comment{padding:11px 0;border-bottom:1px solid #f1f5f9}.comment:last-child{border-bottom:0}.quick-actions{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px}.summary-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:12px 0}.summary-strip>div{background:#fff;border:1px solid var(--b);border-radius:10px;padding:12px}.summary-strip b{display:block;font-size:18px;margin-top:4px}.filters{background:#fff;border:1px solid var(--b);border-radius:10px;padding:12px;margin-bottom:12px}.checkbox-line{display:flex;align-items:center;gap:7px}.checkbox-line input{width:auto}.notification-page .notify-row{padding:12px;border-bottom:1px solid var(--b)}.notification-page .notify-row.unread{background:#eff6ff}@media(max-width:1000px){.sidebar{transform:translateX(-100%);transition:.2s}.sidebar.open{transform:translateX(0)}.app-shell{margin-left:0}.mobile-menu{display:block}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.summary-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.userbox div{display:none}}@media(max-width:650px){.content{padding:12px}.grid,.grid2,.summary-strip{grid-template-columns:1fr}.notify-panel{position:fixed;left:10px;right:10px;top:65px;width:auto}.leave-btn{display:none}.toolbar>div{min-width:calc(50% - 4px);flex:1}.page-title h1{font-size:20px}} .attendance-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.attendance-now{font-size:20px;font-weight:800}.attendance-grid th,.attendance-grid td{text-align:center;min-width:70px;padding:7px 5px}.attendance-grid th:first-child,.attendance-grid td:first-child{position:sticky;left:0;text-align:left;min-width:180px;z-index:2;background:#fff}.attendance-grid th:first-child{background:#f8fafc}.att-present{background:#ecfdf5!important;color:#047857}.att-leave{background:#eff6ff!important;color:#1d4ed8}.att-absent{background:#fef2f2!important;color:#b91c1c}.att-pending{background:#fffbeb!important;color:#b45309}.att-weekend{background:#f8fafc!important;color:#94a3b8}.tiny{font-size:11px}.settings-note{font-size:12px;color:var(--muted);margin-top:5px} /* V1.3 direct edit + conflict warning */ .editable-row{position:relative;border-bottom:1px solid #edf0f3;padding:7px 48px 7px 0}.editable-row:last-of-type{border-bottom:0}.editable-row p{margin:0}.mini-edit{position:absolute;right:0;top:9px;font-size:12px;text-decoration:none;padding:3px 7px;border-radius:5px;background:#f3f5f7}.inline-edit-form{margin-top:12px;padding-top:12px;border-top:1px dashed #d9dee4}.inline-edit-form input,.inline-edit-form select,.inline-edit-form textarea{margin-bottom:7px}.conflict-warning{margin-top:14px;padding:13px 15px;border:1px solid #f0a33a;background:#fff7e8;border-radius:8px;color:#7a4200}.conflict-warning.ok-conflict{border-color:#65b882;background:#eefaf2;color:#216a3b}.conflict-item{margin-top:9px;padding-top:9px;border-top:1px solid rgba(122,66,0,.18);line-height:1.55}.conflict-summary{padding:9px 11px;background:#fff7e8;border-left:3px solid #f0a33a;border-radius:4px} /* V1.3.2 - master settings CRUD */ .master-edit-form{align-items:flex-end;margin:0}.master-edit-form>div{min-width:150px}.master-edit-form>div:first-of-type{flex:1;min-width:240px}.master-edit-actions{display:flex;gap:6px;align-items:flex-end}.btn.small{padding:6px 10px;font-size:12px}.status.muted-status{background:#f3f4f6;color:#6b7280} /* V1.4 - Information module + attendance button in topbar */ .attendance-top-btn i{font-size:17px}.information-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.information-card{display:block;text-decoration:none;color:var(--t);margin:0;transition:.15s}.information-card:hover{transform:translateY(-1px);box-shadow:0 5px 18px rgba(15,23,42,.07);border-color:#cbd5e1}.information-card h3{margin:8px 0 5px;font-size:17px}.information-card p{margin:0 0 10px;color:#475569}.information-card-head,.information-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.info-category{display:inline-block;padding:3px 8px;border-radius:99px;background:#ecfdf5;color:#047857;font-size:12px;font-weight:700}.information-meta{border-bottom:1px solid var(--b);padding-bottom:12px;margin-bottom:18px;color:var(--muted);font-size:12px}.information-meta span{display:flex;align-items:center;gap:4px}.rich-content{font-size:15px;line-height:1.72;overflow-wrap:anywhere}.rich-content img{max-width:100%;height:auto}.rich-content table{max-width:100%}.rich-content pre{white-space:pre-wrap;background:#f8fafc;border:1px solid var(--b);padding:10px;border-radius:8px}@media(max-width:750px){.information-list{grid-template-columns:1fr}.attendance-top-btn{display:grid}} /* V1.6 */ .brand-logo{width:34px;height:34px;object-fit:contain;border-radius:7px;flex:0 0 auto}.settings-half{width:calc(50% - 8px);max-width:760px}.settings-color-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:10px}.settings-color-grid input[type=color]{height:42px;padding:3px}.settings-logo-preview{margin:5px 0 8px}.settings-logo-preview img{max-width:180px;max-height:70px;object-fit:contain;border:1px solid var(--b);border-radius:8px;padding:6px;background:#fff}.team-edit-inline{display:grid;grid-template-columns:1fr 150px auto auto;gap:7px;align-items:center}.compact-add{margin-top:10px;margin-bottom:0}.dashboard-filter{display:flex;align-items:end;gap:12px;flex-wrap:wrap}.dashboard-filter>div{width:230px}.dashboard-scope{height:40px;display:flex;align-items:center;gap:5px}.dashboard-section-title{font-size:15px;font-weight:800;margin:7px 0 10px}.dashboard-kpis{margin-bottom:4px}.dashboard-kpi{display:flex;align-items:center;gap:13px;min-height:92px}.dashboard-kpi>i{width:42px;height:42px;border-radius:10px;background:#ecfdf5;color:var(--p);display:grid;place-items:center;font-size:19px}.dashboard-kpi span{display:block;color:var(--muted);font-size:12px}.dashboard-kpi b{display:block;font-size:25px;margin-top:3px}.dashboard-kpi.money-kpi b{font-size:18px}.dashboard-debt{display:flex;flex-direction:column;justify-content:center}.dashboard-debt span{color:var(--muted)}.dashboard-debt b{font-size:24px;margin-top:5px;color:#b45309}@media(max-width:1000px){.settings-half{width:100%;max-width:none}.team-edit-inline{grid-template-columns:1fr 130px auto auto}.dashboard-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:650px){.settings-color-grid,.team-edit-inline{grid-template-columns:1fr}.dashboard-filter>div{width:100%}.dashboard-kpis{grid-template-columns:1fr}} .customer-modal{position:fixed;inset:0;z-index:9999}.customer-modal-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.48)}.customer-modal-box{position:relative;width:min(760px,calc(100% - 28px));max-height:84vh;overflow:auto;margin:7vh auto;background:#fff;border-radius:14px;box-shadow:0 24px 70px rgba(15,23,42,.28);padding:22px}.customer-modal-close{position:absolute;right:12px;top:10px;border:0;background:#f1f5f9;border-radius:50%;width:32px;height:32px;font-size:23px;line-height:28px;cursor:pointer}.customer-popup-head{display:flex;align-items:center;justify-content:space-between;gap:15px;padding-right:35px;margin-bottom:14px}.customer-popup-head b{font-size:19px}.popup-line{padding:9px 0;border-bottom:1px solid var(--b)}.popup-customer-grid{margin-bottom:10px}@media(max-width:650px){.customer-modal-box{margin:3vh auto;max-height:92vh;padding:18px}.customer-popup-head{align-items:flex-start;flex-direction:column}.settings-half{width:100%}} /* V1.8 - compact layouts, 2-up settings, leave forecast */ .settings-half{display:inline-block;vertical-align:top;margin-right:12px;width:calc(50% - 10px);max-width:none}.settings-half:nth-of-type(even){margin-right:0}.detail-line{display:flex;gap:6px;align-items:flex-start;margin:5px 0}.detail-line>b{flex:0 0 auto}.detail-line>span{min-width:0}.detail-content span{white-space:normal}.compact-task-card{padding:13px 15px}.compact-task-card h3{margin-bottom:7px}.entity-task-list{display:flex;flex-direction:column}.entity-task-row{display:flex;align-items:center;gap:10px;padding:8px 2px;border-top:1px solid #eef2f7;color:var(--t);text-decoration:none}.entity-task-row:first-child{border-top:0}.entity-task-row:hover{background:#f8fafc}.task-main{flex:1;min-width:0}.task-main b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.task-main small{display:block;color:var(--muted);font-size:11px;margin-top:2px}.task-progress{font-weight:800;color:var(--p);min-width:40px;text-align:right}.compact-empty{padding:8px 0}.entity-finance{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}.entity-finance>div{padding:8px 10px;border-radius:8px;font-size:12px}.entity-finance b{font-size:15px;margin-top:2px}.compact-comments textarea{min-height:68px}.leave-forecast-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px}.leave-day{border:1px solid var(--b);border-radius:9px;padding:9px;min-height:115px;background:#fff}.leave-day.weekend{background:#f8fafc;color:#94a3b8}.leave-date{display:flex;justify-content:space-between;gap:5px}.leave-count{margin-top:9px;color:#047857}.leave-count b{font-size:19px}.leave-off{font-size:11px;margin-top:6px;line-height:1.35;color:#b45309;overflow-wrap:anywhere} @media(max-width:1000px){.settings-half{width:100%;margin-right:0}.leave-forecast-grid{grid-template-columns:repeat(4,minmax(0,1fr))}} @media(max-width:650px){.detail-line{display:block;margin:4px 0}.entity-task-row{align-items:flex-start;gap:6px;padding:8px 0}.entity-task-row .status-pill{font-size:10px;padding:2px 6px}.task-main small{white-space:normal}.entity-finance{display:flex!important;overflow-x:auto;gap:6px;padding-bottom:4px}.entity-finance>div{min-width:125px;flex:0 0 auto}.entity-finance b{font-size:14px}.leave-forecast-grid{display:flex;overflow-x:auto}.leave-day{min-width:155px;flex:0 0 auto}.card{padding:12px}.summary-strip{gap:6px}.quick-actions .btn{padding:7px 9px;font-size:12px}} .inline-action-form{display:inline-block;margin:0}.leave-bar{height:7px;border-radius:99px;background:#e2e8f0;overflow:hidden;display:flex;margin-top:6px}.leave-bar-work{background:#10b981;height:100%}.leave-bar-off{background:#f59e0b;height:100%} /* V1.10 - task parent chooser + compact contract overview */ .contract-overview-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(210px,.85fr) minmax(220px,.72fr);gap:16px;align-items:start}.contract-money-col{border-left:1px solid var(--b);padding-left:14px}.mini-money{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid #eef2f7}.mini-money span{color:var(--muted);font-size:12px}.mini-money b{font-size:14px;text-align:right}.mini-money.total b{color:var(--p);font-size:16px}.mini-money.paid b{color:#047857}.compact-debt-btn{margin-top:9px;padding:6px 9px;font-size:12px}.contract-task-inline{border-top:1px solid var(--b);margin-top:14px;padding-top:12px}.contract-task-inline h3{margin:0 0 5px}.popup-entity-details p{margin:7px 0}@media(max-width:1050px){.contract-overview-grid{grid-template-columns:1fr 1fr}.contract-money-col{grid-column:1/-1;border-left:0;border-top:1px solid var(--b);padding:10px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 12px}.compact-debt-btn{align-self:end}}@media(max-width:650px){.contract-overview-grid{grid-template-columns:1fr;gap:8px}.contract-money-col{grid-column:auto;display:block;border-top:1px solid var(--b);padding-top:8px}.contract-people-col{border-top:1px solid var(--b);padding-top:6px}.contract-overview-card{padding:11px}} /* V1.11 - Employee evaluations */ .eval-question-row{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid #e5e7eb;align-items:flex-start}.eval-question-row:last-child{border-bottom:0}.eval-fill-q{padding:14px 0;border-bottom:1px solid #e5e7eb}.eval-fill-q>label:first-child{display:block;margin-bottom:8px}.radio-line{display:block!important;font-weight:400!important;margin:6px 0}.radio-line input{width:auto;margin-right:6px}.eval-score-summary{padding:14px;margin:16px 0;background:#f8fafc;border-radius:10px;font-size:16px}.danger-text{color:#dc2626}.compact-line{line-height:1.8} @media(max-width:700px){.eval-question-row{display:block}.eval-question-row>div:last-child{margin-top:10px}} /* B1.2 - click-to-edit */ .inline-editable{display:inline-block;min-width:18px;padding:1px 4px;margin:-1px -4px;border-radius:5px;cursor:text;border:1px dashed transparent;transition:.15s;background:transparent}.inline-editable:hover,.inline-editable:focus{background:#f0fdfa;border-color:#99f6e4;outline:none}.inline-editable:after{content:' ✎';font-size:10px;color:#94a3b8;opacity:0}.inline-editable:hover:after,.inline-editable:focus:after{opacity:1}.inline-empty{color:#94a3b8;font-style:italic}.inline-editor{display:inline-flex;align-items:flex-start;gap:4px;max-width:100%;vertical-align:top}.inline-editor input,.inline-editor select,.inline-editor textarea{width:auto;min-width:180px;max-width:min(520px,70vw);padding:6px 8px;margin:0;font-size:13px}.inline-editor textarea{width:min(520px,70vw);min-height:82px}.inline-editor .inline-save,.inline-editor .inline-cancel{border:0;border-radius:5px;padding:6px 8px;cursor:pointer;font-weight:700}.inline-editor .inline-save{background:var(--p);color:#fff}.inline-editor .inline-cancel{background:#e2e8f0;color:#334155}.inline-saving{opacity:.55;pointer-events:none}.inline-edit-error{color:#dc2626;font-size:11px;margin-left:5px}.editable-meta-line{display:flex;gap:14px;flex-wrap:wrap;margin:0 0 10px;color:var(--muted)} @media(max-width:650px){.inline-editor{display:flex;width:100%;flex-wrap:wrap}.inline-editor input,.inline-editor select,.inline-editor textarea{min-width:0;width:100%;max-width:100%}} /* B1.4 - Global Search */ .global-search-top{width:min(380px,34vw);height:38px;display:flex;align-items:center;border:1px solid var(--b);border-radius:10px;background:#f8fafc;overflow:hidden;transition:.15s}.global-search-top:focus-within{background:#fff;border-color:#94a3b8;box-shadow:0 0 0 3px rgba(15,118,110,.08)}.global-search-top>i{margin-left:12px;color:#64748b;font-size:14px}.global-search-top input{border:0;background:transparent;box-shadow:none;border-radius:0;padding:7px 9px;min-width:0;height:36px}.global-search-top input:focus{outline:0}.global-search-top button{height:100%;border:0;border-left:1px solid var(--b);background:#fff;color:var(--p);font-weight:800;padding:0 13px;cursor:pointer}.global-search-top button:hover{background:#ecfdf5}.global-search-hero{background:linear-gradient(135deg,#fff,#f8fafc);border:1px solid var(--b);border-radius:14px;padding:18px;margin-bottom:14px}.global-search-hero-box{display:flex;align-items:center;gap:0;border:1px solid #cbd5e1;border-radius:12px;background:#fff;overflow:hidden;box-shadow:0 4px 18px rgba(15,23,42,.04)}.global-search-hero-box>i{font-size:19px;color:#64748b;margin-left:15px}.global-search-hero-box input{border:0;border-radius:0;font-size:16px;padding:13px 12px;min-width:0}.global-search-hero-box input:focus{outline:0;box-shadow:none}.global-search-hero-box .btn{border-radius:0;height:48px;min-width:110px}.global-search-help{font-size:12px;color:var(--muted);margin-top:9px}.global-search-summary{display:grid;grid-template-columns:180px 160px minmax(260px,1fr);gap:10px;margin-bottom:12px}.global-search-summary>div{background:#fff;border:1px solid var(--b);border-radius:10px;padding:11px 13px}.global-search-summary b{font-size:19px;display:block}.global-search-summary span{font-size:11px;color:var(--muted)}.global-search-query b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.global-search-tabs{display:flex;gap:7px;overflow-x:auto;padding:2px 0 10px;margin-bottom:3px}.global-search-tabs a{flex:0 0 auto;display:flex;align-items:center;gap:6px;text-decoration:none;color:#475569;background:#fff;border:1px solid var(--b);padding:7px 10px;border-radius:99px;font-size:12px;font-weight:700}.global-search-tabs a:hover,.global-search-tabs a.active{border-color:var(--p);background:#ecfdf5;color:var(--p)}.global-search-tabs span{min-width:19px;height:19px;border-radius:99px;padding:0 5px;background:#f1f5f9;display:grid;place-items:center;font-size:10px}.global-search-groups{display:grid;gap:14px}.global-search-group{background:#fff;border:1px solid var(--b);border-radius:13px;overflow:hidden}.global-search-group-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-bottom:1px solid #eef2f7;background:#fbfdff}.global-search-group-head>div{display:flex;align-items:center;gap:10px}.global-search-group-head h2{font-size:16px;margin:0}.global-search-group-head small{color:var(--muted)}.global-search-group-head>a{text-decoration:none;font-size:12px;font-weight:700}.global-search-group-icon{width:34px;height:34px;border-radius:9px;background:#ecfdf5;color:var(--p);display:grid;place-items:center;font-size:15px}.global-search-list{display:flex;flex-direction:column}.global-search-result{display:flex;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid #f1f5f9;color:var(--t);text-decoration:none;transition:.12s}.global-search-result:last-child{border-bottom:0}.global-search-result:hover{background:#f8fafc}.global-search-result-main{min-width:0;flex:1}.global-search-result-title{display:flex;align-items:center;gap:8px;min-width:0}.global-search-result-title b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.global-search-code{flex:0 0 auto;font-size:11px;font-weight:800;color:var(--p);background:#ecfdf5;border-radius:6px;padding:2px 6px}.global-search-subtitle{font-size:12px;color:#475569;margin-top:3px}.global-search-snippet{font-size:12px;color:var(--muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.global-search-meta{flex:0 0 auto;max-width:250px;font-size:12px;font-weight:700;color:#334155;text-align:right}.global-search-arrow{color:#94a3b8;font-size:12px}.global-search-result mark{background:#fef3c7;color:#92400e;border-radius:3px;padding:0 1px}.global-search-empty{text-align:center;padding:38px 20px;color:#475569}.global-search-empty>i{font-size:34px;color:#94a3b8}.global-search-empty h3{margin:10px 0 4px;color:#111827}.global-search-empty p{margin:0 auto;max-width:650px} @media(max-width:1050px){.global-search-top{width:min(310px,32vw)}.global-search-summary{grid-template-columns:1fr 1fr}.global-search-query{grid-column:1/-1}} @media(max-width:760px){.global-search-top{width:min(220px,42vw);background:#fff}.global-search-top>i{margin-left:10px}.global-search-top input{display:block;padding-left:7px}.global-search-top button{display:none}.global-search-summary{grid-template-columns:1fr 1fr}.global-search-hero{padding:12px}.global-search-result{align-items:flex-start;padding:10px 11px}.global-search-result-title{display:block}.global-search-code{display:inline-block;margin-bottom:3px}.global-search-result-title b{display:block;white-space:normal}.global-search-snippet{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.global-search-meta{display:none}.global-search-arrow{margin-top:4px}} @media(max-width:500px){.global-search-summary{grid-template-columns:1fr 1fr}.global-search-summary>div{padding:9px}.global-search-summary b{font-size:16px}.global-search-hero-box .btn{min-width:78px;padding:8px}.global-search-hero-box input{font-size:14px}.attendance-top-btn{display:none}} /* B1.5 - Global Search: rõ vị trí khớp và ngữ cảnh liên quan */ .global-search-result-rich{align-items:flex-start;padding:14px 15px;gap:14px} .global-search-result-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px} .global-search-result-rich .global-search-result-title{flex:1;min-width:0;align-items:flex-start} .global-search-result-rich .global-search-result-title b{white-space:normal;line-height:1.45} .global-search-status{flex:0 0 auto;font-size:11px;font-weight:800;color:#475569;background:#f1f5f9;border:1px solid #e2e8f0;border-radius:99px;padding:3px 8px;max-width:220px;text-align:right} .global-search-match-list{display:grid;gap:7px;margin-top:9px} .global-search-match{display:grid;grid-template-columns:minmax(130px,185px) minmax(0,1fr);gap:9px;align-items:start;background:#fffbeb;border:1px solid #fde68a;border-radius:9px;padding:8px 10px} .global-search-match-label{font-size:11px;font-weight:800;color:#92400e;display:flex;align-items:center;gap:5px} .global-search-match-label i{font-size:10px} .global-search-match-text{font-size:12px;color:#334155;line-height:1.5;overflow-wrap:anywhere} .global-search-match-text mark{font-weight:800} .global-search-related{display:flex;gap:9px;align-items:flex-start;margin-top:9px;padding-top:8px;border-top:1px dashed #e2e8f0} .global-search-related-title{flex:0 0 auto;font-size:10px;text-transform:uppercase;letter-spacing:.04em;font-weight:800;color:#94a3b8;padding-top:3px} .global-search-related-items{display:flex;flex-wrap:wrap;gap:5px 8px;min-width:0} .global-search-related-items>span{font-size:11px;color:#64748b;background:#f8fafc;border:1px solid #edf2f7;border-radius:6px;padding:3px 6px;max-width:100%;overflow-wrap:anywhere} .global-search-related-items b{color:#475569} .global-search-result-rich .global-search-arrow{align-self:center;margin-left:2px} @media(max-width:760px){ .global-search-result-head{display:block}.global-search-status{display:inline-block;margin-top:5px} .global-search-match{grid-template-columns:1fr;gap:3px;padding:7px 8px} .global-search-related{display:block}.global-search-related-title{display:block;margin-bottom:5px} .global-search-related-items{display:grid;gap:4px}.global-search-related-items>span{width:100%} .global-search-result-rich .global-search-arrow{margin-top:7px} } /* B1.6: form Cơ hội/Hợp đồng gọn 2 cột + tạo nhanh Khách hàng */ .entity-form-columns{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px}.entity-form-col{min-width:0}.entity-form-col h3,.entity-fees h3{font-size:15px;margin:0 0 10px;padding-bottom:8px;border-bottom:1px solid var(--b)}.entity-form-col input,.entity-form-col select,.entity-form-col textarea{max-width:100%}.entity-form-col textarea{min-height:82px}.compact-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.entity-fees{width:100%;margin-top:20px;padding-top:15px;border-top:1px solid var(--b)}.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.customer-select-row{display:flex;align-items:stretch;gap:7px}.customer-select-row select{flex:1;min-width:0}.customer-add-btn{width:40px;min-width:40px;padding:0;font-size:22px;line-height:1}.form-actions{display:flex;gap:8px;align-items:center;margin-top:16px}.form-status-note{background:#f8fafc;border:1px dashed #cbd5e1;border-radius:8px;padding:9px 10px;margin-top:12px}.customer-quick-modal-box{width:min(900px,calc(100% - 28px))}.quick-customer-form .form-actions{justify-content:flex-end} @media(max-width:850px){.entity-form-columns{grid-template-columns:1fr;gap:18px}.grid3{grid-template-columns:1fr 1fr}.entity-form-col h3{margin-top:4px}}@media(max-width:650px){.compact-form-grid,.grid3{grid-template-columns:1fr}.customer-select-row{align-items:stretch}.customer-add-btn{height:auto;min-height:40px}} /* B1.7 - form người liên hệ khi tạo khách hàng */ .quick-contact-section{margin-top:18px;padding-top:14px;border-top:1px solid #e5e7eb}.quick-contact-section h3{margin:0 0 4px}.quick-contact-section .grid,.quick-contact-section .grid2{margin-top:10px} /* B1.8 - Customer 360 / Báo cáo khách hàng */ .customer-report-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin:0 0 16px}.customer-report-head h2{margin:2px 0 3px;font-size:26px;line-height:1.2}.customer-report-kicker{font-size:11px;font-weight:800;letter-spacing:.13em;color:var(--p)}.customer-report-head .quick-actions{margin:0;justify-content:flex-end}.customer-kpi-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-bottom:14px}.customer-kpi{background:#fff;border:1px solid var(--b);border-radius:12px;padding:13px 12px;display:flex;align-items:center;gap:10px;min-width:0}.customer-kpi-icon{width:34px;height:34px;border-radius:10px;background:#eef6f5;color:var(--p);display:grid;place-items:center;flex:0 0 auto}.customer-kpi small{display:block;color:var(--muted);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.customer-kpi b{display:block;font-size:16px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.customer-kpi.is-danger{border-color:#fecaca;background:#fff7f7}.customer-kpi.is-danger .customer-kpi-icon,.customer-kpi.is-danger b{color:#b91c1c}.customer-report-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(330px,.65fr);gap:14px}.customer-report-grid>.card{min-width:0}.customer-report-top{align-items:stretch}.section-title{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}.section-title h3{margin:0;font-size:17px}.section-title span{display:block;color:var(--muted);font-size:12px;margin-top:2px}.customer-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}.customer-info-grid>div{padding:9px 0;border-bottom:1px dashed #e5e7eb;min-width:0}.customer-info-grid .span2{grid-column:1/-1}.customer-info-grid span{display:block;color:var(--muted);font-size:11px;margin-bottom:3px}.customer-info-grid b{font-size:13px;font-weight:650;word-break:break-word}.customer-contact-list{display:flex;flex-direction:column;gap:9px}.customer-contact-item{display:flex;gap:10px;padding:10px;border:1px solid #edf0f3;border-radius:10px;background:#fafbfc}.contact-avatar{width:34px;height:34px;border-radius:50%;background:#eef6f5;color:var(--p);display:grid;place-items:center;font-weight:800;flex:0 0 auto}.customer-contact-item>div:last-child{min-width:0}.customer-contact-item b,.customer-contact-item span,.customer-contact-item small{display:block}.customer-contact-item span{color:#4b5563;font-size:12px}.customer-contact-item small{color:var(--muted);margin-top:2px;overflow-wrap:anywhere}.bar-chart{padding-top:2px}.bar-chart-legend{display:flex;gap:16px;font-size:11px;color:var(--muted);margin-bottom:10px}.bar-chart-legend span{display:flex;align-items:center;gap:6px}.bar-chart-legend i{width:11px;height:7px;border-radius:4px;background:var(--p)}.bar-chart-legend .legend-paid{background:var(--p2)}.bar-row{display:grid;grid-template-columns:42px minmax(120px,1fr) 110px;align-items:center;gap:8px;margin:9px 0}.bar-year{font-weight:700;font-size:12px}.bar-track{height:24px;background:#f3f4f6;border-radius:7px;position:relative;overflow:hidden}.bar-value{position:absolute;left:0;height:9px;border-radius:0 5px 5px 0;min-width:1px}.bar-revenue{top:3px;background:var(--p)}.bar-paid{bottom:3px;background:var(--p2)}.bar-label{text-align:right;font-size:11px;color:#4b5563;white-space:nowrap}.contract-year-chart{height:210px;display:flex;align-items:flex-end;gap:10px;padding:18px 8px 0;border-bottom:1px solid #e5e7eb}.contract-year-col{height:100%;flex:1;min-width:32px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end}.contract-year-col>b{font-size:12px;margin-bottom:5px}.contract-year-bar{height:145px;width:24px;background:#f3f4f6;border-radius:7px 7px 0 0;display:flex;align-items:flex-end;overflow:hidden}.contract-year-bar i{display:block;width:100%;background:var(--p);border-radius:7px 7px 0 0}.contract-year-col>span{font-size:11px;color:var(--muted);padding:7px 0}.payment-health{display:flex;align-items:center;gap:24px;min-height:175px}.payment-donut{--ontime:0;width:132px;height:132px;border-radius:50%;background:conic-gradient(var(--p) calc(var(--ontime)*1%),#f1b45f 0);display:grid;place-items:center;flex:0 0 auto;position:relative}.payment-donut:after{content:"";position:absolute;width:92px;height:92px;border-radius:50%;background:#fff}.payment-donut>div{position:relative;z-index:1;text-align:center}.payment-donut b{display:block;font-size:23px}.payment-donut span{display:block;color:var(--muted);font-size:11px}.payment-health-stats{flex:1}.payment-health-stats>div{padding:8px 0;border-bottom:1px dashed #e5e7eb}.payment-health-stats span{display:block;color:var(--muted);font-size:11px}.payment-health-stats b{font-size:13px}.finance-mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.finance-mini-grid>div{background:#f8fafc;border:1px solid #edf0f3;border-radius:10px;padding:13px}.finance-mini-grid span{display:block;color:var(--muted);font-size:11px}.finance-mini-grid b{display:block;margin-top:5px;font-size:17px}.customer-report-table th{white-space:nowrap}.customer-report-table td{vertical-align:top}.late-text{color:#b91c1c;font-weight:700;font-size:11px}.payment-badge{display:inline-flex;padding:3px 8px;border-radius:999px;font-size:11px;font-weight:700;white-space:nowrap}.payment-badge.ontime{background:#ecfdf5;color:#047857}.payment-badge.late{background:#fff1f2;color:#be123c} @media(max-width:1250px){.customer-kpi-grid{grid-template-columns:repeat(4,minmax(0,1fr))}} @media(max-width:900px){.customer-report-head{align-items:flex-start;flex-direction:column}.customer-report-head .quick-actions{justify-content:flex-start}.customer-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.customer-report-grid{grid-template-columns:1fr}.customer-info-grid{grid-template-columns:1fr}.customer-info-grid .span2{grid-column:auto}.payment-health{align-items:flex-start}.bar-row{grid-template-columns:38px minmax(100px,1fr) 86px}} @media(max-width:560px){.customer-kpi-grid{grid-template-columns:1fr 1fr}.customer-kpi{padding:10px}.customer-kpi-icon{display:none}.customer-kpi b{font-size:14px}.payment-health{flex-direction:column}.payment-donut{margin:auto}.finance-mini-grid{grid-template-columns:1fr}.bar-label{display:none}.bar-row{grid-template-columns:38px 1fr}.contract-year-chart{gap:5px;overflow-x:auto;justify-content:flex-start}.contract-year-col{min-width:42px}} /* B1.8.1 - Compact Customer 360 */ .customer-report-top{grid-template-columns:minmax(0,1fr) minmax(360px,.48fr)} .customer-profile-card .section-title.compact-title{margin-bottom:6px} .customer-info-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:0 16px} .customer-info-grid>div{padding:7px 0} .customer-info-grid .span2{grid-column:auto} .customer-contact-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .customer-contact-item{padding:9px;align-items:center} .customer-contact-lines{min-width:0;line-height:1.3} .contact-line-1,.contact-line-2{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .contact-line-1 b,.contact-line-1 span{display:inline!important} .contact-line-1 span{margin-left:7px;color:#4b5563;font-size:12px} .contact-line-2{margin-top:3px;color:var(--muted);font-size:12px} .compact-inline-form{margin-top:8px;padding-top:10px} .compact-form-grid{display:grid;gap:8px} .compact-form-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))} .compact-inline-form input,.compact-inline-form select,.compact-inline-form textarea{margin:0;min-width:0} .compact-inline-form textarea{min-height:42px;resize:vertical} .compact-form-actions{display:flex;gap:8px;align-items:center;margin-top:9px} .compact-span-2{grid-column:span 2} .editable-row{padding-top:5px;padding-bottom:5px} .editable-row p{line-height:1.35} .compact-care-card{margin-top:14px} .care-compact-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px} .care-compact-grid label{margin-top:0} .care-compact-grid select,.care-compact-grid input,.care-compact-grid textarea{margin-bottom:0} .care-body{grid-column:1/-1} .care-compact-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px} .care-compact-actions .checkbox-line{margin:0} @media(max-width:1100px){.customer-info-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.customer-contact-list{grid-template-columns:1fr}.compact-form-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}.compact-span-2{grid-column:auto}} @media(max-width:700px){.customer-info-grid,.compact-form-grid-3,.care-compact-grid{grid-template-columns:1fr}.care-body{grid-column:auto}.care-compact-actions{align-items:flex-start;flex-direction:column}.customer-report-top{grid-template-columns:1fr}} /* B1.8.2 - Customer 360 compact header/contact corrections */ .customer-report-name{color:var(--p)!important;margin:0 0 5px;font-size:24px;line-height:1.2;text-transform:uppercase} .customer-contact-list{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:8px!important} .customer-contact-item{width:100%!important;max-width:none!important;box-sizing:border-box} /* B1.8.3 - exact customer header/contact line fix */ .customer-contact-lines{flex:1;min-width:0} .contact-line-1,.contact-line-2{display:flex!important;align-items:center;min-width:0} .contact-line-1{gap:12px;white-space:nowrap} .contact-line-2{gap:7px;white-space:nowrap;margin-top:3px} .contact-line-1>span,.contact-line-1>b,.contact-line-1>b>span,.contact-line-2>span{display:inline-block!important;margin:0!important} .contact-line-1>b{min-width:0} .contact-line-2 .contact-sep{display:inline-block!important;flex:0 0 auto;color:var(--muted);line-height:1} .contact-line-2>.inline-editable,.contact-line-2>span:not(.contact-sep){min-width:0} /* B1.9 - Customer contract report */ .customer-contract-section{padding:0;overflow:hidden}.customer-contract-section>.section-title{padding:18px 18px 10px;margin:0} .customer-contract-table{min-width:1120px}.customer-contract-table th{background:#f7f9fb;color:#475569;font-size:12px;padding:11px 12px} .customer-contract-table td{padding:12px;border-bottom:1px solid #eef1f4;vertical-align:middle;font-size:12px} .customer-contract-table tr.contract-click-row{cursor:pointer;transition:background .15s ease}.customer-contract-table tr.contract-click-row:hover{background:#f8fbfb} .contract-title-cell{display:flex;align-items:center;gap:10px;min-width:230px}.contract-title-cell>div{min-width:0}.contract-title-cell b{display:block;font-size:13px;color:#172033}.contract-title-cell small{display:block;color:var(--muted);margin-top:3px} .contract-doc-icon{width:34px;height:34px;border-radius:8px;background:#eef6f5;color:var(--p);display:grid;place-items:center;flex:0 0 auto;font-size:17px} .contract-date{display:block;white-space:nowrap;line-height:1.5}.contract-progress-cell{display:flex;align-items:center;gap:8px;min-width:120px}.contract-progress-track{width:76px;height:8px;background:#e7edf2;border-radius:999px;overflow:hidden}.contract-progress-track i{height:100%;display:block;background:var(--p);border-radius:999px}.contract-progress-cell b{font-size:12px} .contract-person{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}.contract-person i{width:25px;height:25px;border-radius:50%;background:#eef2f5;display:grid;place-items:center;color:var(--p)} .contract-more{border:0;background:transparent;font-weight:800;font-size:15px;cursor:pointer;padding:6px 8px;border-radius:7px}.contract-more:hover{background:#eef2f5}.status-overdue{background:#fff1f2!important;color:#be123c!important} .contract-analytics-grid{align-items:stretch}.contract-value-chart{height:245px;display:flex;align-items:flex-end;gap:12px;padding:26px 8px 0;border-bottom:1px solid #e5e7eb} .contract-value-col{height:100%;flex:1;min-width:55px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center}.contract-value-amount{font-size:10px;color:#64748b;white-space:nowrap;margin-bottom:5px}.contract-value-track{height:165px;width:34px;background:#f2f5f7;border-radius:8px 8px 0 0;display:flex;align-items:flex-end;overflow:hidden}.contract-value-track i{display:block;width:100%;background:var(--p);border-radius:8px 8px 0 0}.contract-value-col>b{font-size:11px;padding:7px 0} .service-ratio-list{display:flex;flex-direction:column;gap:13px;padding-top:3px}.service-ratio-head{display:flex;justify-content:space-between;gap:12px;align-items:center}.service-ratio-head b{font-size:12px}.service-ratio-head span{font-size:11px;color:var(--muted);white-space:nowrap}.service-ratio-track{height:9px;background:#eef2f5;border-radius:999px;overflow:hidden;margin-top:6px}.service-ratio-track i{height:100%;display:block;background:var(--p);border-radius:999px} @media(max-width:900px){.contract-analytics-grid{grid-template-columns:1fr}.contract-value-chart{overflow-x:auto;justify-content:flex-start}.contract-value-col{flex:0 0 70px}} /* B1.9.1 - Service pie + combined yearly contracts/revenue */ .service-pie-card{overflow:hidden} .service-pie-layout{display:grid;grid-template-columns:240px minmax(0,1fr);align-items:center;gap:28px;padding:8px 4px 6px} .service-pie{width:210px;height:210px;border-radius:50%;position:relative;margin:auto;box-shadow:inset 0 0 0 1px rgba(15,23,42,.04)} .service-pie-hole{position:absolute;inset:46px;border-radius:50%;background:var(--card,#fff);display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 0 0 1px rgba(15,23,42,.04)} .service-pie-hole b{font-size:27px;line-height:1;color:#172033}.service-pie-hole span{font-size:11px;color:var(--muted);margin-top:4px} .service-pie-legend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px} .service-pie-legend-item{display:flex;align-items:flex-start;gap:8px;min-width:0} .service-pie-legend-item>i{width:10px;height:10px;border-radius:50%;flex:0 0 10px;margin-top:4px} .service-pie-legend-item div{min-width:0}.service-pie-legend-item b{display:block;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .service-pie-legend-item span{display:block;font-size:11px;color:var(--muted);margin-top:2px} .annual-contract-chart-card{overflow:hidden} .annual-dual-legend{display:flex;gap:20px;justify-content:flex-end;margin:-4px 2px 10px;font-size:11px;color:#64748b} .annual-dual-legend span{display:inline-flex;align-items:center;gap:6px} .annual-dual-legend i{width:10px;height:10px;border-radius:3px;display:inline-block} .annual-count-dot,.annual-count-bar{background:#94a3b8!important} .annual-revenue-dot,.annual-revenue-bar{background:var(--p)!important} .annual-dual-chart{height:285px;display:flex;align-items:flex-end;gap:18px;padding:12px 8px 0;border-bottom:1px solid #e5e7eb;overflow-x:auto} .annual-dual-group{height:100%;min-width:125px;flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center} .annual-dual-bars{height:235px;width:100%;display:flex;align-items:flex-end;justify-content:center;gap:10px} .annual-dual-bar-wrap{height:100%;width:48%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center} .annual-dual-bar-wrap>b{font-size:10px;color:#475569;white-space:nowrap;margin-bottom:5px;font-weight:600} .annual-dual-bar{width:38px;min-height:8px;border-radius:7px 7px 0 0;transition:opacity .15s ease} .annual-dual-bar:hover{opacity:.82} .annual-dual-group>strong{font-size:11px;padding:8px 0 7px;color:#334155} .annual-dual-note{font-size:10px;color:var(--muted);padding:8px 2px 0} @media(max-width:760px){ .service-pie-layout{grid-template-columns:1fr;gap:20px} .service-pie{width:190px;height:190px} .service-pie-hole{inset:42px} .service-pie-legend{grid-template-columns:1fr} .annual-dual-group{min-width:120px} } /* B1.10 - Customer charts 66/33 + Leave dashboard/calendar */ .customer-report-analytics-row{display:grid;grid-template-columns:minmax(0,2fr) minmax(280px,1fr);gap:14px;align-items:stretch} .customer-report-analytics-row .annual-contract-chart-card,.customer-report-analytics-row .service-pie-card{margin:0} .customer-report-analytics-row .service-pie-layout{grid-template-columns:1fr;gap:16px} .customer-report-analytics-row .service-pie{width:178px;height:178px} .customer-report-analytics-row .service-pie-hole{inset:39px} .customer-report-analytics-row .service-pie-legend{grid-template-columns:1fr;max-height:170px;overflow:auto;padding-right:4px} .leave-top-actions{margin-bottom:12px} .leave-balance-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px} .leave-balance-card{background:var(--card,#fff);border:1px solid #e6ebef;border-radius:14px;padding:15px;display:flex;gap:13px;align-items:center;min-width:0} .leave-balance-icon{width:54px;height:54px;border-radius:15px;display:grid;place-items:center;flex:0 0 54px;font-size:22px;background:#eef7fb;color:#0ea5e9} .leave-balance-sick .leave-balance-icon{background:#edf9f1;color:#16a34a}.leave-balance-personal .leave-balance-icon{background:#fff6e9;color:#f59e0b}.leave-balance-unpaid .leave-balance-icon{background:#f5f0ff;color:#7c3aed} .leave-balance-card h4{margin:0 0 4px;font-size:13px}.leave-balance-value{display:flex;align-items:baseline;gap:5px}.leave-balance-value b{font-size:27px;line-height:1;color:#172033}.leave-balance-value span{font-size:12px;color:#64748b}.leave-balance-card small{display:block;color:var(--muted);font-size:10px;margin-top:5px} .leave-main-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(280px,1fr);gap:14px;align-items:start;margin-bottom:14px} .leave-calendar-card,.team-leave-card{margin:0}.leave-calendar-card .section-title,.team-leave-card .section-title{align-items:center} .leave-calendar-nav{display:flex;align-items:center;gap:8px}.leave-calendar-nav a{width:30px;height:30px;border:1px solid #e3e8ec;border-radius:8px;display:grid;place-items:center;text-decoration:none;font-size:18px;color:#475569}.leave-calendar-nav b{font-size:12px;min-width:92px;text-align:center} .leave-calendar-week,.leave-calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))} .leave-calendar-week span{text-align:center;font-size:10px;font-weight:700;color:#64748b;padding:7px 2px;border-bottom:1px solid #e8edf0} .leave-calendar-day{min-height:104px;border-right:1px solid #edf1f3;border-bottom:1px solid #edf1f3;padding:6px;background:#fff;min-width:0}.leave-calendar-day:nth-child(7n){border-right:0}.leave-calendar-day.empty{background:#fafbfc}.leave-calendar-day.today{box-shadow:inset 0 0 0 2px var(--p)} .leave-calendar-date{font-size:11px;font-weight:700;color:#475569;margin-bottom:5px} .leave-calendar-event{display:block;text-decoration:none;border-radius:6px;padding:4px 5px;margin:3px 0;background:#eef7fb;color:#075985;overflow:hidden}.leave-calendar-event b,.leave-calendar-event span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.leave-calendar-event b{font-size:10px}.leave-calendar-event span{font-size:9px;opacity:.85;margin-top:1px} .leave-event-sick{background:#edf9f1;color:#166534}.leave-event-personal{background:#fff7e8;color:#92400e}.leave-event-unpaid{background:#f5f0ff;color:#6d28d9}.leave-calendar-more{font-size:9px;color:#64748b;padding-top:2px} .team-leave-list{display:flex;flex-direction:column;gap:7px;max-height:520px;overflow:auto} .team-leave-item{display:flex;gap:9px;padding:9px;border:1px solid #edf1f3;border-radius:10px;text-decoration:none;color:inherit}.team-leave-item:hover{background:#f8fafb} .team-leave-avatar{width:34px;height:34px;border-radius:50%;background:#eef7f6;color:var(--p);display:grid;place-items:center;font-weight:700;flex:0 0 34px} .team-leave-item>div:last-child{min-width:0}.team-leave-item b,.team-leave-item span,.team-leave-item small{display:block}.team-leave-item b{font-size:12px}.team-leave-item span{font-size:10px;color:var(--p);margin-top:2px}.team-leave-item small{font-size:9px;color:var(--muted);margin-top:3px;line-height:1.35} @media(max-width:1050px){.leave-balance-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.customer-report-analytics-row,.leave-main-grid{grid-template-columns:1fr}} @media(max-width:650px){.leave-balance-grid{grid-template-columns:1fr}.leave-calendar-card{overflow-x:auto}.leave-calendar-week,.leave-calendar-grid{min-width:720px}.leave-balance-card{padding:12px}} /* B1.10.1 - Fix chart row + move leave calendar/team block to bottom */ .customer-report-analytics-row{ display:grid!important; grid-template-columns:minmax(0,2fr) minmax(280px,1fr)!important; gap:14px!important; align-items:stretch!important; margin-bottom:14px; } .customer-report-analytics-row>.annual-contract-chart-card{ grid-column:1!important; width:auto!important; min-width:0; } .customer-report-analytics-row>.service-pie-card{ grid-column:2!important; width:auto!important; min-width:0; } .leave-main-grid{margin-top:14px} @media(max-width:1050px){ .customer-report-analytics-row{grid-template-columns:1fr!important} .customer-report-analytics-row>.annual-contract-chart-card, .customer-report-analytics-row>.service-pie-card{grid-column:1!important} } /* B1.10.3 - Leave 24-hour time fields */ .leave-request-form .time-24h{font-variant-numeric:tabular-nums;letter-spacing:.4px} .leave-request-form label .muted{font-weight:400;font-size:11px} /* B1.10.4 - Compact leave datetime + inline approval */ .leave-request-form .leave-datetime-inline{ display:grid; grid-template-columns:minmax(150px,1fr) 82px; gap:7px; align-items:center; } .leave-request-form .leave-datetime-inline input{min-width:0;width:100%} .leave-request-form .leave-datetime-inline .time-24h{text-align:center} .leave-inline-actions{display:flex;align-items:center;gap:6px;white-space:nowrap} .leave-inline-actions .btn{padding:6px 10px;font-size:11px;margin:0} .leave-request-table td:last-child{width:150px} @media(max-width:650px){ .leave-request-form .leave-datetime-inline{grid-template-columns:minmax(0,1fr) 76px} } /* B1.10.5 - Precise partial-day leave forecast + approver identity */ .leave-off-full{margin-top:7px} .leave-off-partial{ display:flex; flex-direction:column; gap:1px; margin-top:6px; padding:6px 8px; border-radius:8px; background:rgba(0,0,0,.035); } .leave-off-partial b{font-size:11px} .leave-off-partial span{font-size:10px;opacity:.78} .leave-approver-list{display:flex;flex-direction:column;gap:6px;min-width:145px} .leave-approver-person{display:flex;align-items:center;gap:7px} .leave-approver-person img,.leave-approver-avatar{ width:28px;height:28px;border-radius:50%;object-fit:cover;flex:0 0 28px; } .leave-approver-avatar{ display:flex;align-items:center;justify-content:center; background:#eef1f5;font-size:11px;font-weight:700; } .leave-approver-person>div{display:flex;flex-direction:column;line-height:1.2} .leave-approver-person b{font-size:11px;white-space:nowrap} .leave-approver-person small{font-size:9px;opacity:.65;margin-top:2px} /* B1.11 - Nhập nhanh khách hàng */ .customer-smart-paste{margin:-2px 0 16px;padding:14px;border:1px dashed rgba(15,118,110,.35);border-radius:12px;background:rgba(15,118,110,.035)} .customer-smart-paste-head h3{margin:0 0 4px;font-size:15px} .customer-smart-paste-head .muted{font-size:11px;line-height:1.45} .customer-smart-paste textarea{width:100%;margin-top:10px;min-height:128px;resize:vertical;font-family:inherit;line-height:1.45} .customer-smart-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px} .customer-smart-result{font-size:11px} @media(max-width:650px){.customer-smart-paste{padding:11px}.customer-smart-actions .btn{flex:1 1 auto}} .customer-create-form .smart-filled{outline:2px solid rgba(15,118,110,.22);outline-offset:-2px;background:rgba(15,118,110,.035)} /* B1.11.3 - Tiêu đề và nút thêm mới cùng một hàng */ .page-title-actions{display:flex;align-items:center;justify-content:space-between;gap:14px} .page-title-actions h1{margin:0} .page-title-actions-right{display:flex;align-items:center;gap:8px;margin-left:auto} @media(max-width:520px){ .page-title-actions{gap:10px} .page-title-actions h1{font-size:25px} .page-title-actions-right .btn{padding-left:12px;padding-right:12px;white-space:nowrap} } /* B1.12 - Customer company/person form */ .customer-create-form .form-subtitle{margin:18px 0 8px;font-size:15px} .customer-create-form [data-company-only]{transition:opacity .15s ease} .customer-create-form [data-contact-match-note]{margin-top:7px;min-height:16px} .customer-create-form .smart-filled{outline:2px solid rgba(15,118,110,.22);outline-offset:-2px} @media(max-width:720px){ .customer-create-form .grid3{grid-template-columns:1fr} } /* B1.12.3 - Form quản lý người liên hệ full width, 1 hàng */ .customer-contact-manage-card{width:100%;max-width:none} .contact-one-row-form{width:100%} .contact-one-row-grid{ display:grid; grid-template-columns:1.05fr 1.25fr 1fr 1.3fr 1fr 1.15fr auto; gap:8px; align-items:center; } .contact-one-row-grid input{min-width:0;width:100%} .contact-one-row-actions{display:flex;gap:7px;align-items:center;white-space:nowrap} .contact-one-row-actions .btn{margin:0} @media(max-width:1180px){ .contact-one-row-grid{grid-template-columns:repeat(3,minmax(0,1fr))} .contact-one-row-actions{grid-column:1/-1} } @media(max-width:640px){ .contact-one-row-grid{grid-template-columns:1fr} .contact-one-row-actions{grid-column:auto} } /* B1.12.4 - Form liên hệ trong tạo khách hàng: full width, một hàng, SĐT đầu tiên */ .customer-contact-create-full{width:100%;max-width:none} .customer-contact-create-row{ display:grid; grid-template-columns:1.05fr 1.3fr 1fr 1.35fr 1fr 1.15fr; gap:8px; align-items:end; } .customer-contact-create-row>div{min-width:0} .customer-contact-create-row input{width:100%;min-width:0} .contact-match-note{margin-top:7px;min-height:16px} @media(max-width:1180px){ .customer-contact-create-row{grid-template-columns:repeat(3,minmax(0,1fr))} } @media(max-width:640px){ .customer-contact-create-row{grid-template-columns:1fr} } /* B1.12.5 - Smart Paste chỉ 2 dòng và chuẩn hóa title/actions cho trang danh sách */ .customer-smart-paste textarea{ min-height:54px !important; height:54px; max-height:54px; resize:none; line-height:1.35; } .page-title-actions{width:100%;margin-bottom:16px;min-height:40px} .page-title-actions-right{justify-content:flex-end;flex-wrap:wrap} .page-title-actions-right .btn{margin:0;white-space:nowrap} @media(max-width:700px){ .page-title-actions{align-items:flex-start;gap:8px} .page-title-actions h1{font-size:22px;line-height:1.25} .page-title-actions-right{gap:6px} .page-title-actions-right .btn{padding:8px 10px;font-size:12px} } /* B1.12.6 - Nhãn bộ lọc nằm trong input/select để tiết kiệm chiều cao */ .filters.toolbar .filter-label-inside{display:none} .filters.toolbar .filter-compact-inside{display:flex;align-items:end} .filters.toolbar .filter-compact-inside>input, .filters.toolbar .filter-compact-inside>select{margin:0} /* B1.12.10 - 6 KPI phủ đủ 100% chiều rộng và quản lý có thể đổi bởi Admin */ .customer-manager-head .inline-editable{font-weight:700;color:var(--p);cursor:pointer} .customer-manager-hint{font-size:10px;opacity:.75} @media(max-width:1250px){.customer-kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:900px){.customer-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} /* B1.12.12 - Chi tiết Cơ hội/Hợp đồng trực quan */ .entity-detail-title{margin-bottom:12px}.entity-detail-title h1{margin:0}.entity-detail-subtitle{font-size:18px;font-weight:600;margin-top:4px} .entity-overview-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:12px 0 16px} .entity-overview-grid>div{background:#fff;border:1px solid #e8edf3;border-radius:12px;padding:14px 16px;min-width:0} .entity-overview-grid span{display:block;font-size:12px;color:#64748b;margin-bottom:6px}.entity-overview-grid b{font-size:17px} .entity-detail-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,.95fr);gap:14px} .entity-detail-card{margin-bottom:14px}.entity-detail-card h3{margin-top:0;border-bottom:1px solid #edf1f5;padding-bottom:10px} .detail-kv-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px 24px}.detail-kv-grid span{display:block;color:#64748b;font-size:12px}.detail-kv-grid b{display:block;margin-top:3px} .entity-content-text{line-height:1.7}.contact-profile{display:flex;align-items:center;gap:10px}.contact-avatar{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#eef2ff;font-weight:700} .contact-profile small,.list-contact small{display:block;color:#64748b;margin-top:2px}.contact-lines{display:grid;gap:8px;margin-top:12px} .opportunity-stage-track{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.opportunity-stage-track form{margin:0}.stage-step{width:100%;border:1px solid #dbe3ec;background:#f8fafc;border-radius:9px;padding:10px 7px;cursor:pointer}.stage-step.active{font-weight:700;border-color:#2563eb;background:#eff6ff}.stage-step:disabled{cursor:default;opacity:.65} .entity-task-list{display:grid;gap:7px}.entity-task-row{display:flex;justify-content:space-between;gap:8px;padding:9px 0;border-bottom:1px solid #eef2f6;text-decoration:none}.entity-task-row small{display:block;color:#64748b;margin-top:3px}.entity-deadline{margin-top:12px;padding-top:10px;border-top:1px solid #eef2f6} .document-link-row{display:flex;justify-content:space-between;gap:8px;padding:9px 0;border-bottom:1px solid #eef2f6}.document-link-row form{margin:0}.link-delete{border:0;background:none;font-size:20px;cursor:pointer}.document-link-form{display:grid;grid-template-columns:1fr 1.5fr auto;gap:7px;margin-top:10px} .list-contact{min-width:150px}.legacy-entity-actions{margin-top:14px} @media(max-width:1100px){.entity-overview-grid{grid-template-columns:repeat(3,1fr)}.entity-detail-layout{grid-template-columns:1fr}} @media(max-width:700px){.entity-overview-grid{grid-template-columns:repeat(2,1fr)}.detail-kv-grid{grid-template-columns:1fr}.opportunity-stage-track{grid-template-columns:repeat(2,1fr)}.document-link-form{grid-template-columns:1fr}} /* B1.12.12.2 - Gộp thông tin Cơ hội/Hợp đồng, bỏ khối lặp phía dưới */ .entity-basic-finance{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:14px;padding-top:14px;border-top:1px solid #edf1f5} .entity-basic-finance>div{background:#f8fafc;border-radius:9px;padding:10px 12px;min-width:0} .entity-basic-finance span{display:block;color:#64748b;font-size:11px;margin-bottom:4px} .entity-basic-finance b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} @media(max-width:700px){.entity-basic-finance{grid-template-columns:repeat(2,minmax(0,1fr))}} /* B1.12.12.3 - KPI Cơ hội có màu và thông tin cơ bản ưu tiên thông tin khách hàng */ .opportunity-overview-grid{grid-template-columns:repeat(5,minmax(0,1fr))} .opportunity-overview-grid .overview-card{position:relative;overflow:hidden} .opportunity-overview-grid .overview-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:12px 0 0 12px;background:#cbd5e1} .opportunity-overview-grid .overview-money{background:#fff7f7;border-color:#fecaca} .opportunity-overview-grid .overview-money:before{background:#ef4444} .opportunity-overview-grid .overview-money b{color:#dc2626} .opportunity-overview-grid .overview-probability{background:#f5f7ff;border-color:#dbe4ff} .opportunity-overview-grid .overview-probability:before{background:#6366f1} .opportunity-overview-grid .overview-probability b{color:#4f46e5} .opportunity-overview-grid .overview-stage{background:#f0f9ff;border-color:#bae6fd} .opportunity-overview-grid .overview-stage:before{background:#0ea5e9} .opportunity-overview-grid .overview-stage b{color:#0369a1} .opportunity-overview-grid .overview-date{background:#f0fdf4;border-color:#bbf7d0} .opportunity-overview-grid .overview-date:before{background:#22c55e} .opportunity-overview-grid .overview-date b{color:#15803d} .opportunity-overview-grid .overview-status{background:#f5fbfa;border-color:#cce8e4} .opportunity-overview-grid .overview-status:before{background:var(--p)} .opportunity-overview-grid .overview-status b{color:var(--p)} .entity-basic-divider{height:1px;background:#edf1f5;margin:14px 0} .opportunity-basic-customer>div:first-child{grid-column:span 2} @media(max-width:900px){.opportunity-overview-grid{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:700px){.opportunity-overview-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.opportunity-basic-customer>div:first-child{grid-column:auto}} /* B1.12.12.4 - KPI Hợp đồng có màu, liên hệ gọn trên một hàng */ .contract-overview-grid{grid-template-columns:repeat(5,minmax(0,1fr))} .contract-overview-grid .overview-card{position:relative;overflow:hidden} .contract-overview-grid .overview-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:12px 0 0 12px;background:#cbd5e1} .contract-overview-grid .contract-money{background:#fff7f7;border-color:#fecaca} .contract-overview-grid .contract-money:before{background:#ef4444} .contract-overview-grid .contract-money b{color:#dc2626} .contract-overview-grid .contract-progress{background:#f5f7ff;border-color:#dbe4ff} .contract-overview-grid .contract-progress:before{background:#6366f1} .contract-overview-grid .contract-progress b{color:#4f46e5} .contract-overview-grid .contract-start{background:#f0fdf4;border-color:#bbf7d0} .contract-overview-grid .contract-start:before{background:#22c55e} .contract-overview-grid .contract-start b{color:#15803d} .contract-overview-grid .contract-end{background:#fffaf0;border-color:#fde7b0} .contract-overview-grid .contract-end:before{background:#f59e0b} .contract-overview-grid .contract-end b{color:#b45309} .contract-overview-grid .contract-status{background:#f5fbfa;border-color:#cce8e4} .contract-overview-grid .contract-status:before{background:var(--p)} .contract-overview-grid .contract-status b{color:var(--p)} .contact-profile-inline{display:grid;grid-template-columns:44px minmax(120px,.8fr) minmax(210px,1.2fr);align-items:center;gap:12px} .contact-profile-inline .contact-person{min-width:0} .contact-profile-inline .contact-person b{display:block;font-size:16px} .contact-profile-inline .contact-person small{display:block;color:#64748b;margin-top:3px} .contact-inline-meta{display:grid;gap:8px;min-width:0} .contact-inline-meta span{display:flex;align-items:center;gap:8px;min-width:0;word-break:break-word} .contact-inline-meta i{color:var(--p);font-size:16px;flex:0 0 18px;text-align:center} @media(max-width:900px){.contract-overview-grid{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:700px){.contract-overview-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.contact-profile-inline{grid-template-columns:44px 1fr}.contact-inline-meta{grid-column:1/-1;padding-left:56px}} /* B1.12.12.5 - Thông tin cơ bản Cơ hội: nhãn và giá trị cùng một hàng */ .opportunity-basic-customer>div, .opportunity-basic-people>div{ display:grid; grid-template-columns:minmax(105px,38%) minmax(0,1fr); align-items:center; column-gap:10px; min-height:30px; } .opportunity-basic-customer>div>span, .opportunity-basic-people>div>span{ display:block; margin:0; white-space:nowrap; } .opportunity-basic-customer>div>b, .opportunity-basic-people>div>b{ display:block; margin:0; min-width:0; text-align:left; } .opportunity-basic-customer>div:first-child{ grid-column:span 2; } @media(max-width:700px){ .opportunity-basic-customer>div:first-child{grid-column:auto} .opportunity-basic-customer>div, .opportunity-basic-people>div{ grid-template-columns:minmax(100px,40%) minmax(0,1fr); } } /* B1.12.12.6 - Thông tin cơ bản Hợp đồng: nhãn và giá trị cùng một hàng */ .contract-basic-info>div{ display:grid; grid-template-columns:minmax(110px,38%) minmax(0,1fr); align-items:center; column-gap:10px; min-height:30px; } .contract-basic-info>div>span{ display:block; margin:0; white-space:nowrap; } .contract-basic-info>div>b{ display:block; margin:0; min-width:0; text-align:left; } @media(max-width:700px){ .contract-basic-info>div{ grid-template-columns:minmax(105px,40%) minmax(0,1fr); } } /* B1.12.12.7 - Ép Thông tin cơ bản Hợp đồng thành 1 hàng thật sự */ .contract-basic-info>div{ display:flex !important; align-items:center !important; gap:10px !important; min-height:30px; } .contract-basic-info>div>span{ flex:0 0 128px !important; width:128px !important; margin:0 !important; display:inline-block !important; white-space:nowrap; color:#64748b; } .contract-basic-info>div>b{ flex:1 1 auto !important; width:auto !important; min-width:0; margin:0 !important; display:inline-block !important; text-align:left; line-height:1.35; } .contract-basic-info>div>b>span, .contract-basic-info>div>b>a{ display:inline !important; margin:0 !important; } /* Khối chi phí Hợp đồng nổi bật hơn */ .entity-basic-finance{ gap:12px; } .entity-basic-finance>div{ padding:13px 14px; border:1px solid #ead7d7; background:#fffafa; } .entity-basic-finance span{ font-size:12px; font-weight:600; color:#64748b; margin-bottom:6px; } .entity-basic-finance b{ font-size:18px; line-height:1.25; color:#7f1d1d !important; font-weight:800; } .entity-basic-finance b .inline-editable{ color:#7f1d1d !important; } @media(max-width:700px){ .contract-basic-info>div>span{ flex-basis:115px !important; width:115px !important; } .entity-basic-finance b{font-size:16px} } /* B1.12.13 - Hợp đồng: tên trường và giá trị cùng hàng */ .contract-basic-info .contract-basic-row{display:flex!important;align-items:center!important;gap:10px!important;min-height:32px} .contract-basic-info .contract-basic-row>span{flex:0 0 130px!important;width:130px!important;margin:0!important;display:inline-block!important;white-space:nowrap} .contract-basic-info .contract-basic-row>b{flex:1 1 auto!important;min-width:0!important;margin:0!important;display:inline-block!important;line-height:1.35} .contract-basic-info .contract-basic-row>b>span, .contract-basic-info .contract-basic-row>b>a{display:inline!important;margin:0!important} /* Chi phí hợp đồng nổi bật hơn */ .entity-basic-finance>div{padding:14px 15px;background:#fff8f8;border:1px solid #ead1d1} .entity-basic-finance span{font-size:12px;font-weight:700} .entity-basic-finance b{font-size:19px!important;color:#7a1f1f!important;font-weight:800!important} .entity-basic-finance .inline-editable{color:#7a1f1f!important} /* B1.12.15 - Task planning / capacity */ .topbar-task-nav{display:flex;align-items:center;gap:4px;margin-left:8px} .topbar-task-nav a{padding:7px 9px;border-radius:7px;text-decoration:none;color:#334155;font-size:12px;font-weight:700;white-space:nowrap} .topbar-task-nav a:hover{background:#f1f5f9;color:var(--p)} .task-page-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-end;margin-bottom:22px} .task-page-head h1{margin:0 0 3px;font-size:30px}.task-page-head p{margin:0;color:#756b66} .task-head-tools,.capacity-toolbar,.date-nav{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap} .task-main-btn{background:#a9162d;border-color:#a9162d}.task-main-btn.full{display:block;width:100%;text-align:center;margin-top:10px} .task-inline-filter{display:flex;align-items:flex-end;gap:10px}.task-inline-filter label{display:block;font-size:12px;font-weight:700;margin-bottom:4px}.task-inline-filter input{min-width:240px} .task-running-list{display:grid;gap:12px}.task-running-card{display:flex;justify-content:space-between;align-items:center;gap:16px;border:1px solid #ddd6d2;background:#fff;border-radius:10px;padding:16px 20px;box-shadow:0 2px 6px #0000000a} .task-running-card.is-overdue{background:#fff0f0;border-color:#f19999}.task-running-title{font-size:18px;font-weight:800;color:#231f20;text-decoration:none}.task-running-meta{color:#756b66;margin-top:4px} .task-running-actions{display:flex;align-items:center;gap:10px;white-space:nowrap}.task-running-actions form{margin:0}.link-btn{border:0;background:none;color:#756b66;cursor:pointer;padding:0;font:inherit} .task-badge{display:inline-flex;align-items:center;padding:4px 9px;border-radius:999px;font-size:12px;font-weight:800;color:#fff}.task-badge.green{background:#2da44e}.task-badge.blue{background:#2575bf}.task-badge.red{background:#d71920}.task-badge.gray{background:#64748b} .date-nav input,.capacity-toolbar input,.capacity-toolbar select{height:40px}.week-label{min-width:150px;text-align:center;border:1px solid #ddd6d2;border-radius:7px;padding:6px 14px;background:#fff}.week-label small{display:block;color:#756b66} .capacity-day-card,.quick-task-box{background:#fff;border:1px solid #ddd6d2;border-radius:10px;padding:18px 20px;margin-bottom:18px;box-shadow:0 2px 6px #0000000a}.capacity-day-top{display:flex;justify-content:space-between;font-size:18px}.capacity-day-top strong{color:#a9162d}.capacity-line,.mini-capacity{height:7px;background:#f0ebe8;border-radius:99px;overflow:hidden;margin:14px 0 6px}.capacity-line span,.mini-capacity span{display:block;height:100%;background:#2da44e}.quick-task-box form{display:grid;grid-template-columns:minmax(0,1fr) 110px auto auto auto;gap:12px;align-items:end}.quick-task-box [data-task-block-open]{white-space:nowrap;padding-left:14px;padding-right:14px}.quick-task-box label{display:block;font-weight:700;margin-bottom:5px} .day-task-list{display:grid;gap:10px}.day-task-row{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid #ddd6d2;border-radius:9px;padding:13px 16px}.day-task-row>div:first-child{flex:1}.day-task-row small{display:block;color:#756b66}.hours-chip{background:#f0ebe8;border-radius:7px;padding:5px 10px;font-weight:700} .week-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.week-day-card{background:#fff;border:1px solid #ddd6d2;border-radius:10px;padding:14px;min-height:300px;box-shadow:0 2px 6px #0000000a}.week-day-card.is-weekend{border-color:#c99198}.week-day-card.is-over{border-color:#e16a70}.week-day-head{display:flex;justify-content:space-between;align-items:start}.week-day-head b{display:block;font-size:18px}.week-day-head small{display:block;color:#756b66}.week-day-head>span{font-size:11px;color:#2da44e}.week-day-head .danger{color:#d71920}.week-task-items{display:grid;gap:7px;margin-top:12px}.week-task-item{display:flex;justify-content:space-between;gap:7px;border:1px solid #e4ddda;border-radius:7px;padding:8px}.week-task-item b{font-size:12px}.week-task-item .task-badge{font-size:9px;padding:2px 5px;margin-top:4px}.more-tasks{text-align:center;border:1px dashed #e4ddda;padding:7px;font-size:11px;color:#a9162d} .capacity-legend{display:flex;gap:20px;margin:0 0 14px;font-size:12px}.capacity-legend .green{color:#2da44e}.capacity-legend .orange{color:#f28c18}.capacity-legend .red{color:#d71920}.capacity-legend .burgundy{color:#a9162d} .capacity-table-wrap{overflow:auto;background:#fff;border:1px solid #e4ddda;border-radius:9px}.capacity-table{min-width:1000px}.capacity-table th small{display:block;font-weight:400;color:#756b66}.capacity-cell{border:1px solid #e4ddda;border-radius:7px;padding:8px;min-width:92px}.capacity-cell>b{font-size:12px}.capacity-cell>span{display:block;height:6px;background:#f0ebe8;border-radius:99px;overflow:hidden;margin-top:8px}.capacity-cell i{display:block;height:100%;background:#2da44e}.capacity-cell.near i{background:#f28c18}.capacity-cell.over i{background:#d71920}.capacity-cell.over b{color:#d71920}.capacity-cell.ot i{background:#a9162d}.capacity-cell.ot b{color:#a9162d}.week-total{text-align:center}.week-total small{display:block;color:#a9162d} .report-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:14px}.report-kpis>div{background:#fff;border:1px solid #e4ddda;border-radius:8px;padding:14px}.report-kpis span{display:block;font-size:11px;color:#756b66}.report-kpis b{font-size:22px}.report-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.big-capacity-bar{height:28px;background:#f0ebe8;border-radius:6px;overflow:hidden;margin:25px 0 10px}.big-capacity-bar span{display:block;height:100%;background:#2da44e}.report-legend{display:flex;justify-content:space-between;font-size:12px}.person-fill{display:grid;grid-template-columns:120px 1fr 45px;align-items:center;gap:10px;margin:9px 0}.person-fill>div,.parent-hour-bars>div>div{height:8px;background:#f0ebe8;border-radius:99px;overflow:hidden}.person-fill i,.parent-hour-bars i{display:block;height:100%;background:#2da44e}.report-two-col{display:grid;grid-template-columns:1fr 1fr;gap:24px}.report-two-col p{display:flex;justify-content:space-between;border-bottom:1px solid #eee7e3;padding-bottom:7px}.parent-hour-bars>div{display:grid;grid-template-columns:140px 1fr 50px;align-items:center;gap:10px;margin:9px 0}.parent-hour-bars i{background:#a9162d} @media(max-width:1200px){.topbar-task-nav{display:none}.week-grid{grid-template-columns:repeat(3,1fr)}.report-kpis{grid-template-columns:repeat(3,1fr)}} @media(max-width:800px){.task-page-head{align-items:stretch;flex-direction:column}.task-running-card{align-items:flex-start;flex-direction:column}.week-grid{grid-template-columns:1fr 1fr}.quick-task-box form{grid-template-columns:1fr 90px}.report-grid,.report-two-col{grid-template-columns:1fr}.report-kpis{grid-template-columns:1fr 1fr}} @media(max-width:560px){.week-grid{grid-template-columns:1fr}.task-inline-filter{display:grid;width:100%}.task-inline-filter input{min-width:0}.report-kpis{grid-template-columns:1fr}} /* B1.12.16.2 - Đồng bộ chiều cao logo/topbar và dùng tông màu chính */ .brand{ height:64px !important; min-height:64px; background:var(--p); color:#fff !important; border-bottom:1px solid rgba(255,255,255,.18); } .brand span{color:#fff !important} .brand-mark{ background:rgba(255,255,255,.16); color:#fff; } .brand-logo{ background:#fff; padding:3px; border-radius:8px; } .topbar{ height:64px !important; min-height:64px; background:var(--p) !important; border-bottom:1px solid rgba(255,255,255,.18); color:#fff; } .topbar-task-nav a{ color:#fff !important; } .topbar-task-nav a:hover{ background:rgba(255,255,255,.14) !important; color:#fff !important; } .topbar .mobile-menu{ color:#fff; } .topbar .notify-btn{ color:#fff !important; background:rgba(255,255,255,.08) !important; border-color:rgba(255,255,255,.34) !important; } .topbar .notify-btn:hover{ background:rgba(255,255,255,.18) !important; } .topbar .attendance-top-btn i{ color:#fff !important; } .topbar .userbox, .topbar .userbox b, .topbar .userbox small, .topbar .userbox>a{ color:#fff !important; } .topbar .avatar-mini{ background:#fff !important; color:var(--p) !important; } .global-search-top{ background:rgba(255,255,255,.12) !important; border-color:rgba(255,255,255,.32) !important; } .global-search-top:focus-within{ background:rgba(255,255,255,.16) !important; border-color:rgba(255,255,255,.6) !important; box-shadow:0 0 0 3px rgba(255,255,255,.08) !important; } .global-search-top>i{ color:#fff !important; } .global-search-top input{ color:#fff !important; } .global-search-top input::placeholder{ color:rgba(255,255,255,.78) !important; } .global-search-top button{ background:rgba(255,255,255,.10) !important; color:#fff !important; border-left-color:rgba(255,255,255,.28) !important; } .global-search-top button:hover{ background:rgba(255,255,255,.18) !important; } /* Panel thông báo vẫn nền trắng, chữ tối để dễ đọc */ .topbar .notify-panel{ color:#111827; } .topbar .notify-panel a, .topbar .notify-panel b{ color:inherit; } /* B1.12.16.3 - Header tinh gọn: chỉ logo, search nền trắng, icon card có shadow */ .brand{ justify-content:flex-start; } .brand-logo{ background:transparent !important; padding:0 !important; border-radius:0 !important; box-shadow:none !important; } .brand-mark{ background:transparent !important; box-shadow:none !important; } /* Ô tìm kiếm tổng nền trắng rõ ràng */ .global-search-top{ background:#fff !important; border-color:rgba(255,255,255,.9) !important; box-shadow:0 3px 10px rgba(0,0,0,.10); } .global-search-top:focus-within{ background:#fff !important; border-color:#fff !important; box-shadow:0 4px 14px rgba(0,0,0,.14) !important; } .global-search-top>i{ color:#64748b !important; } .global-search-top input{ color:#111827 !important; } .global-search-top input::placeholder{ color:#94a3b8 !important; } .global-search-top button{ background:#fff !important; color:var(--p) !important; border-left-color:#e5e7eb !important; } .global-search-top button:hover{ background:#f8fafc !important; } /* Các icon trên topbar dạng khung nổi có nền + shadow */ .topbar .notify-btn{ background:rgba(255,255,255,.16) !important; border:1px solid rgba(255,255,255,.28) !important; box-shadow:0 5px 12px rgba(0,0,0,.16) !important; border-radius:12px !important; width:40px !important; height:40px !important; } .topbar .notify-btn:hover{ background:rgba(255,255,255,.24) !important; transform:translateY(-1px); box-shadow:0 7px 16px rgba(0,0,0,.20) !important; } .topbar .userbox>a{ display:grid; place-items:center; width:40px; height:40px; border-radius:12px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.28); box-shadow:0 5px 12px rgba(0,0,0,.16); } .topbar .userbox>a:hover{ background:rgba(255,255,255,.24); transform:translateY(-1px); } /* B1.12.16.4 - Logo lớn hơn, icon topbar chỉ shadow không viền */ .brand-logo{ width:auto !important; height:42px !important; max-width:190px !important; object-fit:contain; } /* Icon topbar: bỏ viền, giữ nền nhẹ + shadow */ .topbar .notify-btn{ border:0 !important; box-shadow:0 5px 12px rgba(0,0,0,.16) !important; } .topbar .userbox>a{ border:0 !important; box-shadow:0 5px 12px rgba(0,0,0,.16) !important; } /* B1.12.16.6 - Sidebar gọn hơn */ .side-nav{padding-left:8px;padding-right:8px} .side-nav a{gap:9px;padding-left:9px;padding-right:9px} .brand{padding-left:16px;padding-right:16px} /* B1.12.18 - Topbar report + sidebar/search compact */ .side-nav{padding-left:7px;padding-right:7px} .side-nav a{gap:8px;padding-left:8px;padding-right:8px} .brand{padding-left:14px;padding-right:14px} /* B1.12.19 - Ngày của tôi: điều hướng ngày cùng một hàng, đồng chiều cao */ .day-date-nav{display:grid!important;grid-template-columns:auto minmax(155px,190px) auto auto;align-items:stretch!important;gap:8px!important;flex-wrap:nowrap!important} .day-date-nav .btn,.day-date-nav input[type="date"]{height:40px!important;min-height:40px!important;margin:0!important;display:flex!important;align-items:center!important;justify-content:center!important;white-space:nowrap;padding-top:0!important;padding-bottom:0!important} .day-date-nav input[type="date"]{min-width:155px;border-radius:8px} .day-date-nav .day-today-btn{background:#fff!important;color:var(--p)!important;border:1px solid var(--p)!important} .day-date-nav .day-today-btn:hover{background:#ecfdf5!important} @media(max-width:760px){.day-date-nav{grid-template-columns:1fr 1fr}.day-date-nav input[type="date"]{min-width:0;width:100%}} /* B1.12.20 - Popup tính thưởng tại chi tiết hợp đồng */ .reward-open-btn{background:#7f1d1d} .reward-open-btn:hover{background:#681818} .reward-modal-backdrop{display:none;position:fixed;inset:0;z-index:120;background:rgba(15,23,42,.52);padding:24px;align-items:center;justify-content:center} .reward-modal-backdrop.open{display:flex} .reward-modal{width:min(780px,96vw);max-height:88vh;overflow:auto;background:#fff;border-radius:16px;box-shadow:0 28px 80px rgba(0,0,0,.28);padding:0} .reward-modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:18px 20px;border-bottom:1px solid #e5e7eb} .reward-modal-head h3{margin:0 0 3px;font-size:20px} .reward-modal-head span{color:#64748b;font-size:12px} .reward-close{border:0;background:#f1f5f9;color:#475569;width:34px;height:34px;border-radius:9px;font-size:22px;line-height:1;cursor:pointer} .reward-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:16px 20px 10px} .reward-summary>div{background:#f8fafc;border-radius:11px;padding:12px 14px} .reward-summary span{display:block;color:#64748b;font-size:12px;margin-bottom:5px} .reward-summary b{font-size:17px} .reward-summary .reward-profit{background:#fff1f2} .reward-summary .reward-profit b,.reward-money{color:#881337} .reward-table-wrap{margin:8px 20px 0} .reward-modal-actions{display:flex;justify-content:flex-end;gap:8px;padding:16px 20px 20px} .reward-empty{margin:12px 20px 20px;padding:14px;border-radius:10px;background:#f8fafc;color:#64748b} @media(max-width:650px){.reward-summary{grid-template-columns:1fr}.reward-modal-backdrop{padding:10px}.reward-modal-actions{position:sticky;bottom:0;background:#fff}} /* B1.12.21 - Popup tạo công việc + click trạng thái */ .task-create-modal-backdrop{display:none;position:fixed;inset:0;z-index:130;background:rgba(15,23,42,.5);padding:18px;align-items:center;justify-content:center} .task-create-modal-backdrop.open{display:flex} .task-create-modal{width:min(760px,96vw);max-height:90vh;overflow:auto;background:#fff;border-radius:16px;box-shadow:0 28px 80px rgba(0,0,0,.28)} .task-create-modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:16px 18px;border-bottom:1px solid #e5e7eb} .task-create-modal-head h3{margin:0 0 2px;font-size:19px} .task-create-modal-head span{color:#64748b;font-size:12px} .task-modal-close{border:0;background:#f1f5f9;color:#475569;width:34px;height:34px;border-radius:9px;font-size:22px;cursor:pointer} .task-create-compact-form{padding:14px 18px 18px} .task-modal-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px 11px} .task-modal-grid label{font-size:12px;margin-top:0} .task-modal-wide{grid-column:span 2} .task-create-compact-form textarea{min-height:58px} .task-modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:13px} .task-popup-launch{display:flex;align-items:center;justify-content:space-between;gap:12px} .task-popup-launch>div span{display:block;font-size:12px;margin-top:2px} .task-status-cycle-form{display:inline-block;margin:0} .task-status-click{border:0;border-radius:999px;padding:5px 9px;font:inherit;font-size:11px;font-weight:800;cursor:pointer;white-space:nowrap} button.task-status-click.status-not_started{background:#f1f5f9;color:#475569} button.task-status-click.status-processing{background:#fff7ed;color:#c2410c} .task-status-click.is-complete{display:inline-block;background:#ecfdf5;color:#047857;cursor:default} .week-task-item .task-status-cycle-form{margin-left:5px} .week-task-item .task-status-click{padding:3px 6px;font-size:10px} @media(max-width:700px){.task-modal-grid{grid-template-columns:1fr 1fr}.task-modal-wide{grid-column:1/-1}} @media(max-width:500px){.task-modal-grid{grid-template-columns:1fr}.task-modal-wide{grid-column:auto}.task-popup-launch{align-items:flex-start;flex-direction:column}} /* B1.12.34 - phân trang server-side */ .pagination-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 2px 4px;font-size:13px;color:#64748b;flex-wrap:wrap} .pagination-links{display:flex;align-items:center;gap:5px;flex-wrap:wrap} .pagination-links a,.pagination-links b,.pagination-links span{min-width:32px;height:32px;padding:0 9px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;text-decoration:none} .pagination-links a{background:#fff;border:1px solid #e2e8f0;color:#334155} .pagination-links a:hover{border-color:var(--p);color:var(--p)} .pagination-links b{background:var(--p);color:#fff;border:1px solid var(--p)} .pagination-links span{min-width:auto;color:#94a3b8} @media(max-width:640px){.pagination-bar{align-items:flex-start}.pagination-links{width:100%}} /* B1.12.35 - report center */ .report-layout{display:grid;grid-template-columns:210px minmax(0,1fr);gap:18px;align-items:start} .report-menu{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:14px;position:sticky;top:78px} .report-menu h3{margin:0 0 12px;color:var(--p)} .report-menu-group{display:flex;flex-direction:column;gap:3px;margin-bottom:14px} .report-menu-group>b{font-size:13px;margin:4px 8px;color:#334155} .report-menu a{padding:8px 10px;border-radius:8px;text-decoration:none;color:#475569;font-size:13px} .report-menu a:hover,.report-menu a.active{background:color-mix(in srgb,var(--p) 10%,white);color:var(--p);font-weight:700} .report-main{min-width:0}.report-head h1{margin:0}.report-head{margin-bottom:12px} .report-filter{display:flex;align-items:end;gap:10px;flex-wrap:wrap;background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:12px;margin-bottom:16px} .report-filter>div{min-width:155px}.report-filter label{display:block;font-size:12px;color:#64748b;margin-bottom:4px}.report-filter select,.report-filter input{height:38px} .report-range{font-size:12px;color:#64748b;padding:10px 4px} .report-section{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:14px;margin-bottom:16px}.report-section h2{margin:0 0 12px;color:#c62828;font-size:20px} .report-section table th,.report-section table td{white-space:nowrap}.report-section .num{text-align:right}.report-total{font-weight:700} .report-chart-card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:14px;height:360px;margin-bottom:16px} .report-chart-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.report-chart-grid .report-chart-card{height:320px} .report-two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px}.report-coming{text-align:center;padding:50px} @media(max-width:1000px){.report-layout{grid-template-columns:1fr}.report-menu{position:static;display:flex;overflow:auto;gap:14px}.report-menu h3{display:none}.report-menu-group{min-width:180px}.report-chart-grid,.report-two-col{grid-template-columns:1fr}} @media(max-width:640px){.report-filter>div{width:100%}.report-filter .btn{width:100%}.report-chart-card{height:300px}} /* B1.12.36 - Báo cáo: menu con sidebar + tab ngang trong từng nhóm */ .side-nav-group{display:block} .side-nav-parent{position:relative} .side-nav-caret{margin-left:auto;font-size:18px;line-height:1;transition:transform .2s} .side-nav-parent.open .side-nav-caret{transform:rotate(90deg)} .side-subnav{display:none;padding:2px 0 5px 31px} .side-subnav.show{display:block} .side-subnav a{display:block;padding:7px 8px!important;margin:1px 4px!important;border-radius:7px!important;font-size:12px!important;opacity:.92} .side-subnav a:before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:currentColor;margin-right:8px;vertical-align:2px;opacity:.55} .side-subnav a.active{font-weight:700;background:rgba(255,255,255,.14)!important} .report-tabs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 14px;padding:8px;background:#fff;border:1px solid #e5e7eb;border-radius:12px} .report-tabs a{display:inline-flex;align-items:center;min-height:38px;padding:8px 14px;border-radius:9px;text-decoration:none;color:#475569;font-size:13px;font-weight:600;white-space:nowrap} .report-tabs a:hover{color:var(--p);background:#f8fafc} .report-tabs a.active{background:var(--p);color:#fff} .report-main{min-width:0} @media(max-width:640px){ .report-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin} .report-tabs a{flex:0 0 auto} .side-subnav{padding-left:27px} } /* B1.12.37 - Thư đến & Đi */ .correspondence-form{max-width:1050px;margin:0 auto}.correspondence-form-grid{display:grid;grid-template-columns:220px minmax(0,1fr);gap:12px 18px;align-items:center}.correspondence-form-grid>label{font-weight:600;color:#334155}.correspondence-form textarea{min-height:96px}.correspondence-object-picker{position:relative}.correspondence-suggestions{display:none;position:absolute;z-index:50;left:0;right:0;top:calc(100% + 4px);max-height:300px;overflow:auto;background:#fff;border:1px solid #dbe2ea;border-radius:9px;box-shadow:0 12px 30px rgba(15,23,42,.16)}.correspondence-suggestions.show{display:block}.correspondence-suggestions button{display:block;width:100%;text-align:left;border:0;background:#fff;padding:9px 11px;border-bottom:1px solid #eef2f7;cursor:pointer}.correspondence-suggestions button:hover{background:#f8fafc}.correspondence-checks,.correspondence-filter-checks{display:flex;gap:16px;align-items:center;flex-wrap:wrap}.correspondence-checks label,.correspondence-filter-checks label{display:flex;gap:6px;align-items:center;font-weight:400}.correspondence-checks input,.correspondence-filter-checks input{width:auto}.list-bulk-actions{display:flex;justify-content:flex-end;margin:8px 0}.correspondence-table{font-size:13px}.correspondence-table th{white-space:nowrap}.correspondence-table td{vertical-align:top}.entity-code{display:inline-block;background:#5aa2ee;color:#fff;padding:2px 5px;border-radius:4px;text-decoration:none;font-weight:600}.row-actions{display:flex;gap:4px;margin-top:4px}.row-actions a{font-size:11px;padding:2px 5px;border-radius:4px;background:#eef2f7;text-decoration:none}.correspondence-badge{display:block;width:max-content;font-size:10px;padding:2px 5px;border-radius:5px;margin-top:3px}.correspondence-badge.pending{background:#fff7ed;color:#c2410c}.correspondence-badge.returned{background:#fef2f2;color:#b91c1c}@media(max-width:720px){.correspondence-form-grid{grid-template-columns:1fr;gap:6px}.correspondence-form-grid>label{margin-top:8px}} /* B1.12.38 - Báo cáo công văn */ .report-kpi-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px} .report-kpi{padding:14px;border:1px solid #e5e7eb;border-radius:10px;background:#f8fafc} .report-kpi span{display:block;font-size:12px;color:#64748b;margin-bottom:5px} .report-kpi b{font-size:24px;color:#0f172a} @media(max-width:1100px){.report-kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:640px){.report-kpi-grid{grid-template-columns:1fr 1fr}} /* B1.12.39 - single input date range */ .date-range-picker{position:relative;min-width:210px} .date-range-picker>label{display:block} .date-range-display{width:100%;height:38px;border:1px solid #dbe2ea;background:#fff;border-radius:8px;padding:0 11px;display:flex;align-items:center;justify-content:space-between;gap:10px;color:#334155;font:inherit;text-align:left;cursor:pointer} .date-range-display span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .date-range-display i{font-style:normal;color:#94a3b8;font-size:11px} .date-range-picker.open .date-range-display{border-color:var(--p);box-shadow:0 0 0 2px color-mix(in srgb,var(--p) 10%,transparent)} .date-range-popover{display:none;position:absolute;left:0;top:calc(100% + 6px);z-index:80;width:330px;background:#fff;border:1px solid #e2e8f0;border-radius:10px;box-shadow:0 12px 35px rgba(15,23,42,.14);padding:12px} .date-range-picker.open .date-range-popover{display:grid;grid-template-columns:1fr 1fr;gap:10px} .date-range-popover label{display:block;font-size:11px;color:#64748b;margin-bottom:4px} .date-range-popover input{width:100%;height:36px} .date-range-actions{grid-column:1/-1;display:flex;justify-content:flex-end;gap:8px;padding-top:2px} .report-custom-date{min-width:220px} @media(max-width:640px){ .date-range-picker{min-width:100%;width:100%} .date-range-popover{width:min(330px,calc(100vw - 34px))} } /* B1.12.44 - date range dropdown like reference */ .time-filter-wrap{position:relative;display:inline-block;min-width:220px;flex:0 0 auto} .time-filter-display{width:100%;height:38px;border:1px solid #d7dde5;background:#fff;border-radius:8px;padding:0 12px;display:flex;align-items:center;justify-content:space-between;gap:12px;color:#334155;font:inherit;cursor:pointer} .time-filter-display span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .time-filter-display i{font-style:normal;color:#94a3b8} .time-filter-wrap.open .time-filter-display{border-color:var(--p);box-shadow:0 0 0 2px color-mix(in srgb,var(--p) 10%,transparent)} .time-filter-panel{display:none;position:absolute;left:0;top:calc(100% + 7px);z-index:160;width:820px;max-width:calc(100vw - 42px);background:#fff;border:1px solid #dfe4ea;border-radius:10px;box-shadow:0 16px 42px rgba(15,23,42,.18);overflow:hidden} .time-filter-wrap.open .time-filter-panel{display:grid;grid-template-columns:180px minmax(0,1fr)} .time-filter-presets{border-right:1px solid #e5e7eb;padding:10px 0;background:#fff} .time-filter-presets button{width:100%;border:0;background:transparent;text-align:left;padding:12px 18px;font:inherit;font-weight:600;color:#374151;cursor:pointer} .time-filter-presets button:hover{background:#f8fafc;color:var(--p)} .time-filter-presets button.active{background:var(--p);color:#fff} .time-filter-calendar-area{min-width:0} .time-filter-calendars{display:grid;grid-template-columns:1fr 1fr;gap:22px;padding:14px 18px 10px} .time-calendar{min-width:0} .time-calendar-head{display:grid;grid-template-columns:34px 1fr 88px 34px;gap:6px;align-items:center;margin-bottom:12px} .time-calendar-head select{height:34px;padding:0 8px} .cal-nav,.cal-nav-space{width:34px;height:34px} .cal-nav{border:0;background:transparent;font-size:28px;line-height:1;cursor:pointer;color:#111827} .cal-nav:hover{color:var(--p)} .time-calendar-week,.time-calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px} .time-calendar-week{margin-bottom:5px} .time-calendar-week b{font-size:12px;text-align:center;color:#334155;padding:5px 0} .cal-day{height:34px;border:0;background:transparent;border-radius:7px;cursor:pointer;color:#111827;font-size:13px} .cal-day:hover{background:#edf6ff} .cal-day.muted{color:#a3a3a3} .cal-day.in-range{background:color-mix(in srgb,var(--p) 12%,white)} .cal-day.range-start,.cal-day.range-end{background:var(--p);color:#fff;font-weight:700} .time-filter-footer{border-top:1px solid #e5e7eb;padding:9px 12px;display:flex;align-items:center;gap:8px} .time-filter-summary{margin-left:auto;font-weight:600;color:#374151} .time-filter-reset{border:0;background:transparent;color:#64748b;cursor:pointer;padding:7px 4px} .time-filter-reset:hover{color:var(--p)} @media(max-width:900px){ .time-filter-panel{width:660px} .time-filter-wrap.open .time-filter-panel{grid-template-columns:150px minmax(0,1fr)} .time-filter-calendars{gap:12px;padding:12px} } @media(max-width:700px){ .time-filter-wrap{width:100%;min-width:0} .time-filter-panel{left:0;width:min(520px,calc(100vw - 34px));max-height:75vh;overflow:auto} .time-filter-wrap.open .time-filter-panel{grid-template-columns:1fr} .time-filter-presets{border-right:0;border-bottom:1px solid #e5e7eb;display:grid;grid-template-columns:1fr 1fr;padding:6px} .time-filter-presets button{padding:9px 10px;border-radius:7px} .time-filter-calendars{grid-template-columns:1fr} .time-calendar[data-time-calendar="1"]{display:none} .time-filter-footer{position:sticky;bottom:0;background:#fff} } /* B1.12.46 - Quản lý Liên hệ */ .contact-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:16px}.contact-kpi{display:flex;align-items:center;gap:12px;padding:16px}.contact-kpi>i{width:44px;height:44px;border-radius:11px;display:grid;place-items:center;background:color-mix(in srgb,var(--p) 10%,white);color:var(--p);font-size:20px}.contact-kpi span{display:block;font-size:12px;color:#64748b}.contact-kpi b{font-size:25px;color:#0f172a}.contacts-table td small{display:block;color:#94a3b8;margin-top:3px}.contact-form-card{max-width:1180px;margin:0 auto}.contact-form-card>h2{margin:0 0 20px}.contact-main-form{margin:0}.contact-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 34px}.contact-form-grid>div{display:grid;grid-template-columns:145px minmax(0,1fr);gap:12px;align-items:center}.contact-form-grid label{margin:0;font-weight:600}.contact-org-combo{position:relative}.contact-org-results{display:none;position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:80;background:#fff;border:1px solid #e2e8f0;border-radius:8px;box-shadow:0 12px 30px rgba(15,23,42,.14);max-height:260px;overflow:auto}.contact-org-results.show{display:block}.contact-org-results button{width:100%;border:0;background:#fff;text-align:left;padding:9px 11px;cursor:pointer}.contact-org-results button:hover{background:#f8fafc}.contact-org-results small{display:block;color:#64748b;margin-top:2px}.contact-detail-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.contact-detail-grid span{display:block;color:#64748b;font-size:12px;margin-bottom:3px}.contact-detail-wide{grid-column:1/-1}.contact-quick-modal-box{max-width:980px}.contact-quick-modal .contact-form-grid{gap:10px 22px}.contact-quick-modal .contact-form-grid>div{grid-template-columns:120px minmax(0,1fr)} @media(max-width:1000px){.contact-kpis{grid-template-columns:repeat(2,1fr)}.contact-form-grid{grid-template-columns:1fr}.contact-detail-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:640px){.contact-kpis{grid-template-columns:1fr}.contact-form-grid>div,.contact-quick-modal .contact-form-grid>div{grid-template-columns:1fr;gap:5px}.contact-detail-grid{grid-template-columns:1fr}} /* B1.12.48 - select2-like searchable filter */ .smart-select{position:relative;min-width:180px} .smart-select-native{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important} .smart-select-button{width:100%;height:38px;border:1px solid #d7dde5;background:#fff;border-radius:8px;padding:0 11px;display:flex;align-items:center;justify-content:space-between;gap:10px;color:#334155;font:inherit;cursor:pointer;text-align:left} .smart-select-button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .smart-select-button i{font-style:normal;color:#94a3b8;font-size:11px} .smart-select.open .smart-select-button{border-color:var(--p);box-shadow:0 0 0 2px color-mix(in srgb,var(--p) 10%,transparent)} .smart-select-panel{display:none;position:absolute;left:0;top:calc(100% + 5px);z-index:170;min-width:100%;width:max-content;max-width:360px;background:#fff;border:1px solid #dfe4ea;border-radius:9px;box-shadow:0 14px 36px rgba(15,23,42,.16);overflow:hidden} .smart-select.open .smart-select-panel{display:block} .smart-select-search-wrap{padding:8px;border-bottom:1px solid #edf0f4} .smart-select-search{width:100%;min-width:220px;height:34px!important;padding:0 9px!important} .smart-select-options{max-height:280px;overflow:auto;padding:4px} .smart-select-option{display:block;width:100%;border:0;background:#fff;text-align:left;padding:8px 10px;border-radius:6px;color:#334155;font:inherit;cursor:pointer;white-space:normal} .smart-select-option:hover{background:#f1f5f9} .smart-select-option.active{background:color-mix(in srgb,var(--p) 10%,white);color:var(--p);font-weight:700} .smart-select-empty{padding:12px;color:#94a3b8;text-align:center;font-size:13px} @media(max-width:640px){ .smart-select{width:100%;min-width:0} .smart-select-panel{width:100%;max-width:none} .smart-select-search{min-width:0} } /* B1.12.49 - Contract contact searchable picker */ .contract-contact-picker{position:relative} .contract-contact-display{width:100%;height:40px;border:1px solid #d7dde5;background:#fff;border-radius:8px;padding:0 11px;display:flex;align-items:center;justify-content:space-between;gap:10px;font:inherit;color:#334155;cursor:pointer;text-align:left} .contract-contact-display span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .contract-contact-display i{font-style:normal;color:#94a3b8} .contract-contact-picker.open .contract-contact-display{border-color:var(--p);box-shadow:0 0 0 2px color-mix(in srgb,var(--p) 10%,transparent)} .contract-contact-panel{display:none;position:absolute;left:0;top:calc(100% + 5px);z-index:180;width:100%;min-width:360px;background:#fff;border:1px solid #dfe4ea;border-radius:9px;box-shadow:0 14px 36px rgba(15,23,42,.16);padding:8px} .contract-contact-picker.open .contract-contact-panel{display:block} .contract-contact-panel>input{width:100%;height:36px;margin-bottom:6px} .contract-contact-results{max-height:300px;overflow:auto} .contract-contact-option{display:block;width:100%;border:0;background:#fff;text-align:left;padding:8px 9px;border-radius:7px;cursor:pointer} .contract-contact-option:hover{background:#f1f5f9} .contract-contact-option.active{background:color-mix(in srgb,var(--p) 10%,white)} .contract-contact-option b,.contract-contact-option small{display:block} .contract-contact-option small{margin-top:2px;color:#64748b;font-size:12px} .contract-contact-empty{padding:12px;text-align:center;color:#94a3b8;font-size:13px} @media(max-width:640px){.contract-contact-panel{min-width:0;width:100%}} /* B1.12.51 - APOLAT */ .apolat-tabs{display:flex;gap:8px;flex-wrap:wrap;background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:8px;margin-bottom:16px} .apolat-tabs a{padding:9px 15px;border-radius:9px;text-decoration:none;color:#475569;font-weight:700;font-size:13px} .apolat-tabs a.active{background:var(--p);color:#fff}.apolat-tabs a:hover:not(.active){background:#f8fafc;color:var(--p)} .apolat-category-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.apolat-category-card{margin:0} .apolat-link-list{display:flex;flex-direction:column;gap:5px}.apolat-link-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 11px;border:1px solid #edf0f3;border-radius:8px;text-decoration:none;color:#334155;background:#fff} .apolat-link-row span{display:flex;align-items:center;gap:9px;min-width:0}.apolat-link-row:hover{border-color:var(--p);color:var(--p);background:#f8fafc}.apolat-link-row>i{opacity:.5} .apolat-admin-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:16px;margin-top:16px}.apolat-manage-list{margin-top:14px;border-top:1px solid #edf0f3;padding-top:8px;max-height:330px;overflow:auto}.apolat-manage-list>div{display:flex;justify-content:space-between;gap:12px;padding:7px 2px;border-bottom:1px solid #f1f5f9}.apolat-manage-list small{display:block;color:#94a3b8} .apolat-org-view{overflow:auto}.org-tree{min-width:720px;padding:12px 0 28px;text-align:center}.org-tree ul{padding-top:22px;position:relative;display:flex;justify-content:center;margin:0;padding-left:0}.org-tree li{list-style:none;position:relative;padding:22px 10px 0}.org-tree li:before,.org-tree li:after{content:"";position:absolute;top:0;right:50%;border-top:1px solid #cbd5e1;width:50%;height:22px}.org-tree li:after{right:auto;left:50%;border-left:1px solid #cbd5e1}.org-tree li:only-child:after,.org-tree li:only-child:before{display:none}.org-tree li:only-child{padding-top:0}.org-tree li:first-child:before,.org-tree li:last-child:after{border:0}.org-tree li:last-child:before{border-right:1px solid #cbd5e1;border-radius:0 6px 0 0}.org-tree li:first-child:after{border-radius:6px 0 0 0}.org-tree ul ul:before{content:"";position:absolute;top:0;left:50%;border-left:1px solid #cbd5e1;width:0;height:22px}.org-node{display:inline-flex;flex-direction:column;min-width:170px;max-width:230px;padding:11px 14px;border:1px solid #dbe3ea;border-radius:10px;background:#fff;box-shadow:0 3px 12px rgba(15,23,42,.06)}.org-node b{color:#0f172a}.org-node span{font-size:12px;color:#64748b;margin-top:4px} @media(max-width:900px){.apolat-category-list,.apolat-admin-grid{grid-template-columns:1fr}} /* B1.12.52 */ .contract-related-field select[multiple]{min-height:112px;padding:7px}.reward-batch-table{overflow:auto}.reward-batch-table table{min-width:1750px}.reward-batch-table th{text-align:center;white-space:nowrap}.reward-batch-table td{white-space:nowrap}.contract-contact-option small{max-width:520px} /* B1.12.53 - Người liên quan + preview thưởng một hàng */ .related-user-picker{position:relative}.related-user-picker>select{position:absolute!important;opacity:0!important;width:1px!important;height:1px!important;pointer-events:none!important} .related-user-display{width:100%;min-height:40px;border:1px solid #d7dde5;background:#fff;border-radius:8px;padding:8px 11px;display:flex;justify-content:space-between;gap:10px;text-align:left;color:#334155;cursor:pointer} .related-user-display i{font-style:normal;color:#94a3b8}.related-user-panel{display:none;position:absolute;left:0;top:calc(100% + 5px);z-index:185;width:100%;min-width:360px;background:#fff;border:1px solid #dfe4ea;border-radius:9px;box-shadow:0 14px 36px rgba(15,23,42,.16);padding:8px}.related-user-picker.open .related-user-panel{display:block}.related-user-panel>input{width:100%;height:36px;margin-bottom:6px}.related-user-options,.related-inline-options{max-height:300px;overflow:auto}.related-user-check{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:6px;cursor:pointer}.related-user-check:hover{background:#f1f5f9}.related-user-check input{width:auto!important;margin:0}.related-user-actions{display:flex;justify-content:flex-end;padding-top:7px;border-top:1px solid #edf0f4} .contract-related-inline.editable{cursor:pointer;border-bottom:1px dashed #94a3b8}.contract-related-inline.editable:hover{color:var(--p)} .related-inline-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.35);z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px}.related-inline-modal{width:min(520px,96vw);background:#fff;border-radius:12px;box-shadow:0 22px 70px rgba(15,23,42,.25);padding:14px}.related-inline-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.related-inline-head b{font-size:18px}.related-inline-head button{border:0;background:transparent;font-size:24px;cursor:pointer}.related-inline-modal>input{width:100%;height:38px;margin-bottom:8px}.related-inline-actions{display:flex;justify-content:flex-end;gap:8px;padding-top:10px;border-top:1px solid #edf0f4} .reward-modal-wide{width:min(1500px,96vw)}.reward-formula-note{padding:10px 12px;background:#f8fafc;border:1px solid #e5e7eb;border-radius:9px;margin-bottom:12px}.reward-preview-one-row table{min-width:1450px} /* B1.12.54 - Bảng tính thưởng vừa 100%, không scroll ngang */ .reward-batch-table{overflow-x:visible!important;width:100%} .reward-batch-table table, .reward-preview-one-row table{width:100%!important;min-width:0!important;max-width:100%!important;table-layout:fixed;font-size:10px;line-height:1.2} .reward-batch-table th,.reward-batch-table td, .reward-preview-one-row th,.reward-preview-one-row td{padding:4px 3px!important;white-space:normal!important;overflow-wrap:anywhere;word-break:normal;vertical-align:middle} .reward-batch-table th,.reward-preview-one-row th{font-size:9.5px;line-height:1.15} .reward-batch-table td a,.reward-batch-table td b, .reward-preview-one-row td b{white-space:normal!important;overflow-wrap:anywhere} .reward-batch-table .btn.small{font-size:9px;padding:4px 5px;min-height:25px} .reward-batch-table .inline-action-form{display:block;margin:2px 0} .reward-preview-one-row{overflow-x:visible!important} .reward-modal-wide{width:min(98vw,1600px)!important} .reward-report-kpis{grid-template-columns:repeat(6,minmax(0,1fr))} .reward-report-table table{width:100%;table-layout:fixed} .reward-report-table th,.reward-report-table td{white-space:normal;overflow-wrap:anywhere} .reward-report-table th:nth-child(1){width:45px} .reward-report-table th:nth-child(9){width:65px} @media(max-width:1100px){.reward-report-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:700px){.reward-report-kpis{grid-template-columns:1fr 1fr}.reward-report-table{overflow-x:auto}.reward-report-table table{min-width:760px}} /* B1.12.55 - báo cáo khách hàng gọn trong 100% width */ .report-compact-table{overflow-x:visible!important;width:100%} .report-compact-table table{width:100%!important;min-width:0!important;max-width:100%!important;table-layout:fixed;font-size:11px;line-height:1.2} .report-compact-table th,.report-compact-table td{padding:6px 5px!important;white-space:normal!important;overflow-wrap:anywhere;word-break:normal;vertical-align:middle} .report-compact-table th{font-size:10.5px;line-height:1.15;text-align:center} .report-compact-table th:nth-child(1){width:4%} .report-compact-table th:nth-child(2){width:19%} .report-compact-table th:nth-child(3), .report-compact-table th:nth-child(4){width:7%} .report-compact-table th:nth-child(5){width:9%} .report-compact-table th:nth-child(6), .report-compact-table th:nth-child(8){width:14%} .report-compact-table th:nth-child(7), .report-compact-table th:nth-child(9){width:10%} .report-compact-table td.num{text-align:right;white-space:normal!important} .report-note{margin:-4px 0 10px;font-size:12px} @media(max-width:800px){ .report-compact-table{overflow-x:auto!important} .report-compact-table table{min-width:760px!important} } /* B1.12.56 - lý do Không Chốt */ #opportunity-loss-wrap{display:none;margin-top:8px;padding:10px;border:1px solid #e5e7eb;border-radius:9px;background:#fafafa} #loss-reason-other-wrap{display:none;margin-top:8px} .loss-modal-backdrop{display:none;position:fixed;inset:0;background:rgba(15,23,42,.4);z-index:9999;align-items:center;justify-content:center;padding:20px} .loss-modal-backdrop.open{display:flex} .loss-modal{width:min(520px,96vw);background:#fff;border-radius:12px;padding:15px;box-shadow:0 22px 70px rgba(15,23,42,.25)} .loss-modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px} .loss-modal-head b{font-size:18px}.loss-modal-head button{border:0;background:transparent;font-size:24px;cursor:pointer} .loss-modal select,.loss-modal input{width:100%}.loss-modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px} .opportunity-loss-detail{padding:10px 14px;margin-top:10px} .report-small-table table{width:100%;table-layout:fixed;font-size:12px} .report-small-table th,.report-small-table td{white-space:normal!important;padding:7px 8px!important;overflow-wrap:anywhere} .report-small-table th:first-child{width:55px}.report-small-table th:nth-child(3),.report-small-table th:nth-child(4){width:110px} /* B1.12.58 - tinh gon bang thuong va menu/report tabs */ .side-subnav{padding-left:4px!important} @media(max-width:640px){.side-subnav{padding-left:4px!important}} .report-tabs{gap:3px!important;padding:5px!important;margin-bottom:10px!important} .report-tabs a{min-height:32px!important;padding:5px 8px!important;font-size:12px!important;border-radius:7px!important} .reward-batch-table table{font-size:11px!important;line-height:1.25!important} .reward-batch-table th{font-size:10.5px!important} .reward-batch-table th,.reward-batch-table td{padding:5px 3px!important} .reward-batch-table th:nth-child(7), .reward-batch-table th:nth-child(10), .reward-batch-table th:nth-child(13), .reward-batch-table th:nth-child(16), .reward-batch-table td:nth-child(7), .reward-batch-table td:nth-child(10), .reward-batch-table td:nth-child(13), .reward-batch-table td:nth-child(16){width:3.2%!important;padding-left:1px!important;padding-right:1px!important;text-align:center} .reward-batch-table td:nth-child(6), .reward-batch-table td:nth-child(9), .reward-batch-table td:nth-child(12), .reward-batch-table td:nth-child(15){overflow-wrap:anywhere!important;word-break:normal!important} .opportunity-status-inside{margin-top:14px} /* B1.12.59 */ .opportunity-loss-kv{grid-column:1/-1}.opportunity-loss-kv b{color:#b42318} /* B1.12.60 - dong bo can le cot trong toan bo bao cao */ .report-section table th.num, .report-section table td.num{text-align:right!important} .report-section table .report-total th.num, .report-section table .report-total td.num{text-align:right!important} .report-section table th{vertical-align:middle} /* B1.12.61 - drag & drop công việc trong Tuần của tôi */ .week-task-item.is-draggable{cursor:grab;user-select:none;transition:opacity .15s,transform .15s,box-shadow .15s} .week-task-item.is-draggable:active{cursor:grabbing} .week-task-item.is-dragging{opacity:.42;transform:scale(.98)} .week-day-card.is-drag-over{outline:2px dashed #b4232d;outline-offset:-4px;background:#fff8f8;box-shadow:0 0 0 4px rgba(180,35,45,.06)} .week-day-card.is-saving{opacity:.65;pointer-events:none} .week-drag-hint{margin:8px 2px 0;color:#756b66;font-size:12px} /* B1.12.62 - danh sách khách hàng gọn hơn */ .customer-list-filters{display:flex!important;align-items:flex-end;gap:6px!important;flex-wrap:wrap} .customer-list-filters>div{flex:0 0 auto!important;min-width:0!important} .customer-list-filters select, .customer-list-filters input{width:132px!important;min-width:0!important} .customer-list-filters .date-range-filter{width:auto!important} .customer-list-filters .date-range-trigger{min-width:126px!important;width:auto!important} .customer-list-filters .customer-list-search{margin-left:auto!important} .customer-list-filters .customer-list-search input{width:190px!important} .customer-list-table td:nth-child(2){min-width:190px} @media(max-width:900px){ .customer-list-filters .customer-list-search{margin-left:0!important} .customer-list-filters select,.customer-list-filters input{width:145px!important} .customer-list-filters .customer-list-search input{width:190px!important} } /* B1.12.63 - inline edit Customer 360: không đè/che các ô kế bên */ .customer-profile-card .customer-info-grid>div:has(.inline-editing){ grid-column:1/-1!important; position:relative; z-index:8; background:#fff; } .customer-profile-card .inline-editing{ display:block!important; width:100%!important; max-width:100%!important; margin:0!important; padding:0!important; } .customer-profile-card .inline-editor{ display:grid!important; grid-template-columns:minmax(0,1fr) auto auto; gap:6px!important; width:100%!important; max-width:100%!important; align-items:start!important; } .customer-profile-card .inline-editor input, .customer-profile-card .inline-editor select, .customer-profile-card .inline-editor textarea{ width:100%!important; min-width:0!important; max-width:100%!important; box-sizing:border-box!important; } .customer-profile-card .inline-editor textarea{ min-height:78px!important; resize:vertical; } .customer-profile-card .inline-editor .inline-save, .customer-profile-card .inline-editor .inline-cancel{ flex:0 0 auto; } /* Liên hệ: khi một trường đang sửa, cho editor đủ chỗ và không bị chức vụ/SĐT/email che nút */ .customer-contact-item:has(.inline-editing){ align-items:flex-start!important; position:relative; z-index:8; } .customer-contact-item:has(.inline-editing) .customer-contact-lines{ overflow:visible!important; } .customer-contact-item:has(.inline-editing) .contact-line-1, .customer-contact-item:has(.inline-editing) .contact-line-2{ overflow:visible!important; white-space:normal!important; flex-wrap:wrap!important; text-overflow:clip!important; } .customer-contact-item .inline-editing{ width:100%!important; max-width:100%!important; flex:1 1 100%!important; overflow:visible!important; } .customer-contact-item .contact-line-1 b:has(.inline-editing){ display:block!important; width:100%!important; flex:1 1 100%!important; } .customer-contact-item .inline-editor{ display:grid!important; grid-template-columns:minmax(0,1fr) auto auto; gap:5px!important; width:100%!important; max-width:100%!important; align-items:start!important; } .customer-contact-item .inline-editor input, .customer-contact-item .inline-editor select, .customer-contact-item .inline-editor textarea{ width:100%!important; min-width:0!important; max-width:100%!important; box-sizing:border-box!important; } .customer-contact-item .inline-editor textarea{min-height:70px!important} .customer-contact-item .inline-editor .inline-save, .customer-contact-item .inline-editor .inline-cancel{ position:relative!important; z-index:10!important; } /* Editor chung không được vượt khỏi container cha */ .inline-editing{max-width:100%!important} .inline-editor{box-sizing:border-box} .inline-editor input,.inline-editor select,.inline-editor textarea{box-sizing:border-box} @media(max-width:650px){ .customer-profile-card .inline-editor, .customer-contact-item .inline-editor{ grid-template-columns:minmax(0,1fr) auto auto!important; } } /* B1.12.64 */ .annual-paid-dot{background:#16a34a!important}.annual-paid-bar{background:#16a34a!important}.appendix-help{font-size:11px;margin:-4px 0 8px} /* B1.12.65 */ .customer-contact-card .section-title{align-items:center} .customer-contact-modal-backdrop{display:none;position:fixed;inset:0;background:rgba(15,23,42,.42);z-index:1200;align-items:center;justify-content:center;padding:18px}.customer-contact-modal-backdrop.open{display:flex} .customer-contact-modal{width:min(760px,96vw);max-height:90vh;overflow:auto;background:#fff;border-radius:16px;box-shadow:0 24px 70px rgba(15,23,42,.25);padding:18px} .customer-contact-modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px}.customer-contact-modal-head h3{margin:0 0 3px}.customer-contact-modal-head span{font-size:12px;color:#64748b} .customer-contact-modal-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px}.customer-contact-modal-grid label{display:block;margin-bottom:4px}.customer-contact-modal-grid input,.customer-contact-modal-grid textarea{width:100%;box-sizing:border-box}.customer-contact-modal-wide{grid-column:1/-1}.customer-contact-modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px} @media(max-width:650px){.customer-contact-modal-grid{grid-template-columns:1fr}.customer-contact-modal-wide{grid-column:auto}} /* B1.12.66 - searchable parent contract selector */ .parent-contract-top{margin-bottom:12px}.parent-contract-select2{position:relative;width:100%}.parent-contract-native{display:none!important} .parent-contract-display{width:100%;min-height:40px;text-align:left;padding:8px 36px 8px 11px;border:1px solid #d8dee8;border-radius:8px;background:#fff;cursor:pointer;position:relative} .parent-contract-panel{display:none;position:absolute;z-index:1100;left:0;right:0;top:calc(100% + 4px);background:#fff;border:1px solid #d8dee8;border-radius:10px;box-shadow:0 12px 32px rgba(15,23,42,.16);padding:8px} .parent-contract-select2.open .parent-contract-panel{display:block}.parent-contract-panel input{width:100%;box-sizing:border-box;margin-bottom:6px} .parent-contract-results{max-height:280px;overflow:auto}.parent-contract-option{display:block;width:100%;border:0;background:#fff;text-align:left;padding:8px 9px;border-radius:6px;cursor:pointer}.parent-contract-option:hover,.parent-contract-option.active{background:#f1f5f9} /* B1.12.68 */ .search-select{position:relative;width:100%;min-width:0}.search-select-native{display:none!important}.search-select-display{width:100%;min-height:38px;text-align:left;padding:7px 10px;border:1px solid #d8dee8;border-radius:8px;background:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-select-panel{display:none;position:absolute;z-index:1250;left:0;right:0;top:calc(100% + 4px);min-width:220px;background:#fff;border:1px solid #d8dee8;border-radius:10px;box-shadow:0 12px 32px rgba(15,23,42,.16);padding:7px}.search-select.open .search-select-panel{display:block}.search-select-input{width:100%!important;box-sizing:border-box!important;margin-bottom:6px!important}.search-select-results{max-height:280px;overflow:auto}.search-select-option{display:block;width:100%;border:0;background:#fff;text-align:left;padding:8px 9px;border-radius:6px;cursor:pointer}.search-select-option:hover,.search-select-option.active{background:#f1f5f9}.filters .search-select{width:auto;min-width:130px} /* B1.12.69 - cân đối số tiền giữa biểu đồ tỷ lệ dịch vụ */ .service-pie-hole b{font-size:17px!important;line-height:1.08!important;max-width:96px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .service-pie-hole span{font-size:10px!important;line-height:1.15!important;margin-top:3px!important} .customer-report-analytics-row .service-pie-hole b{font-size:15px!important;max-width:86px} @media(max-width:650px){.service-pie-hole b{font-size:15px!important}.customer-report-analytics-row .service-pie-hole b{font-size:14px!important}} /* B1.12.80 */ .task-create-modal>form{padding:18px 22px 22px}.task-create-modal>form>label{display:block;margin-top:12px;margin-bottom:6px;font-weight:700}.task-create-modal>form>label:first-child{margin-top:0}.task-create-modal>form input,.task-create-modal>form select,.task-create-modal>form textarea{width:100%;box-sizing:border-box}.task-create-modal .task-modal-actions{padding-top:18px} @media(max-width:800px){.quick-task-box form{grid-template-columns:minmax(0,1fr) 90px}.quick-task-box [data-task-block-open]{width:auto}.task-create-modal>form{padding:16px}} /* B1.12.81 week/report refinements */ .week-day-head-actions{display:flex;align-items:center;gap:8px}.week-block-btn{padding:5px 9px;font-size:11px}.week-task-main{min-width:0;flex:1}.week-task-main>b{display:block;line-height:1.35}.week-task-status-row{display:block;margin-top:6px}.week-task-status-row .task-status-cycle-form{margin:0}.week-task-status-row .task-status-click{margin:0}.team-daily-chart{padding:22px 28px}.daily-chart-area{height:300px;display:flex;align-items:flex-end;gap:18px;padding:18px 10px 0;border-bottom:1px solid #b8aaa4;background:repeating-linear-gradient(to top,transparent 0,transparent 24%,#e6ddda 25%)}.daily-chart-col{height:100%;flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;min-width:62px}.daily-chart-stack{height:245px;width:min(76px,75%);display:flex;flex-direction:column-reverse;justify-content:flex-start;position:relative}.daily-chart-stack i{display:block;width:100%}.daily-assigned{background:#a9162d}.daily-free{background:#2da44e}.daily-over{background:#ed1c24;position:absolute;bottom:100%;left:0}.daily-chart-col>span{margin-top:8px;color:#6b625f;font-size:12px;white-space:nowrap}.daily-chart-legend{display:flex;gap:22px;flex-wrap:wrap;justify-content:center;margin-top:18px;font-weight:600}.daily-chart-legend span:nth-child(1){color:#a9162d}.daily-chart-legend span:nth-child(2){color:#2da44e}.daily-chart-legend span:nth-child(3){color:#ed1c24}.daily-chart-legend span:nth-child(4){color:#7e241e}.parent-share-layout{display:grid;grid-template-columns:minmax(260px,1fr) minmax(340px,1.2fr);gap:50px;align-items:center;padding:20px 30px}.parent-pie{width:300px;height:300px;border-radius:50%;margin:auto;background:conic-gradient(#a9162d 0 calc(var(--s1)*1%),#2da44e calc(var(--s1)*1%) calc((var(--s1) + var(--s2))*1%),#f28c18 calc((var(--s1) + var(--s2))*1%) calc((var(--s1) + var(--s2) + var(--s3))*1%),#ed1c24 calc((var(--s1) + var(--s2) + var(--s3))*1%) calc((var(--s1) + var(--s2) + var(--s3) + var(--s4))*1%),#756b66 calc((var(--s1) + var(--s2) + var(--s3) + var(--s4))*1%) calc((var(--s1) + var(--s2) + var(--s3) + var(--s4) + var(--s5))*1%),#7e241e calc((var(--s1) + var(--s2) + var(--s3) + var(--s4) + var(--s5))*1%) 100%)}.parent-share-list>div{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-bottom:1px solid #e5ddda}.parent-share-list span{display:flex;align-items:center;gap:9px}.parent-share-list .dot{width:12px;height:12px;border-radius:50%;display:inline-block}.dot.d1{background:#a9162d}.dot.d2{background:#2da44e}.dot.d3{background:#f28c18}.dot.d4{background:#ed1c24}.dot.d5{background:#756b66}.dot.d6{background:#7e241e}.parent-share-list strong{text-align:right}.parent-share-list strong small{display:block;color:#756b66;font-weight:400}@media(max-width:900px){.parent-share-layout{grid-template-columns:1fr}.daily-chart-area{overflow-x:auto;justify-content:flex-start}.daily-chart-col{min-width:90px}} /* B1.12.85 */ .team-capacity-by-team{padding:22px 28px}.team-capacity-chart{height:330px;display:flex;align-items:flex-end;gap:28px;padding:22px 20px 0;border-bottom:1px solid #b8aaa4;background:repeating-linear-gradient(to top,transparent 0,transparent 24%,#e6ddda 25%);overflow-x:auto}.team-capacity-col{height:100%;min-width:120px;flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center}.team-capacity-bar{height:260px;width:min(150px,78%);display:flex;flex-direction:column-reverse;position:relative}.team-capacity-bar i{display:block;width:100%}.team-cap-used{background:#a9162d}.team-cap-free{background:#2da44e}.team-cap-over{background:#ed1c24;position:absolute;bottom:100%;left:0}.team-capacity-col>b{margin-top:8px;font-size:13px}.team-capacity-col>small{color:#756b66}.team-capacity-legend{display:flex;gap:22px;flex-wrap:wrap;justify-content:center;margin:18px 0 8px;font-weight:600}.team-capacity-legend span:nth-child(1){color:#a9162d}.team-capacity-legend span:nth-child(2){color:#2da44e}.team-capacity-legend span:nth-child(3){color:#ed1c24}@media(max-width:800px){.team-capacity-chart{justify-content:flex-start}.team-capacity-col{min-width:120px}} /* B1.12.87 */ .reward-batch-table{overflow-x:auto;padding-bottom:8px} .reward-batch-table table{min-width:1880px;table-layout:auto} .reward-batch-table th,.reward-batch-table td{white-space:nowrap;vertical-align:middle;padding:12px 10px} .reward-batch-table th{line-height:1.25;min-width:72px} .reward-batch-table th:nth-child(1){min-width:100px}.reward-batch-table th:nth-child(2){min-width:120px} .reward-batch-table td:nth-child(6),.reward-batch-table td:nth-child(9),.reward-batch-table td:nth-child(12),.reward-batch-table td:nth-child(15){min-width:150px;white-space:normal;line-height:1.35} .reward-batch-table td:nth-child(18){font-weight:700;min-width:120px}.reward-batch-table td:nth-child(19){min-width:95px} .report-filter{align-items:end}.report-filter>div{min-width:150px}.report-filter select,.report-filter input{min-height:40px} .contacts-auto-filters{align-items:end}.contacts-auto-filters>div{min-width:180px} .date-click-picker{cursor:text} \n/* B1.12.88 - Contacts shell + compact reward layouts */ .contacts-auto-filters{display:flex!important;flex-wrap:wrap;gap:12px;align-items:end;margin-bottom:16px} .contacts-auto-filters>div{min-width:180px}.contacts-auto-filters input,.contacts-auto-filters select{min-height:40px} .contacts-table{width:100%}.contacts-table th,.contacts-table td{vertical-align:middle} /* Reward list: fit the full reward matrix in the content width on desktop. */ .reward-batch-table{width:100%;max-width:100%;overflow-x:hidden!important} .reward-batch-table table{width:100%!important;min-width:0!important;max-width:100%!important;table-layout:fixed!important;font-size:11px!important;line-height:1.22!important} .reward-batch-table th,.reward-batch-table td{min-width:0!important;padding:6px 4px!important;white-space:normal!important;overflow-wrap:break-word!important;word-break:normal!important;vertical-align:middle} .reward-batch-table th{font-size:10.5px!important;line-height:1.15!important;text-align:center} .reward-batch-table td:nth-child(1){width:6.5%}.reward-batch-table td:nth-child(2){width:7.5%} .reward-batch-table td:nth-child(3),.reward-batch-table td:nth-child(4),.reward-batch-table td:nth-child(5){width:6.2%} .reward-batch-table td:nth-child(6),.reward-batch-table td:nth-child(9),.reward-batch-table td:nth-child(12),.reward-batch-table td:nth-child(15){width:7.2%!important} .reward-batch-table td:nth-child(7),.reward-batch-table td:nth-child(10),.reward-batch-table td:nth-child(13),.reward-batch-table td:nth-child(16){width:3.2%!important;text-align:center} .reward-batch-table td:nth-child(8),.reward-batch-table td:nth-child(11),.reward-batch-table td:nth-child(14),.reward-batch-table td:nth-child(17){width:6.2%} .reward-batch-table td:nth-child(18){width:6.5%!important}.reward-batch-table td:nth-child(19){width:5.5%!important} .reward-batch-table .btn.small{font-size:9px;padding:4px 5px;min-height:25px} /* Contract reward popup: viewport-wide modal, table always fits without horizontal scrolling. */ .reward-modal-wide{width:min(1600px,calc(100vw - 32px))!important;max-width:calc(100vw - 32px)!important} .reward-preview-one-row{width:100%;overflow-x:hidden!important;margin:0!important;padding:0 18px 8px;box-sizing:border-box} .reward-preview-one-row table{width:100%!important;min-width:0!important;table-layout:fixed!important;font-size:12px!important} .reward-preview-one-row th,.reward-preview-one-row td{min-width:0!important;padding:8px 5px!important;white-space:normal!important;overflow-wrap:break-word!important;word-break:normal!important;text-align:center} .reward-preview-one-row th{font-size:11px!important}.reward-preview-one-row td{font-size:12px!important} .reward-preview-one-row th:nth-child(1),.reward-preview-one-row th:nth-child(2),.reward-preview-one-row th:nth-child(3){width:7%} .reward-formula-note{margin:14px 18px 12px} @media(max-width:900px){.reward-batch-table{overflow-x:auto!important}.reward-batch-table table{min-width:1050px!important}.reward-preview-one-row{overflow-x:auto!important}.reward-preview-one-row table{min-width:980px!important}} /* B1.12.89 - searchable inline customer manager editor. */ .inline-editor:has(.inline-user-search){display:grid!important;grid-template-columns:minmax(180px,1fr) auto auto;gap:6px;align-items:start;min-width:min(360px,80vw)} .inline-user-search{grid-column:1/-1;width:100%;box-sizing:border-box;padding:8px 10px;border:1px solid #cfd6df;border-radius:7px;background:#fff} .inline-user-select{grid-column:1/2;width:100%;min-width:220px;max-height:190px;border:1px solid #cfd6df;border-radius:7px;padding:4px;background:#fff} /* B1.12.93 - Legal report */ .legal-report-filter{display:grid;grid-template-columns:minmax(300px,1.2fr) minmax(220px,.85fr) minmax(220px,.85fr) auto;gap:24px;align-items:end}.legal-report-filter .btn{margin-bottom:0}.legal-report-table table{width:100%;table-layout:auto}.legal-report-table th{text-align:center;vertical-align:middle}.legal-report-table td{vertical-align:middle}.legal-report-table td:first-child{min-width:240px}.legal-report-table .num{white-space:nowrap}@media(max-width:900px){.legal-report-filter{grid-template-columns:1fr}.legal-report-table{overflow-x:auto}.legal-report-table table{min-width:1050px}} /* B1.12.94 - reward list readable at 100% width; popup keeps compact % columns */ .reward-batch-table:not(.reward-preview-one-row){width:100%;max-width:100%;overflow-x:hidden!important} .reward-batch-table:not(.reward-preview-one-row) table{width:100%!important;max-width:100%!important;min-width:0!important;table-layout:fixed!important;font-size:13px!important;line-height:1.28!important} .reward-batch-table:not(.reward-preview-one-row) th,.reward-batch-table:not(.reward-preview-one-row) td{min-width:0!important;padding:5px 3px!important;white-space:normal!important;overflow-wrap:anywhere!important;vertical-align:middle} .reward-batch-table:not(.reward-preview-one-row) th{font-size:12.5px!important;line-height:1.2!important;text-align:center} /* 16 columns after removing the four rate/% columns */ .reward-batch-table:not(.reward-preview-one-row) th:nth-child(1),.reward-batch-table:not(.reward-preview-one-row) td:nth-child(1){width:6.5%} .reward-batch-table:not(.reward-preview-one-row) th:nth-child(2),.reward-batch-table:not(.reward-preview-one-row) td:nth-child(2){width:7%} .reward-batch-table:not(.reward-preview-one-row) th:nth-child(3),.reward-batch-table:not(.reward-preview-one-row) td:nth-child(3), .reward-batch-table:not(.reward-preview-one-row) th:nth-child(4),.reward-batch-table:not(.reward-preview-one-row) td:nth-child(4), .reward-batch-table:not(.reward-preview-one-row) th:nth-child(5),.reward-batch-table:not(.reward-preview-one-row) td:nth-child(5){width:7%} .reward-batch-table:not(.reward-preview-one-row) td:nth-child(6),.reward-batch-table:not(.reward-preview-one-row) td:nth-child(8),.reward-batch-table:not(.reward-preview-one-row) td:nth-child(10),.reward-batch-table:not(.reward-preview-one-row) td:nth-child(12){width:8%} .reward-batch-table:not(.reward-preview-one-row) td:nth-child(7),.reward-batch-table:not(.reward-preview-one-row) td:nth-child(9),.reward-batch-table:not(.reward-preview-one-row) td:nth-child(11),.reward-batch-table:not(.reward-preview-one-row) td:nth-child(13){width:7%} .reward-batch-table:not(.reward-preview-one-row) td:nth-child(14){width:7.5%;font-weight:700} .reward-batch-table:not(.reward-preview-one-row) td:nth-child(15){width:6.5%;text-align:center} .reward-batch-table:not(.reward-preview-one-row) td:nth-child(16){width:6.5%;text-align:center} .reward-batch-table:not(.reward-preview-one-row) .btn.small{font-size:11px!important;padding:3px 5px!important;min-height:24px} .reward-preview-one-row{overflow-x:hidden!important;padding:0 12px 8px!important} .reward-preview-one-row table{width:100%!important;min-width:0!important;max-width:100%!important;table-layout:fixed!important;font-size:13px!important} .reward-preview-one-row th,.reward-preview-one-row td{padding:6px 3px!important;font-size:13px!important;line-height:1.22!important;white-space:normal!important;vertical-align:middle} .reward-preview-one-row th{font-size:12px!important} /* Popup columns: Thu/Chi/LN, then four groups Tên/%/Thưởng, then Tổng. */ .reward-preview-one-row th:nth-child(1),.reward-preview-one-row td:nth-child(1), .reward-preview-one-row th:nth-child(2),.reward-preview-one-row td:nth-child(2), .reward-preview-one-row th:nth-child(3),.reward-preview-one-row td:nth-child(3){width:7%!important} .reward-preview-one-row tr:nth-child(2) th:nth-child(2),.reward-preview-one-row tr:nth-child(2) th:nth-child(5),.reward-preview-one-row tr:nth-child(2) th:nth-child(8),.reward-preview-one-row tr:nth-child(2) th:nth-child(11){width:28px!important;max-width:28px!important;padding-left:1px!important;padding-right:1px!important} .reward-preview-one-row tr:nth-child(3) td:nth-child(5),.reward-preview-one-row tr:nth-child(3) td:nth-child(8),.reward-preview-one-row tr:nth-child(3) td:nth-child(11),.reward-preview-one-row tr:nth-child(3) td:nth-child(14){width:28px!important;max-width:28px!important;padding-left:1px!important;padding-right:1px!important;text-align:center} @media(max-width:900px){.reward-batch-table:not(.reward-preview-one-row){overflow-x:auto!important}.reward-batch-table:not(.reward-preview-one-row) table{min-width:900px!important}.reward-preview-one-row{overflow-x:auto!important}.reward-preview-one-row table{min-width:900px!important}} /* B1.12.95 - reward popup: explicit column geometry. Do not target rows with nth-child. */ .reward-preview-one-row{padding:0 12px 8px!important;overflow-x:hidden!important} .reward-preview-one-row table{width:100%!important;max-width:100%!important;min-width:0!important;table-layout:fixed!important} .reward-preview-one-row col.reward-col-paid{width:7%!important} .reward-preview-one-row col.reward-col-cost{width:5%!important} .reward-preview-one-row col.reward-col-profit{width:7%!important} .reward-preview-one-row col.reward-col-name{width:9%!important} .reward-preview-one-row col.reward-col-rate{width:28px!important} .reward-preview-one-row col.reward-col-amount{width:7.5%!important} .reward-preview-one-row col.reward-col-total{width:7%!important} .reward-preview-one-row th,.reward-preview-one-row td{padding:7px 3px!important;font-size:14px!important;line-height:1.25!important;vertical-align:middle!important;text-align:center!important;overflow-wrap:normal!important;word-break:normal!important} .reward-preview-one-row th{font-size:13px!important} .reward-preview-one-row td:nth-child(1),.reward-preview-one-row td:nth-child(2),.reward-preview-one-row td:nth-child(3), .reward-preview-one-row td:nth-child(6),.reward-preview-one-row td:nth-child(9),.reward-preview-one-row td:nth-child(12),.reward-preview-one-row td:nth-child(15),.reward-preview-one-row td:nth-child(16){white-space:nowrap!important} .reward-preview-one-row td:nth-child(5),.reward-preview-one-row td:nth-child(8),.reward-preview-one-row td:nth-child(11),.reward-preview-one-row td:nth-child(14){padding-left:0!important;padding-right:0!important;white-space:nowrap!important} .reward-preview-one-row td:nth-child(4),.reward-preview-one-row td:nth-child(7),.reward-preview-one-row td:nth-child(10),.reward-preview-one-row td:nth-child(13){white-space:normal!important;overflow-wrap:break-word!important} @media(max-width:900px){.reward-preview-one-row{overflow-x:auto!important}.reward-preview-one-row table{min-width:1100px!important}} /* B1.12.96 - reward list uses the same explicit column geometry as reward popup. */ .reward-batch-table:not(.reward-preview-one-row){overflow-x:hidden!important} .reward-batch-table:not(.reward-preview-one-row) table{width:100%!important;max-width:100%!important;min-width:0!important;table-layout:fixed!important;font-size:14px!important} .reward-batch-table:not(.reward-preview-one-row) col.reward-list-date{width:5.5%!important} .reward-batch-table:not(.reward-preview-one-row) col.reward-list-contract{width:6%!important} .reward-batch-table:not(.reward-preview-one-row) col.reward-list-paid{width:6.5%!important} .reward-batch-table:not(.reward-preview-one-row) col.reward-list-cost{width:5%!important} .reward-batch-table:not(.reward-preview-one-row) col.reward-list-profit{width:6.5%!important} .reward-batch-table:not(.reward-preview-one-row) col.reward-list-name{width:7.5%!important} .reward-batch-table:not(.reward-preview-one-row) col.reward-list-amount{width:6%!important} .reward-batch-table:not(.reward-preview-one-row) col.reward-list-total{width:6.5%!important} .reward-batch-table:not(.reward-preview-one-row) col.reward-list-status{width:5%!important} .reward-batch-table:not(.reward-preview-one-row) col.reward-list-action{width:5%!important} .reward-batch-table:not(.reward-preview-one-row) th,.reward-batch-table:not(.reward-preview-one-row) td{padding:6px 3px!important;font-size:14px!important;line-height:1.25!important;min-width:0!important;word-break:normal!important;overflow-wrap:normal!important;vertical-align:middle!important} .reward-batch-table:not(.reward-preview-one-row) th{font-size:13px!important;text-align:center!important} .reward-batch-table:not(.reward-preview-one-row) td:nth-child(1),.reward-batch-table:not(.reward-preview-one-row) td:nth-child(2),.reward-batch-table:not(.reward-preview-one-row) td:nth-child(3),.reward-batch-table:not(.reward-preview-one-row) td:nth-child(4),.reward-batch-table:not(.reward-preview-one-row) td:nth-child(5),.reward-batch-table:not(.reward-preview-one-row) td:nth-child(7),.reward-batch-table:not(.reward-preview-one-row) td:nth-child(9),.reward-batch-table:not(.reward-preview-one-row) td:nth-child(11),.reward-batch-table:not(.reward-preview-one-row) td:nth-child(13),.reward-batch-table:not(.reward-preview-one-row) td:nth-child(14){white-space:nowrap!important} .reward-batch-table:not(.reward-preview-one-row) td:nth-child(6),.reward-batch-table:not(.reward-preview-one-row) td:nth-child(8),.reward-batch-table:not(.reward-preview-one-row) td:nth-child(10),.reward-batch-table:not(.reward-preview-one-row) td:nth-child(12){white-space:normal!important;overflow-wrap:break-word!important} .reward-batch-table:not(.reward-preview-one-row) td:nth-child(15),.reward-batch-table:not(.reward-preview-one-row) td:nth-child(16){text-align:center!important} .reward-batch-table:not(.reward-preview-one-row) .btn.small{font-size:11px!important;padding:3px 4px!important;min-height:24px!important} /* B1.12.97 - Employee directory */ .employee-page-head{align-items:flex-start}.employee-page-head h1{margin-bottom:3px}.employee-page-head p{margin:0} .employee-team-summary{padding:18px 20px}.employee-summary-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}.employee-summary-head h3{margin:0}.employee-summary-head div{display:flex;align-items:center;gap:8px}.employee-summary-head b{font-size:28px;color:var(--p)} .employee-team-cards{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}.employee-team-card{display:flex;flex-direction:column;min-height:108px;padding:14px 16px;border:1px solid #e2e8f0;border-radius:12px;text-decoration:none;color:#334155;background:#f8fafc}.employee-team-card>span{align-self:flex-start;padding:3px 8px;border-radius:7px;background:#e2e8f0;font-weight:800;font-size:12px}.employee-team-card small{margin-top:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.employee-team-card b{margin-top:auto;font-size:25px}.employee-team-card-1{background:#fff5f5}.employee-team-card-2{background:#eff6ff}.employee-team-card-3{background:#f0fdf4}.employee-team-card-4{background:#f5f3ff}.employee-team-card-5{background:#fffbeb}.employee-team-card-6{background:#f8fafc} .employee-filter-card{padding:16px 20px}.employee-filter-card h3{margin:0 0 12px}.employee-search-row input{width:62%;min-width:360px}.employee-filter-grid{display:grid;grid-template-columns:1fr 1fr 1fr 1.35fr auto;gap:14px;align-items:end;margin-top:12px}.employee-filter-grid label{display:block;margin-bottom:5px}.employee-date-range{display:grid;grid-template-columns:1fr 1fr;gap:6px}.employee-filter-action .btn{min-height:40px} .employee-list-card{padding:0;overflow:hidden}.employee-list-card .table-wrap{margin:0}.employee-list-table{width:100%;font-size:13px}.employee-list-table th,.employee-list-table td{padding:10px 8px;vertical-align:middle;white-space:nowrap}.employee-name-cell{display:flex;align-items:center;gap:8px;text-decoration:none}.employee-name-cell img,.employee-name-cell>span{width:30px;height:30px;border-radius:50%;object-fit:cover;display:inline-flex;align-items:center;justify-content:center;background:#e2e8f0;font-weight:700}.employee-team-badge{display:inline-block;padding:3px 8px;border-radius:7px;background:#e0f2fe;color:#075985;font-weight:700}.employee-status{display:inline-block;padding:4px 8px;border-radius:999px;font-size:12px}.employee-status.active{background:#dcfce7;color:#166534}.employee-status.inactive{background:#f1f5f9;color:#64748b} @media(max-width:1200px){.employee-team-cards{grid-template-columns:repeat(3,1fr)}.employee-filter-grid{grid-template-columns:repeat(2,1fr)}.employee-filter-action{grid-column:span 2}.employee-search-row input{width:100%;min-width:0}} @media(max-width:650px){.employee-team-cards{grid-template-columns:repeat(2,1fr)}.employee-filter-grid{grid-template-columns:1fr}.employee-filter-action{grid-column:auto}.employee-date-range{grid-template-columns:1fr}.employee-summary-head{align-items:flex-start}.employee-list-card{overflow-x:auto}} /* B1.12.98 - compact employee detail and organization chart */ .employee-detail-card{padding:16px 18px!important} .employee-detail-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:24px;row-gap:0} .employee-detail-grid p{margin:7px 0;min-width:0} .employee-compact-card,.employee-attachments-compact{width:50%;max-width:760px;box-sizing:border-box} .employee-compact-card form input[type="password"],.employee-compact-card form input[type="file"],.employee-attachments-compact form input[type="file"]{max-width:100%} .apolat-org-view{overflow-x:auto} .apolat-org-view .org-tree{min-width:0!important;width:max-content;max-width:none;padding:6px 0 14px!important;margin:0 auto} .apolat-org-view .org-tree ul{padding-top:12px!important} .apolat-org-view .org-tree li{padding:12px 3px 0!important} .apolat-org-view .org-tree li:before,.apolat-org-view .org-tree li:after{height:12px!important} .apolat-org-view .org-tree ul ul:before{height:12px!important} .apolat-org-view .org-node{min-width:118px!important;max-width:155px!important;padding:6px 8px!important;border-radius:8px!important;font-size:13px;line-height:1.2} .apolat-org-view .org-node span{font-size:11px!important;margin-top:2px!important} @media(max-width:900px){.employee-detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.employee-compact-card,.employee-attachments-compact{width:100%;max-width:none}} @media(max-width:600px){.employee-detail-grid{grid-template-columns:1fr}} /* B1.12.100 - employee secondary cards on one row */ .employee-secondary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:start;margin-top:14px} .employee-secondary-grid .employee-compact-card,.employee-secondary-grid .employee-attachments-compact{width:100%!important;max-width:none!important;margin:0!important;min-width:0;box-sizing:border-box} .employee-secondary-grid .employee-attachments-compact>.card{width:100%;margin:0;box-sizing:border-box} .employee-secondary-grid .card{padding:14px 16px} .employee-secondary-grid h3{margin-top:0;margin-bottom:10px} .employee-secondary-grid input[type=file],.employee-secondary-grid input[type=password]{width:100%;max-width:100%;box-sizing:border-box} @media(max-width:1050px){.employee-secondary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:700px){.employee-secondary-grid{grid-template-columns:1fr}} /* B1.12.101 - tighter org chart + flat Apolat links */ .apolat-org-view .org-tree li{padding-left:0!important;padding-right:0!important} .apolat-org-view .org-node{padding-left:2px!important;padding-right:2px!important} .apolat-org-view .org-node b{color:var(--p)!important} .apolat-org-view .org-tree li+li{margin-left:3px!important} .apolat-flat-links{margin-bottom:16px} .apolat-link-admin{max-width:900px} /* B1.12.103 - leave form: wider morning/afternoon selector, date 30px shorter */ .leave-request-form .leave-datetime-inline{grid-template-columns:minmax(120px,1fr) 112px!important} .leave-request-form .leave-datetime-inline select{min-width:112px!important;width:112px!important} @media(max-width:650px){ .leave-request-form .leave-datetime-inline{grid-template-columns:minmax(0,1fr) 106px!important} .leave-request-form .leave-datetime-inline select{min-width:106px!important;width:106px!important} } /* B1.12.104 - Reward list: compact typography to prevent overflow. */ .reward-batch-table:not(.reward-preview-one-row) table{font-size:13px!important} .reward-batch-table:not(.reward-preview-one-row) th{font-size:12px!important;line-height:1.18!important;padding:5px 2px!important} .reward-batch-table:not(.reward-preview-one-row) td{font-size:13px!important;line-height:1.2!important;padding:5px 2px!important} /* Money/value columns are denser because long formatted amounts need more room. */ .reward-batch-table:not(.reward-preview-one-row) td:nth-child(3), .reward-batch-table:not(.reward-preview-one-row) td:nth-child(4), .reward-batch-table:not(.reward-preview-one-row) td:nth-child(5), .reward-batch-table:not(.reward-preview-one-row) td:nth-child(7), .reward-batch-table:not(.reward-preview-one-row) td:nth-child(9), .reward-batch-table:not(.reward-preview-one-row) td:nth-child(11), .reward-batch-table:not(.reward-preview-one-row) td:nth-child(13), .reward-batch-table:not(.reward-preview-one-row) td:nth-child(14){font-size:12px!important;letter-spacing:-.1px!important} .reward-batch-table:not(.reward-preview-one-row) .btn.small{font-size:10.5px!important;padding:3px 3px!important} /* B1.12.105 - Reward navigation links */ .reward-date-link{font-weight:700;text-decoration:none;white-space:nowrap}.reward-date-link:hover{text-decoration:underline}.reward-customer-link{margin-top:2px;font-size:11px;line-height:1.2}.reward-customer-link a{font-weight:500;text-decoration:none}.reward-customer-link a:hover{text-decoration:underline} /* B1.12.108 - Reward list filters */ .reward-list-filters{display:grid;grid-template-columns:minmax(190px,1.35fr) minmax(135px,.8fr) minmax(135px,.8fr) minmax(150px,.9fr) auto;gap:10px;align-items:end} .reward-list-filters>div{min-width:0}.reward-list-filters label{display:block;margin-bottom:5px}.reward-filter-action{display:flex;gap:6px;align-items:center;white-space:nowrap} @media(max-width:1050px){.reward-list-filters{grid-template-columns:repeat(2,minmax(0,1fr))}.reward-filter-action{grid-column:span 2}} @media(max-width:650px){.reward-list-filters{grid-template-columns:1fr}.reward-filter-action{grid-column:auto}} /* B1.12.109 - contract-specific reward list heading */ .reward-contract-heading{display:flex;align-items:flex-start;gap:42px;padding:14px 18px;margin-bottom:14px} .reward-contract-heading>div:first-child{flex:1;min-width:0} .reward-contract-heading h3,.reward-contract-heading p{margin:3px 0 0} .reward-contract-heading h3{font-size:16px;line-height:1.35} .reward-contract-heading p{font-size:15px} @media(max-width:700px){.reward-contract-heading{display:block}.reward-contract-heading>div+div{margin-top:10px}} /* B1.12.111 - contract reward table: prevent employee names from overlapping amounts */ .reward-contract-list table{table-layout:fixed!important;width:100%!important} .reward-contract-list col.reward-list-date{width:7%!important} .reward-contract-list col.reward-list-paid{width:7%!important} .reward-contract-list col.reward-list-cost{width:6%!important} .reward-contract-list col.reward-list-profit{width:7%!important} .reward-contract-list col.reward-list-name{width:8.5%!important} .reward-contract-list col.reward-list-amount{width:6%!important} .reward-contract-list col.reward-list-total{width:7%!important} .reward-contract-list col.reward-list-status{width:6%!important} .reward-contract-list col.reward-list-action{width:2%!important} .reward-contract-list th,.reward-contract-list td{box-sizing:border-box!important;overflow:hidden!important} .reward-contract-list td:nth-child(5),.reward-contract-list td:nth-child(7),.reward-contract-list td:nth-child(9),.reward-contract-list td:nth-child(11){white-space:normal!important;overflow-wrap:anywhere!important;word-break:normal!important;line-height:1.2!important} .reward-contract-list td:nth-child(1),.reward-contract-list td:nth-child(2),.reward-contract-list td:nth-child(3),.reward-contract-list td:nth-child(4),.reward-contract-list td:nth-child(6),.reward-contract-list td:nth-child(8),.reward-contract-list td:nth-child(10),.reward-contract-list td:nth-child(12),.reward-contract-list td:nth-child(13),.reward-contract-list td:nth-child(14){white-space:nowrap!important} .reward-contract-list td:nth-child(6),.reward-contract-list td:nth-child(8),.reward-contract-list td:nth-child(10),.reward-contract-list td:nth-child(12),.reward-contract-list td:nth-child(13){font-size:12px!important;letter-spacing:-.15px!important} /* B1.12.112 - edit pending contract reward batch */ .reward-edit-pending-modal{max-width:920px!important} .reward-edit-pending-modal form{padding:16px 18px 18px} .reward-edit-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:14px} .reward-edit-rate-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px} .reward-edit-rate-card{border:1px solid var(--line);border-radius:10px;padding:12px;min-width:0} .reward-edit-rate-card>b,.reward-edit-rate-card>span{display:block}.reward-edit-rate-card>span{font-size:13px;margin:4px 0 10px;min-height:32px} .reward-edit-rate-card input,.reward-edit-grid input{width:100%;box-sizing:border-box} @media(max-width:900px){.reward-edit-rate-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:650px){.reward-edit-grid,.reward-edit-rate-grid{grid-template-columns:1fr}} /* B1.12.114 - pending rewards edit directly in contract reward table */ .reward-contract-list .reward-inline-expense{width:86px;min-width:0;padding:5px 6px;font-size:12px;text-align:right;box-sizing:border-box} .reward-contract-list .reward-inline-amount{white-space:nowrap;font-size:12px} .reward-contract-list .reward-inline-rate{display:flex;align-items:center;justify-content:flex-end;gap:2px;margin-top:4px;white-space:nowrap} .reward-contract-list .reward-inline-rate input{width:52px;min-width:0;padding:4px 5px;font-size:11px;text-align:right;box-sizing:border-box} .reward-contract-list .reward-inline-rate span{font-size:11px} .reward-contract-list .reward-inline-save-form{margin-bottom:4px} /* B1.12.115 - reward list click-to-edit */ .reward-contract-list .reward-click-edit{appearance:none;-webkit-appearance:none;border:0;background:transparent;padding:0;margin:0;font:inherit;color:inherit;cursor:text;text-align:right;max-width:100%} .reward-contract-list .reward-click-edit small{display:block;margin-top:2px;font-size:10px;color:var(--muted,#6b7280);line-height:1.1} .reward-contract-list .reward-click-edit:hover{background:#fff7ed;border-radius:5px;box-shadow:0 0 0 3px #fff7ed} .reward-contract-list .reward-click-edit-expense{white-space:nowrap} .reward-contract-list .reward-click-input{min-width:0;box-sizing:border-box;padding:4px 5px;font-size:11px;text-align:right} .reward-contract-list .reward-click-rate-input{width:50px} .reward-contract-list .reward-click-expense-input{width:82px} /* B1.12.118 - compact basic information blocks: Opportunity / Contract / Customer */ .entity-detail-card .opportunity-basic-customer, .entity-detail-card .opportunity-basic-people, .entity-detail-card .contract-basic-info{row-gap:4px!important;column-gap:20px!important} .entity-detail-card .opportunity-basic-customer>div, .entity-detail-card .opportunity-basic-people>div{ grid-template-columns:145px minmax(0,1fr)!important; column-gap:8px!important; min-height:26px!important; } .entity-detail-card .opportunity-basic-customer>div:first-child{grid-column:span 2} .entity-detail-card .opportunity-basic-customer>div:first-child{ grid-template-columns:145px minmax(0,1fr)!important; } .entity-detail-card .contract-basic-info>div{ min-height:26px!important; gap:8px!important; } .entity-detail-card .contract-basic-info>div>span{ flex-basis:122px!important; width:122px!important; } .entity-detail-card .entity-basic-divider{margin:8px 0!important} .customer-profile-card .customer-info-grid{row-gap:0!important;column-gap:14px!important} .customer-profile-card .customer-info-grid>div{ display:grid!important; grid-template-columns:112px minmax(0,1fr)!important; align-items:center!important; column-gap:7px!important; min-height:27px!important; padding:4px 0!important; } .customer-profile-card .customer-info-grid>div>span{ margin:0!important; line-height:1.25!important; } .customer-profile-card .customer-info-grid>div>b{ margin:0!important; line-height:1.3!important; min-width:0; } @media(max-width:1100px){ .customer-profile-card .customer-info-grid>div{grid-template-columns:125px minmax(0,1fr)!important} } @media(max-width:700px){ .entity-detail-card .opportunity-basic-customer>div, .entity-detail-card .opportunity-basic-people>div{grid-template-columns:135px minmax(0,1fr)!important} .entity-detail-card .opportunity-basic-customer>div:first-child{grid-column:auto;grid-template-columns:135px minmax(0,1fr)!important} .customer-profile-card .customer-info-grid>div{grid-template-columns:125px minmax(0,1fr)!important} } /* B1.12.119 - customer detail: 3 properties per row, long values get more room */ .customer-profile-card .customer-info-grid{ grid-template-columns:repeat(3,minmax(0,1fr))!important; column-gap:18px!important; } .customer-profile-card .customer-info-grid>div{ grid-template-columns:132px minmax(0,1fr)!important; column-gap:8px!important; min-height:25px!important; padding:5px 0!important; } .customer-profile-card .customer-info-grid>div.customer-info-wide{ grid-column:span 2; grid-template-columns:132px minmax(0,1fr)!important; } @media(max-width:1200px){ .customer-profile-card .customer-info-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important} .customer-profile-card .customer-info-grid>div.customer-info-wide{grid-column:span 2} } @media(max-width:700px){ .customer-profile-card .customer-info-grid{grid-template-columns:1fr!important} .customer-profile-card .customer-info-grid>div.customer-info-wide{grid-column:auto} .customer-profile-card .customer-info-grid>div{grid-template-columns:125px minmax(0,1fr)!important} } /* B1.12.120 - rewards list compact identifiers + contract info placement + cell editor actions */ .reward-batch-table:not(.reward-contract-list) .reward-date-link{font-size:11px!important;white-space:nowrap!important} .reward-batch-table:not(.reward-contract-list) td:nth-child(2)>a:first-child{font-size:11px!important;white-space:nowrap!important} .reward-batch-table:not(.reward-contract-list) .reward-customer-link,.reward-batch-table:not(.reward-contract-list) .reward-customer-link a{font-size:11px!important;line-height:1.2} .reward-contract-heading-plain{display:flex;align-items:flex-start;gap:28px;padding:0 4px 9px;margin:2px 0 8px;border:0;border-bottom:1px solid var(--border,#e5e7eb);background:transparent;box-shadow:none;border-radius:0} .reward-contract-heading-plain>div:first-child{flex:1;min-width:0} .reward-contract-heading-plain h3,.reward-contract-heading-plain p{margin:2px 0 0} .reward-contract-heading-plain h3{font-size:15px;line-height:1.3} .reward-contract-heading-plain p{font-size:14px} .reward-contract-list .reward-click-edit{display:inline-flex;flex-direction:column;align-items:flex-end;justify-content:center;vertical-align:middle} .reward-contract-list .reward-cell-editor{display:inline-flex;align-items:center;gap:2px} .reward-contract-list .reward-cell-edit-actions{display:inline-flex;gap:3px;margin-top:3px} .reward-contract-list .reward-cell-save,.reward-contract-list .reward-cell-cancel{width:21px;height:20px;min-width:21px;padding:0;border:1px solid #d1d5db;border-radius:4px;background:#fff;cursor:pointer;font-size:13px;line-height:18px;text-align:center} .reward-contract-list .reward-cell-save{font-weight:700} .reward-contract-list .reward-cell-cancel{color:#b42318} .reward-contract-list .reward-click-input{height:25px!important;padding:2px 4px!important;font-size:12px!important;line-height:1!important;box-sizing:border-box} .reward-contract-list .reward-click-rate-input{width:55px!important} .reward-contract-list .reward-click-expense-input{width:92px!important} @media(max-width:700px){.reward-contract-heading-plain{display:block}.reward-contract-heading-plain>div+div{margin-top:7px}} /* B1.12.122 - reward report compact summary */ .reward-report .reward-report-total td{border-top:2px solid #dbe2ea;background:#f8fafc;white-space:nowrap} .report-filter .reward-report-filter-field{min-width:180px} /* B1.12.124 - expense list enhancements */ .expense-list-table .expense-object-content{display:block;margin-top:3px;max-width:260px;white-space:normal;line-height:1.25;color:var(--muted,#6b7280)} .expense-list-table td:first-child{white-space:nowrap} .expense-list-modal .customer-modal-box{width:min(1180px,94vw)} /* B1.12.128 - settings cards spacing */ .settings-half{width:calc(50% - 14px)!important;margin-right:24px!important;margin-bottom:20px!important;box-sizing:border-box} .settings-half:nth-of-type(even){margin-right:0!important} @media(max-width:1000px){.settings-half{width:100%!important;margin-right:0!important;margin-bottom:16px!important}} /* B1.12.129 - real settings two-column grid spacing */ .settings-cards-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 28px;align-items:start;width:100%;box-sizing:border-box;margin:0 0 24px} .settings-cards-grid>.settings-half{display:block!important;width:auto!important;max-width:none!important;margin:0!important;min-width:0;box-sizing:border-box} @media(max-width:1000px){.settings-cards-grid{grid-template-columns:1fr;gap:18px}} /* B1.12.130 */ .receivable-paid-amount{color:var(--p)!important} .receivable-remaining-amount{color:#dc2626!important} .org-node-team{position:relative;cursor:default} .org-team-members{display:none;position:absolute;z-index:50;left:50%;top:calc(100% + 8px);transform:translateX(-50%);min-width:230px;max-width:320px;background:#fff;border:1px solid #dbe2ea;border-radius:10px;box-shadow:0 12px 30px rgba(15,23,42,.16);padding:10px 12px;text-align:left} .org-node-team:hover .org-team-members{display:block} .org-team-members strong{display:block;margin-bottom:6px;font-size:12px} .org-team-members span{display:block;padding:3px 0;font-size:12px;white-space:nowrap} /* B1.12.131 - receivable total preview + entity information groups + inline opportunity stage */ .receivable-total-preview{min-height:42px;display:flex;align-items:center;padding:0 12px;border:1px solid #d9e1ea;border-radius:8px;background:#f8fafc;font-size:17px;font-weight:700;color:var(--p)} .entity-info-group>h3{display:flex;align-items:center;gap:9px;margin-bottom:16px} .entity-info-group>h3 i{color:var(--p);font-size:17px} .opportunity-stage-inline{margin:0} .stage-inline-display{border:0;background:transparent;padding:0;display:flex;align-items:center;gap:7px;cursor:pointer;color:inherit;font:inherit} .stage-inline-display b{font-size:inherit}.stage-inline-display i{font-size:10px;color:#64748b} .opportunity-stage-inline select{margin-top:4px;min-width:150px;height:36px;padding:5px 28px 5px 9px;font-weight:700} /* B1.12.138: Opportunity/Contract two primary information cards on one row */ .entity-detail-main{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start} .entity-detail-main>.entity-detail-card:nth-child(n+3){grid-column:1/-1} @media(max-width:900px){ .entity-detail-main{grid-template-columns:1fr} .entity-detail-main>.entity-detail-card:nth-child(n+3){grid-column:auto} } /* B1.12.139: half-width primary cards - one information item per row */ .entity-detail-main>.entity-info-group .detail-kv-grid{ grid-template-columns:minmax(0,1fr)!important; column-gap:0!important; } .entity-detail-main>.entity-info-group .opportunity-basic-customer>div:first-child{ grid-column:auto!important; } @media(max-width:900px){ .entity-detail-main>.entity-info-group .detail-kv-grid{ grid-template-columns:minmax(0,1fr)!important; } } /* B1.12.140 - editable opportunity status */ .opportunity-status-inline{margin:0} .opportunity-status-inline select{margin-top:4px;min-width:170px;height:36px;padding:5px 28px 5px 9px;font-weight:700} /* B1.12.141 - merge the two primary information sections into one visual frame */ .entity-detail-main{ column-gap:0; row-gap:14px; align-items:stretch; } .entity-detail-main>.entity-info-group:nth-child(1), .entity-detail-main>.entity-info-group:nth-child(2){ margin:0!important; height:100%; box-shadow:none!important; } .entity-detail-main>.entity-info-group:nth-child(1){ border-radius:12px 0 0 12px!important; border-right:0!important; } .entity-detail-main>.entity-info-group:nth-child(2){ border-radius:0 12px 12px 0!important; border-left:1px solid var(--border,#dfe5ec)!important; } @media(max-width:900px){ .entity-detail-main{row-gap:14px} .entity-detail-main>.entity-info-group:nth-child(1), .entity-detail-main>.entity-info-group:nth-child(2){ border:1px solid var(--border,#dfe5ec)!important; border-radius:12px!important; } } /* B1.12.142 - contract finance uses the full width below both information columns */ .entity-detail-main>.entity-basic-finance-wide{ grid-column:1/-1; margin-top:-14px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; padding:18px 20px 20px; border:1px solid var(--border,#dfe5ec); border-top:1px solid var(--border,#dfe5ec); border-radius:0 0 12px 12px; background:#fff; } .entity-detail-main>.entity-info-group:nth-child(1), .entity-detail-main>.entity-info-group:nth-child(2){border-radius:12px 0 0 0!important;} .entity-detail-main>.entity-info-group:nth-child(2){border-radius:0 12px 0 0!important;} .entity-basic-finance-wide>div{min-width:0;width:auto!important;} .entity-basic-finance-wide b{white-space:normal;overflow-wrap:anywhere;} @media(max-width:900px){ .entity-detail-main>.entity-basic-finance-wide{grid-column:auto;margin-top:0;grid-template-columns:repeat(2,minmax(0,1fr));border-radius:12px;} .entity-detail-main>.entity-info-group:nth-child(1),.entity-detail-main>.entity-info-group:nth-child(2){border-radius:12px!important;} } @media(max-width:560px){.entity-detail-main>.entity-basic-finance-wide{grid-template-columns:1fr;}} /* B1.12.144 - opportunity detail refinements */ .btn.secondary{background:var(--p2);color:#fff}.btn.secondary:hover{filter:brightness(.92)} .opportunity-related-inline{white-space:pre-line;line-height:1.7;display:inline-block} .opportunity-contact-current{display:block;width:100%;padding:0;border:0;background:transparent;text-align:left;color:inherit;cursor:pointer;border-radius:8px} .opportunity-contact-current:hover{background:#f8fafc} .opportunity-contact-panel{display:none;margin-top:10px;padding-top:10px;border-top:1px solid var(--b)} .opportunity-contact-inline.open .opportunity-contact-panel{display:block} .opportunity-contact-panel .contract-contact-results{max-height:280px;overflow:auto;margin-top:8px} /* B1.12.147 - compact merged entity info frame + clearer text */ .entity-detail-layout{align-items:start!important;} .entity-detail-main{align-self:start!important;align-content:start!important;} .entity-detail-main>.entity-info-group{height:auto!important;min-height:0!important;} .entity-detail-main>.entity-info-group .detail-kv-grid>div{align-items:center;} .entity-detail-main>.entity-info-group .detail-kv-grid span{font-size:13px!important;} .entity-detail-main>.entity-info-group .detail-kv-grid b{font-size:15px!important;color:#000!important;} .entity-detail-main>.entity-info-group .detail-kv-grid b a, .entity-detail-main>.entity-info-group .detail-kv-grid b .inline-editable, .entity-detail-main>.entity-info-group .detail-kv-grid b .opportunity-related-inline, .entity-detail-main>.entity-info-group .detail-kv-grid b .contract-related-inline{color:#000!important;} /* B1.12.149 - compact aligned task detail */ .task-detail-card{height:auto!important;min-height:0!important} .task-detail-info{display:grid;grid-template-columns:1fr;gap:0;margin-top:12px} .task-detail-info>div{display:grid;grid-template-columns:210px minmax(0,1fr);gap:18px;align-items:start;padding:9px 0;line-height:1.45} .task-detail-info>div>span{color:#64748b;font-weight:500} .task-detail-info>div>b{color:#000;font-weight:600;min-width:0} .task-detail-info>div>b a{color:var(--primary);font-weight:600} .task-status-row{margin-top:14px;padding-top:14px;border-top:1px solid #e5e7eb} @media(max-width:700px){.task-detail-info>div{grid-template-columns:1fr;gap:3px}} /* B1.12.151 - normal task detail typography; title becomes first aligned row */ .task-detail-info{margin-top:0!important} .task-detail-info>div{grid-template-columns:180px minmax(0,1fr)!important;gap:14px!important;padding:7px 0!important;line-height:1.45!important} @media(max-width:700px){.task-detail-info>div{grid-template-columns:1fr!important;gap:3px!important}} /* B1.12.152 - restore clean Select2-like inline editors in Opportunity/Contract detail */ .inline-editor .inline-select2{position:relative;display:inline-block;min-width:240px;max-width:min(440px,70vw)} .inline-select2-display{width:100%;min-height:36px;padding:7px 34px 7px 10px;border:1px solid #cbd5e1;border-radius:7px;background:#fff;color:#111827;text-align:left;font:inherit;cursor:pointer;position:relative} .inline-select2-display:after{content:'▾';position:absolute;right:11px;top:50%;transform:translateY(-50%);color:#64748b;font-size:12px} .inline-select2.open .inline-select2-display{border-color:var(--p);box-shadow:0 0 0 2px color-mix(in srgb,var(--p) 15%,transparent)} .inline-select2-panel{display:none;position:absolute;z-index:10050;left:0;top:calc(100% + 4px);width:max(100%,280px);max-width:min(440px,85vw);padding:7px;background:#fff;border:1px solid #cbd5e1;border-radius:8px;box-shadow:0 10px 28px rgba(15,23,42,.16)} .inline-select2.open .inline-select2-panel{display:block} .inline-editor .inline-select2-search{display:block;width:100%!important;min-width:0!important;max-width:none!important;box-sizing:border-box;padding:7px 9px;margin:0 0 6px!important;border:1px solid #cbd5e1;border-radius:6px;font-size:13px} .inline-select2-results{display:block;max-height:220px;overflow-y:auto} .inline-select2-option{display:block;width:100%;padding:7px 9px;border:0;border-radius:5px;background:#fff;color:#111827;text-align:left;font-size:13px;cursor:pointer} .inline-select2-option:hover,.inline-select2-option.active{background:#f1f5f9;color:var(--p)} @media(max-width:650px){.inline-editor .inline-select2{width:100%;min-width:0;max-width:100%}.inline-select2-panel{width:100%;max-width:100%}} /* B1.12.157 - compact content textarea in Opportunity/Contract form */ .entity-create-form textarea.entity-content-textarea{height:62px;min-height:62px;resize:vertical} /* B1.12.161 - Customer detail: split customer information into two titled panels */ .customer-profile-split{padding:14px!important} .customer-info-panels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px} .customer-info-panel{min-width:0;border:1px solid #e5e7eb;border-radius:12px;background:#fff;overflow:hidden} .customer-info-panel-title{display:flex;align-items:center;gap:9px;padding:12px 15px;background:linear-gradient(90deg,#f5f8ff 0%,#f8fbff 100%);border-bottom:1px solid #edf1f5} .customer-info-panel:nth-child(2) .customer-info-panel-title{background:linear-gradient(90deg,#f3faf9 0%,#f7fbfa 100%)} .customer-info-panel-title i{width:28px;height:28px;display:grid;place-items:center;border-radius:8px;background:#fff;color:var(--p);font-size:15px;box-shadow:0 1px 4px rgba(15,23,42,.08)} .customer-info-panel-title h3{margin:0;font-size:16px;line-height:1.25;color:#111827} .customer-info-list{padding:4px 15px 8px} .customer-info-list>div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px;align-items:start;min-height:39px;padding:9px 0;border-bottom:1px solid #eef1f4} .customer-info-list>div:last-child{border-bottom:0} .customer-info-list>div>span{color:#64748b;line-height:1.35} .customer-info-list>div>b{color:#111827;font-weight:600;line-height:1.35;min-width:0;overflow-wrap:anywhere} .customer-info-list .inline-editable{cursor:pointer} @media(max-width:1050px){.customer-info-panels{grid-template-columns:1fr}.customer-info-list>div{grid-template-columns:160px minmax(0,1fr)}} @media(max-width:600px){.customer-profile-split{padding:10px!important}.customer-info-panels{gap:12px}.customer-info-list{padding:3px 12px 7px}.customer-info-list>div{grid-template-columns:125px minmax(0,1fr);gap:8px;padding:8px 0}.customer-info-panel-title{padding:11px 12px}} /* B1.12.162 - customer info: two independent panels, no outer card */ .customer-profile-split{padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important} /* B1.12.163 - Customer detail: balanced card spacing/alignment */ .customer-report-top{column-gap:16px!important;row-gap:16px!important;margin-bottom:16px!important;align-items:stretch!important} .customer-info-panels{gap:16px!important;align-items:stretch!important;height:100%} .customer-info-panel{height:100%} .customer-contact-card{height:100%;margin:0!important} .customer-report-analytics-row{gap:16px!important;margin-top:0!important} @media(max-width:1050px){.customer-report-top{margin-bottom:16px!important}.customer-info-panels{height:auto}.customer-info-panel,.customer-contact-card{height:auto}} /* B1.12.164 - compact STT columns and contract receivables */ .entity-list-table .stt-col{width:42px;min-width:42px;max-width:42px;text-align:center;padding-left:4px!important;padding-right:4px!important;white-space:nowrap} .contract-receivables-card .section-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px} .contract-receivables-card .section-title h3{margin:0} .contract-related-inline{line-height:1.7} /* B1.12.168 - contract debt full width + contact detail rows */ .entity-detail-main>.contract-receivables-card{grid-column:1/-1!important;width:100%!important;max-width:none!important;box-sizing:border-box} .contract-receivables-table{width:100%}.contract-receivables-table table{width:100%;min-width:760px} .contract-debt-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 14px} .contract-debt-kpis>div{border:1px solid #e2e8f0;border-radius:10px;padding:12px 14px;background:#fff} .contract-debt-kpis span{display:block;color:#64748b;font-size:13px;margin-bottom:5px}.contract-debt-kpis span small{font-size:11px}.contract-debt-kpis b{font-size:18px;color:#0f172a} .contact-detail-card .contact-detail-grid{display:block} .contact-detail-card .contact-detail-grid>div{display:grid;grid-template-columns:190px minmax(0,1fr);gap:18px;align-items:start;padding:10px 0;border-bottom:1px solid #eef2f7} .contact-detail-card .contact-detail-grid>div:last-child{border-bottom:0}.contact-detail-card .contact-detail-grid span{display:block;margin:0;color:#64748b;font-size:13px}.contact-detail-card .contact-detail-grid b{color:#000;font-size:15px;min-width:0} @media(max-width:850px){.contract-debt-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:640px){.contract-debt-kpis{grid-template-columns:1fr}.contact-detail-card .contact-detail-grid>div{grid-template-columns:1fr;gap:4px}} /* B1.12.170 - Contract receivables must span the full detail page width, outside main/sidebar columns */ .contract-receivables-fullwidth{display:block;width:100%;max-width:none;box-sizing:border-box;margin-top:16px} .contract-receivables-fullwidth>.contract-receivables-card{display:block;width:100%!important;max-width:none!important;box-sizing:border-box;margin:0} .contract-receivables-fullwidth .contract-receivables-table{display:block;width:100%!important;max-width:none!important;box-sizing:border-box;overflow-x:auto} .contract-receivables-fullwidth .contract-receivables-table table{width:100%!important;max-width:none!important} /* B1.12.171 - Project detail rebuilt to match Contract detail structure */ .project-detail-title .project-title-code{font-size:.78em;font-weight:700;color:#64748b;margin-left:8px} .project-overview-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;margin-bottom:14px} .project-detail-three-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(300px,.9fr);gap:14px;align-items:start;margin-bottom:16px} .project-detail-three-cols>.entity-detail-card,.project-side-stack>.entity-detail-card{margin:0} .project-side-stack{display:grid;grid-template-columns:1fr;gap:14px;align-items:start} .project-kv>div{display:grid;grid-template-columns:135px minmax(0,1fr);gap:12px;align-items:start;min-height:38px;padding:8px 0;border-bottom:1px solid #eef2f7} .project-kv>div:last-child{border-bottom:0}.project-kv span{color:#64748b;font-size:13px}.project-kv b{color:#000;font-size:15px;min-width:0;overflow-wrap:anywhere}.project-description-row b{font-weight:500;line-height:1.55} .project-expenses-card{width:100%;max-width:none;box-sizing:border-box;margin-top:0} .project-expenses-card>.section-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.project-expenses-card>.section-title h3{margin:0} .project-expense-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px}.project-expense-kpis>div{border:1px solid #e2e8f0;border-radius:10px;padding:12px 14px;background:#fff}.project-expense-kpis span{display:block;color:#64748b;font-size:13px;margin-bottom:5px}.project-expense-kpis b{font-size:18px;color:#0f172a}.project-expenses-table table{width:100%;min-width:780px} .project-task-list-card{margin-top:16px} @media(max-width:1100px){.project-detail-three-cols{grid-template-columns:repeat(2,minmax(0,1fr))}.project-side-stack{grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:850px){.project-overview-grid,.project-expense-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.project-detail-three-cols{grid-template-columns:1fr}.project-side-stack{grid-column:auto;grid-template-columns:1fr}} @media(max-width:560px){.project-overview-grid,.project-expense-kpis{grid-template-columns:1fr}.project-kv>div{grid-template-columns:1fr;gap:4px}} /* B1.12.172: STT danh sách Hợp đồng gọn hơn */ .entity-list-table .stt-col{width:30px!important;min-width:30px!important;max-width:30px!important;padding-left:2px!important;padding-right:2px!important;text-align:center} .entity-list-table th.stt-col{font-size:11px!important;font-weight:600} /* B1.12.184 */ .expense-proposal-form #expense-main-row>.expense-bank-row{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important;grid-column:1/-1;margin-bottom:10px!important;align-items:end}.expense-proposal-form #expense-main-row>.expense-bank-row>.expense-bank-field{display:block!important;margin:0!important}.expense-proposal-form #expense-main-row>.expense-bank-row label{display:block;margin:0 0 5px;font-weight:600}.expense-proposal-form #expense-main-row>.expense-bank-row input{width:100%} .receivable-detail-v2 .page-title{margin-bottom:14px}.receivable-top-pay{display:flex;gap:7px;align-items:center}.receivable-top-pay input{width:135px}.receivable-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:14px}.receivable-kpis>div{background:#fff;border:1px solid #edf0f5;border-radius:10px;padding:15px 18px;min-height:88px}.receivable-kpis span{display:block;font-weight:700;margin-bottom:6px}.receivable-kpis b{display:block;font-size:24px;line-height:1.1}.receivable-kpis small{display:block;color:#7b8496;margin-top:5px}.receivable-kpis>div:nth-child(1) b{color:#d71920}.receivable-kpis>div:nth-child(2) b{color:#178b55}.receivable-kpis>div:nth-child(3) b{color:#d47c00}.receivable-status{display:inline-block!important;width:max-content!important;font-size:14px!important;padding:7px 12px;border-radius:18px;background:#fff0f1;color:#d71920}.receivable-status.is-paid{background:#eaf8f0;color:#178b55}.receivable-status.is-partial{background:#fff5e6;color:#d47c00}.receivable-info-card{display:grid;grid-template-columns:1fr 1fr;gap:0;padding:0!important;overflow:hidden}.receivable-info-card section{padding:18px 22px}.receivable-info-card section+section{border-left:1px solid #e7eaf0}.receivable-info-card h3,.receivable-lower-grid h3,.receivable-other-debts h3{margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid #edf0f4}.receivable-kv{display:grid;grid-template-columns:180px minmax(0,1fr);gap:9px 12px;align-items:center}.receivable-kv>span{color:#4d5667}.receivable-kv b{font-weight:600}.receivable-total-label{border-top:1px solid #e6e9ef;padding-top:10px;margin-top:2px;font-size:16px}.receivable-lower-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:14px;margin-top:14px}.receivable-timeline>div{display:grid;grid-template-columns:130px 1fr;gap:12px;padding:8px 0;border-left:2px solid #d71920;margin-left:5px}.receivable-timeline time{padding-left:14px;color:#626c7d}.receivable-timeline p{margin:0}.receivable-other-debts{margin-top:14px}.receivable-other-debts table{width:100%} @media(max-width:800px){.expense-proposal-form #expense-main-row>.expense-bank-row{grid-template-columns:1fr!important}.receivable-kpis{grid-template-columns:1fr 1fr}.receivable-info-card,.receivable-lower-grid{grid-template-columns:1fr}.receivable-info-card section+section{border-left:0;border-top:1px solid #e7eaf0}.receivable-kv{grid-template-columns:125px minmax(0,1fr)}} @media(max-width:520px){.receivable-kpis{grid-template-columns:1fr}.receivable-top-pay{flex-wrap:wrap}} /* B1.12.185 - receivable detail: single title + pastel KPI backgrounds */ .receivable-detail-v2 .receivable-kpis>div:nth-child(1){background:#fff1f2!important;border-color:#ffe1e4!important} .receivable-detail-v2 .receivable-kpis>div:nth-child(2){background:#eefbf4!important;border-color:#d9f3e5!important} .receivable-detail-v2 .receivable-kpis>div:nth-child(3){background:#fff8e9!important;border-color:#ffedc6!important} .receivable-detail-v2 .receivable-kpis>div:nth-child(4){background:#fff1f2!important;border-color:#ffe1e4!important} /* Fit uploaded logos inside the sidebar without horizontal scrolling. */ .sidebar{overflow-x:hidden;overflow-y:auto} .sidebar .brand{min-width:0;max-width:100%;justify-content:center;overflow:hidden} .sidebar .brand-logo{ display:block; flex:0 1 auto; min-width:0; width:100% !important; max-width:100% !important; height:42px !important; max-height:42px; object-fit:contain; object-position:center; } .settings-logo-preview{min-width:0;max-width:100%} .settings-logo-preview img{max-width:min(180px,100%);height:auto;object-fit:contain}