:root{--bg:#f4f5f6;--card:#fff;--text:#202124;--muted:#6d7177;--line:#e3e6e8;--green:#177a4b;--green-soft:#eaf6ef;--red:#b42318;--amber:#966207;--radius:12px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;-webkit-font-smoothing:antialiased}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.5}[hidden],.hidden{display:none!important}:focus-visible{outline:3px solid #177a4b33;outline-offset:2px}.login{min-height:100vh;display:grid;place-items:center;padding:24px}.login-card{width:min(420px,100%);background:#fff;border:1px solid var(--line);border-radius:18px;padding:34px}.brand{display:flex;align-items:center;gap:10px;font-weight:760}.brand i{font-style:normal;width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:#202124;color:#fff}.login h1{font-size:30px;margin:36px 0 8px}.muted{color:var(--muted);font-size:12px;line-height:1.6}.form{display:grid;gap:14px;margin-top:24px}.field{display:grid;gap:6px}.field label{font-size:11px;font-weight:680}.field input,.field select,.field textarea{width:100%;min-height:42px;border:1px solid #d7dbde;border-radius:9px;background:#fff;padding:9px 11px}.field textarea{min-height:84px;resize:vertical}.error{color:var(--red);font-size:11px;min-height:16px}.btn{min-height:40px;border-radius:9px;padding:9px 14px;border:1px solid #d5d9dc;background:#fff;font-weight:650}.btn.primary{border-color:var(--green);background:var(--green);color:#fff}.btn.danger{border-color:#f1c9c5;color:var(--red)}.btn.ghost{border:0;background:transparent;color:var(--green)}.shell{min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:218px;background:#fff;border-right:1px solid var(--line);padding:24px 16px;display:flex;flex-direction:column;z-index:20}.nav{display:grid;gap:4px;margin-top:34px}.nav button{border:0;background:transparent;text-align:left;padding:10px 12px;border-radius:8px;color:#62666c}.nav button.active{background:#eef0f1;color:#171819;font-weight:700}.profile{margin-top:auto;border-top:1px solid var(--line);padding:17px 10px 0}.profile b,.profile span{display:block}.profile span{color:var(--muted);font-size:11px;margin:4px 0 10px}.topbar{position:sticky;top:0;z-index:15;margin-left:218px;height:62px;background:#f4f5f6e8;backdrop-filter:blur(16px);border-bottom:1px solid #0000000a;padding:0 34px;display:flex;align-items:center;justify-content:space-between}.role{font-size:11px;color:var(--green);background:var(--green-soft);padding:6px 10px;border-radius:99px}.main{margin-left:218px}.content{max-width:1180px;margin:auto;padding:42px 40px 110px}.page{display:none}.page.active{display:block}.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:22px}.page-head h1{font-size:30px;letter-spacing:-1px;margin:5px 0}.eyebrow{font-size:10px;color:var(--green);font-weight:750;letter-spacing:.12em}.hero{background:#163a2b;color:#fff;border-radius:16px;padding:30px 32px;display:grid;grid-template-columns:1.4fr .7fr;gap:24px;align-items:center;min-height:196px}.hero.ops{background:#272a2d}.hero small{color:#ffffffaa}.hero-time{font-size:42px;font-weight:740;letter-spacing:-1.5px;margin:15px 0 8px}.hero-side{display:grid;gap:11px;text-align:center}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px}.stat{background:#fff;border:1px solid var(--line);border-radius:10px;padding:17px}.stat span{display:block;color:var(--muted);font-size:10px}.stat strong{display:block;font-size:22px;margin-top:9px}.stat p{margin:6px 0 0;color:#91959a;font-size:9px;line-height:1.45}.section{margin-top:32px}.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:12px}.section-head h2{font-size:18px;margin:0}.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}.empty{padding:48px 20px;text-align:center;color:var(--muted);font-size:12px}.toolbar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;padding:11px;background:#fff;border:1px solid var(--line);border-radius:10px}.toolbar input,.toolbar select{min-height:38px;border:1px solid #d7dbde;border-radius:8px;padding:8px 9px;background:#fafafa;min-width:130px}.toolbar input[type=search]{flex:1;min-width:200px}.table-wrap{overflow:auto}.table{width:100%;border-collapse:collapse;min-width:720px}.table th,.table td{padding:13px 14px;border-bottom:1px solid var(--line);text-align:left;font-size:11px;white-space:nowrap}.table th{background:#fafafa;color:var(--muted);font-size:9px}.table tr:last-child td{border-bottom:0}.table tbody tr[data-id]{cursor:pointer}.table tbody tr[data-id]:hover{background:#fafbfb}.status{display:inline-block;padding:4px 8px;border-radius:99px;background:#f0f1f2;color:#696d72;font-size:9px}.status.confirmed,.status.completed,.status.settled{background:var(--green-soft);color:var(--green)}.status.pending{background:#fff5dc;color:var(--amber)}.status.conflict{background:#fff0ee;color:var(--red)}.week-controls{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.week-grid{display:grid;grid-template-columns:repeat(7,minmax(130px,1fr));border:1px solid var(--line);border-radius:12px;overflow:auto;background:#fff}.day{min-height:320px;border-right:1px solid var(--line);padding:11px}.day:last-child{border:0}.day.today{background:#f4fbf7}.day-head{padding-bottom:9px;border-bottom:1px solid var(--line);font-size:11px}.day-head b,.day-head span{display:block}.day-head span{color:var(--muted);font-size:9px;margin-top:3px}.shift{margin-top:9px;border:1px solid #d7e7dd;border-left:3px solid var(--green);border-radius:8px;padding:9px;background:#f8fcfa;font-size:10px;cursor:pointer}.shift b,.shift span{display:block}.shift span{margin-top:4px;color:var(--muted)}.shift.completed{opacity:.55}.shift.cancelled{border-color:#ddd;border-left-color:#999;background:#f5f5f5}.shift.conflict{border-color:#efc1bc;border-left-color:var(--red);background:#fff5f4}.shift.next{box-shadow:0 0 0 2px #55a77a44}.mobile-schedule{display:none}.rank-switch{display:flex;gap:6px}.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:10px;background:#fff;overflow:hidden}.metric{padding:17px;border-right:1px solid var(--line)}.metric:last-child{border:0}.metric span{color:var(--muted);font-size:10px}.metric strong{display:block;font-size:20px;margin-top:8px}.management-list{display:grid}.management-row{display:grid;grid-template-columns:1fr 1fr .7fr auto;align-items:center;gap:14px;padding:14px;border-bottom:1px solid var(--line);font-size:11px}.management-row:last-child{border:0}.system-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.system-block{padding:19px}.system-block h2{font-size:15px;margin:0 0 7px}.modal-backdrop{position:fixed;inset:0;z-index:80;background:#0005;display:grid;place-items:center;padding:14px}.modal{width:min(580px,100%);max-height:90vh;overflow:auto;background:#fff;border-radius:14px}.modal-head{display:flex;justify-content:space-between;gap:16px;padding:19px 21px;border-bottom:1px solid var(--line)}.modal-head h2{font-size:19px;margin:0}.icon-btn{width:38px;height:38px;border:0;border-radius:50%;background:#f0f1f2;font-size:17px}.modal-body{padding:20px}.modal-foot{display:flex;justify-content:flex-end;gap:8px;padding:14px 20px;border-top:1px solid var(--line)}.detail-list{display:grid}.detail-row{display:flex;justify-content:space-between;gap:18px;padding:11px 0;border-bottom:1px solid var(--line);font-size:11px}.detail-row span:first-child{color:var(--muted)}.mobile-nav{display:none}.notice{padding:12px 13px;border-radius:9px;background:#fff8e7;color:#75500e;font-size:11px;line-height:1.6}.loading{padding:50px;text-align:center;color:var(--muted)}
@media(max-width:960px){.stats,.metric-grid{grid-template-columns:1fr 1fr}.system-grid{grid-template-columns:1fr}.content{padding:32px 26px 100px}.week-grid{grid-template-columns:repeat(7,150px)}}
@media(max-width:700px){.sidebar{display:none}.topbar{margin:0;height:56px;padding:0 14px}.main{margin:0}.content{padding:24px 12px calc(96px + env(safe-area-inset-bottom))}.page-head{display:block}.page-head h1{font-size:26px}.page-head>.btn{width:100%;margin-top:13px}.hero{grid-template-columns:1fr;min-height:0;height:auto;padding:23px 20px;gap:22px}.hero-time{font-size:34px;white-space:normal}.hero-side{text-align:left}.hero-side .btn{width:100%;min-height:46px}.stats,.metric-grid{grid-template-columns:1fr 1fr;gap:7px}.stat{padding:14px}.stat strong{font-size:19px;overflow-wrap:anywhere}.toolbar{display:grid;grid-template-columns:1fr 1fr}.toolbar>*{width:100%;min-width:0!important}.toolbar input[type=search]{grid-column:1/-1}.week-grid{display:none}.mobile-schedule{display:grid;gap:10px}.mobile-day{background:#fff;border:1px solid var(--line);border-radius:10px;padding:13px}.mobile-day h3{font-size:13px;margin:0 0 8px}.shift{width:100%}.table{min-width:680px}.mobile-nav{position:fixed;display:grid;grid-template-columns:repeat(5,1fr);inset:auto 0 0;z-index:40;background:#fffffff2;border-top:1px solid var(--line);padding:7px 4px calc(7px + env(safe-area-inset-bottom));backdrop-filter:blur(16px)}.mobile-nav button{border:0;background:transparent;min-height:48px;border-radius:8px;color:#696d72;font-size:9px}.mobile-nav button.active{background:var(--green-soft);color:var(--green);font-weight:700}.management-row{grid-template-columns:1fr auto}.management-row>span:nth-child(2),.management-row>span:nth-child(3){display:none}.modal{max-height:calc(100vh - 20px)}.modal-head,.modal-body{padding:17px}.modal-foot{padding:13px 17px}}
@media(max-width:390px){.stats,.metric-grid{grid-template-columns:1fr}.hero-time{font-size:30px}.toolbar{grid-template-columns:1fr}.toolbar input[type=search]{grid-column:auto}}

/* 2026-08 UI refresh: aligned with the supplied LiveFlow reference */
:root{--bg:#f7f8fa;--text:#131516;--muted:#747b82;--line:#e8ebee;--green:#0aa64f;--green-soft:#eaf9f0;--radius:16px}
.sidebar{width:232px;padding:26px 18px;box-shadow:1px 0 0 #eef0f2}.main,.topbar{margin-left:232px}.brand{font-size:20px}.brand i{width:34px;height:34px;border-radius:50%;background:linear-gradient(145deg,#0aba5b,#087a40);box-shadow:0 8px 18px #08a64f30}.nav{gap:7px}.nav button{min-height:46px;padding:12px 16px;border-radius:12px;font-size:14px}.nav button.active{background:linear-gradient(90deg,#e8f9ef,#f0fbf4);color:#089848}.topbar{background:#ffffffd9;height:70px}.content{max-width:1280px;padding-top:38px}.page-head h1{font-size:32px}.hero{background:linear-gradient(120deg,#fff 16%,#f2fff7 62%,#ddf8e8);color:var(--text);border:1px solid #e3efe8;box-shadow:0 10px 28px #17261d0d;min-height:210px}.hero.ops{background:linear-gradient(120deg,#fff 16%,#f3fff7 62%,#ddf8e8)}.hero small{color:#343a3e}.hero-time{color:#079a48}.hero .muted{color:#58645d}.card,.stat,.toolbar,.week-grid,.metric-grid{box-shadow:0 8px 24px #1f2b240a}.stat{border-radius:15px;padding:20px}.stat strong{color:#069844;font-size:26px}.btn{border-radius:11px;transition:.18s ease}.btn:hover{transform:translateY(-1px);box-shadow:0 7px 18px #20332712}.btn.primary{background:linear-gradient(135deg,#0db45a,#078b43);border-color:#078b43}.table th{background:#fbfcfc}.table tbody tr[data-id]:hover{background:#f3fbf6}.shift{border-radius:11px;background:#fbfffc}.modal{border-radius:20px;box-shadow:0 30px 80px #0002}.login-card{border-radius:24px;box-shadow:0 20px 70px #1c2a2214}
@media(max-width:700px){.main,.topbar{margin-left:0}.content{padding-top:20px}.page-head h1{font-size:28px}.hero{border-radius:18px}.card,.toolbar{border-radius:14px}.mobile-nav button.active{background:#e9f9ef}}
.actions{display:flex;gap:8px;flex-wrap:wrap}.table input[type=checkbox],.field input[type=checkbox]{width:18px;height:18px;min-height:0;accent-color:var(--green)}#analysisRaw .table{min-width:max-content;max-width:none}#analysisRaw td{max-width:280px;overflow:hidden;text-overflow:ellipsis}.management-row{grid-template-columns:minmax(150px,1.2fr) minmax(180px,1fr) minmax(140px,.8fr) auto}.page-head .actions{justify-content:flex-end}
@media(max-width:700px){html,body,.shell,.main,.content,.page,.topbar{width:100%;max-width:100%;min-width:0}.main,.topbar{margin-left:0!important}.content{margin:0;padding-left:14px;padding-right:14px}.page-head,.page-head>div,.hero,.hero>div,.section,.card,.toolbar,.stats{width:100%;min-width:0}.page-head h1,.page-head p,.hero-time,.hero .muted{overflow-wrap:normal;word-break:keep-all}.page-head .actions{margin-top:12px;display:grid;grid-template-columns:1fr 1fr}.page-head .actions .primary{grid-column:1/-1}.management-row{grid-template-columns:1fr auto}.toolbar input[type=datetime-local]{grid-column:span 1}#page-settlements .management-row,#page-conflicts .management-row{grid-template-columns:1fr auto}#page-settlements .management-row>span,#page-conflicts .management-row>span{grid-column:1/-1}.mobile-nav{overflow-x:auto;grid-template-columns:repeat(5,minmax(76px,1fr))}}
@media(max-width:700px){.mobile-nav{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(76px,1fr);grid-template-columns:none;grid-template-rows:1fr;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}.mobile-nav::-webkit-scrollbar{display:none}}
@media(min-width:701px) and (max-width:900px){.sidebar{display:none}.main,.topbar{margin-left:0!important}.content{padding-left:24px;padding-right:24px}}
.analysis-mode-card{display:flex;align-items:center;gap:14px;padding:16px 18px;margin-bottom:14px}.analysis-mode-card>label{font-weight:700;white-space:nowrap}.analysis-mode-card select{min-width:320px;min-height:40px;border:1px solid #d7dbde;border-radius:9px;background:#fafafa;padding:8px 10px}.analysis-mode-card p{margin:0}.analysis-toolbar{align-items:end}.filter-field{display:grid;gap:6px;min-width:150px}.filter-field>span{font-size:12px;color:var(--muted);font-weight:600}.analysis-query{align-self:end}.analysis-import-row{grid-template-columns:minmax(170px,2fr) minmax(130px,1fr) minmax(90px,.7fr) minmax(135px,1fr) auto}.analysis-type-badge{display:inline-flex;width:max-content;padding:4px 9px;border-radius:999px;background:#e9f8ef;color:#087a3d;font-size:12px;font-weight:700}.analysis-type-badge.room{background:#eaf2ff;color:#245ca6}.analysis-context{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px}.analysis-context strong{font-size:14px}.analytics-table th.sticky-meta,.analytics-table td.sticky-meta{position:sticky;left:0;z-index:2;background:#fff}.analytics-table th.sticky-meta{z-index:3;background:#f7faf8}.analytics-table td.source-cell{max-width:220px;white-space:normal;word-break:break-all}.danger-note{padding:10px 12px;border-radius:10px;background:#fff5f4;color:#b42318;font-size:13px}
@media(max-width:900px){.analysis-mode-card{align-items:stretch;display:grid}.analysis-mode-card select{min-width:0;width:100%}.analysis-toolbar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.filter-field{min-width:0}.analysis-query{width:100%}.analysis-import-row{grid-template-columns:1fr}.analysis-import-row .btn{width:100%}}
@media(max-width:560px){.analysis-toolbar{grid-template-columns:1fr}.analysis-mode-card{padding:14px}.analysis-mode-card p{font-size:12px}}
.dashboard-analysis-head{align-items:center}.dashboard-analysis-filter{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.dashboard-analysis-filter label{font-size:12px;color:var(--muted);font-weight:600}.dashboard-analysis-filter input{min-height:40px;border:1px solid #d7dbde;border-radius:9px;padding:8px 10px;background:#fff}.dashboard-analysis-stats{margin:0 0 12px}.dashboard-analysis-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.dashboard-analysis-card-head{padding:16px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:10px}.dashboard-analysis-card-head h3{font-size:15px;margin:0}.dashboard-analysis-list{display:grid}.dashboard-analysis-row{padding:13px 18px;border-bottom:1px solid var(--line);display:grid;gap:5px}.dashboard-analysis-row:last-child{border-bottom:0}.dashboard-analysis-row>div{display:flex;align-items:center;justify-content:space-between;gap:12px}.dashboard-analysis-row b{font-size:13px}.dashboard-analysis-row span{font-size:11px;color:var(--muted)}.dashboard-analysis-row strong{color:var(--green);font-size:14px}
@media(max-width:800px){.dashboard-analysis-head{align-items:stretch;display:grid}.dashboard-analysis-filter{display:grid;grid-template-columns:1fr 1fr}.dashboard-analysis-filter label{grid-column:1/-1}.dashboard-analysis-filter input{grid-column:1/-1;width:100%}.dashboard-analysis-grid{grid-template-columns:1fr}.dashboard-analysis-stats{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.dashboard-analysis-filter{grid-template-columns:1fr}.dashboard-analysis-filter>*{grid-column:auto!important;width:100%}.dashboard-analysis-stats{grid-template-columns:1fr}}
@media(max-width:700px){#page-dashboard .section{margin-top:20px}.dashboard-analysis-head{gap:10px;margin-bottom:8px}.dashboard-analysis-head p{display:none}.dashboard-analysis-filter{grid-template-columns:1fr 1fr;gap:6px}.dashboard-analysis-filter label{display:none}.dashboard-analysis-filter input{grid-column:1/-1;min-height:38px}.dashboard-analysis-filter .btn{min-height:38px;padding:7px 9px;font-size:12px}.dashboard-analysis-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.dashboard-analysis-stats .stat{padding:11px}.dashboard-analysis-stats .stat strong{font-size:17px;margin-top:5px}.dashboard-analysis-stats .stat p{display:none}.dashboard-analysis-grid{gap:8px}.dashboard-analysis-card-head{padding:11px 13px}.dashboard-analysis-card-head .analysis-type-badge{font-size:10px;padding:3px 7px}.dashboard-analysis-row{padding:10px 13px}.dashboard-analysis-row:nth-child(n+4){display:none}.dashboard-analysis-row>div:last-child span:last-child{display:none}#page-analytics .page-head{margin-bottom:12px}#page-analytics .analysis-mode-card{padding:11px 12px;margin-bottom:9px;gap:7px}#page-analytics .analysis-mode-card p{display:none}#page-analytics .analysis-toolbar{gap:6px;padding:8px}#page-analytics .filter-field{gap:3px}#page-analytics .filter-field>span{font-size:10px}#page-analytics .toolbar input,#page-analytics .toolbar select{min-height:36px;padding:6px 8px}#page-analytics .metric-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:0}#page-analytics .metric{padding:11px}#page-analytics .metric strong{font-size:16px;margin-top:4px}#page-analytics .section{margin-top:18px}}

/* Settlement and payroll usability update */
.salary-summary-stats{grid-template-columns:repeat(3,minmax(0,1fr))}.settlement-tabs{display:flex;gap:8px;margin-bottom:12px}.settlement-tabs .active{background:var(--green-soft);border-color:#bce7ce;color:var(--green)}.settlement-toolbar{align-items:center}.settlement-toolbar select{min-width:180px}.settlement-row{grid-template-columns:minmax(140px,.8fr) minmax(270px,1.6fr) minmax(190px,1fr) auto}.settlement-pagination,.pagination{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:12px}.export-anchor-field{gap:9px}.export-anchor-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:11px;border:1px solid var(--line);border-radius:11px;max-height:220px;overflow:auto}.export-anchor-option{display:flex!important;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;background:#f8faf9;font-size:12px!important;font-weight:600!important}.export-anchor-option input{width:17px!important;height:17px!important;min-height:0!important;accent-color:var(--green)}
@media(max-width:900px){.salary-summary-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.settlement-row{grid-template-columns:1fr auto}.settlement-row>span{grid-column:1/-1}}
@media(max-width:700px){#dashboardStats{grid-template-columns:repeat(2,minmax(0,1fr))}#dashboardStats .stat,#salaryStats .stat{padding:12px}#dashboardStats .stat strong,#salaryStats .stat strong{font-size:18px;margin-top:6px}#dashboardStats .stat p,#salaryStats .stat p{font-size:9px}.salary-summary-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.settlement-tabs{display:grid;grid-template-columns:1fr 1fr}.settlement-tabs .btn{width:100%}.settlement-toolbar{grid-template-columns:1fr 1fr}.settlement-toolbar #settlementAnchor,.settlement-toolbar #reloadSettlements{grid-column:1/-1}.settlement-row{grid-template-columns:1fr}.settlement-row>*{grid-column:1!important}.settlement-row .btn{width:100%}.settlement-pagination{justify-content:space-between}.export-anchor-grid{grid-template-columns:1fr}.page-head .actions #exportSalaryWorkbook{grid-column:1/-1}}
@media(max-width:390px){#dashboardStats,.salary-summary-stats{grid-template-columns:repeat(2,minmax(0,1fr))}#dashboardStats .stat p,#salaryStats .stat p{display:none}}

/* 2026-08-10 dashboard links, list pagination and salary-rule history. */
.todo-card{position:relative;padding-right:36px}.todo-arrow{position:absolute;right:15px;top:50%;transform:translateY(-50%);font-size:24px;line-height:1;color:var(--green)}
.ui-pagination{padding:0 2px}.ui-pagination [data-pager-info]{min-width:150px;text-align:center}
.pay-rule-list{margin-top:18px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.pay-rule-row{display:grid;grid-template-columns:minmax(140px,1.1fr) minmax(130px,.8fr) minmax(150px,.9fr) minmax(130px,.8fr) auto;align-items:center;gap:14px;width:100%;min-height:66px;padding:14px 16px;border:0;border-bottom:1px solid var(--line);background:#fff;text-align:left}
.pay-rule-row:last-child{border-bottom:0}.pay-rule-row:hover{background:#f7fbf9}.pay-rule-anchor{font-weight:750;color:var(--text)}.pay-rule-code,.pay-rule-effective{font-size:11px;color:var(--muted)}.pay-rule-rate{color:var(--green)}.pay-rule-more{font-size:11px;color:var(--green);font-weight:700}
.pay-rule-history{display:grid;gap:10px}.pay-rule-history>.actions{justify-content:flex-end;margin-bottom:4px}.pay-rule-history-item{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:8px 16px;padding:14px;border:1px solid var(--line);border-radius:10px;background:#fbfcfc}.pay-rule-history-item strong{color:var(--green)}.pay-rule-history-item span{font-size:11px}.pay-rule-history-item small{grid-column:1/-1;color:var(--muted)}
@media(max-width:700px){.ui-pagination{justify-content:space-between}.ui-pagination [data-pager-info]{min-width:0}.pay-rule-row{grid-template-columns:1fr auto;gap:7px 10px}.pay-rule-code,.pay-rule-effective{grid-column:1/-1}.pay-rule-rate{grid-column:2;grid-row:1}.pay-rule-more{grid-column:1/-1}.pay-rule-history-item{grid-template-columns:1fr}.pay-rule-history-item small{grid-column:1}}
.status.offline{background:#f1ebff;color:#6842a0}.page-head .actions #createOfflineSettlement{white-space:nowrap}
@media(max-width:700px){#page-settlements .management-row>span{display:block!important}}

/* ========================================================================== 
   LiveFlow role-based UI redesign · 2026-08-08
   ========================================================================== */
:root{
  --lf-green:#08a653;
  --lf-green-dark:#087a43;
  --lf-green-soft:#eaf8f0;
  --lf-blue:#3977d3;
  --lf-amber:#b77908;
  --lf-red:#c23a31;
  --lf-bg:#f6f8f7;
  --lf-card:#fff;
  --lf-line:#e5eae7;
  --lf-ink:#17201b;
  --lf-muted:#68736d;
  --lf-shadow:0 10px 32px rgba(27,54,39,.055)
}
body{background:var(--lf-bg);color:var(--lf-ink)}
.sidebar{width:248px;padding:24px 16px;border-color:var(--lf-line);box-shadow:none}
.main,.topbar{margin-left:248px}
.content{max-width:1400px;padding:36px 42px 100px}
.topbar{height:64px;border-color:var(--lf-line);padding:0 42px}
.nav{gap:3px;margin-top:28px;overflow:auto;padding-right:2px}
.nav-group-label{display:block;margin:19px 13px 6px;color:#98a09b;font-size:10px;font-weight:760;letter-spacing:.12em}
.nav-group-label:first-child{margin-top:0}
.nav-item{display:flex;align-items:center;gap:11px;width:100%;min-height:42px;border:0;border-radius:11px;background:transparent;color:#5c6761;text-align:left;padding:10px 13px;font-size:13px}
.nav-item:hover{background:#f4f8f6;color:var(--lf-ink)}
.nav-item.active{background:var(--lf-green-soft);color:var(--lf-green-dark);font-weight:760}
.nav-icon{display:grid;place-items:center;width:22px;height:22px;border-radius:7px;font-size:14px;font-weight:800}
.nav-item.active .nav-icon{background:#d8f2e3}
.page-head{align-items:center;margin-bottom:24px}
.page-head h1{font-size:32px;line-height:1.15;letter-spacing:-1.2px;margin:6px 0 7px}
.page-head .muted{font-size:13px}
.eyebrow{color:var(--lf-green);letter-spacing:.08em}
.card,.stat,.toolbar,.week-grid,.metric-grid{border-color:var(--lf-line);box-shadow:var(--lf-shadow)}
.btn{min-height:40px;border-color:#dce2de;border-radius:10px;background:#fff;color:#354039;box-shadow:none}
.btn:hover{border-color:#c6d1ca;box-shadow:none}
.btn.primary{background:var(--lf-green);border-color:var(--lf-green);box-shadow:0 7px 17px #08a6531f}
.btn.ghost{color:var(--lf-green-dark);background:transparent;border-color:transparent}
.btn.danger{background:#fff6f5;border-color:#f0d4d1;color:var(--lf-red)}
.hero{border-color:#dceee4;background:linear-gradient(112deg,#fff 0%,#f4fff8 58%,#dcf8e8 100%);box-shadow:var(--lf-shadow);min-height:196px}
.hero.ops{background:linear-gradient(112deg,#fff 0%,#f6fbf8 52%,#e5f7ec 100%)}
.hero-time{color:var(--lf-green-dark);font-size:40px}
.stat{min-width:0;padding:19px;border-radius:14px}
.stat strong{color:var(--lf-green-dark);font-size:24px;letter-spacing:-.4px}
.stat p{font-size:10px}
.status{font-weight:700;letter-spacing:.01em}
.status.pending{background:#fff4d9;color:#986600}
.status.confirmed{background:#e9f2ff;color:#3469aa}
.status.settled,.status.completed{background:var(--lf-green-soft);color:var(--lf-green-dark)}
.status.cancelled,.status.conflict{background:#fff0ee;color:var(--lf-red)}
.ui-empty{padding:34px 18px;border:1px dashed #dfe6e1;border-radius:12px;background:#fbfdfc;color:var(--lf-muted);font-size:12px;text-align:center}

/* Desktop dashboards */
.ops-dashboard-details{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr);gap:14px;margin-top:28px}
.dashboard-panel{padding:20px;overflow:visible}
.dashboard-panel .section-head{align-items:center}
.timeline-list{display:grid}
.timeline-item{display:grid;grid-template-columns:54px 12px 1fr auto;align-items:center;gap:10px;min-height:47px;border:0;border-top:1px solid var(--lf-line);background:transparent;padding:8px 0;text-align:left}
.timeline-item time{font-size:12px;font-weight:750;color:var(--lf-green-dark)}
.timeline-dot{width:8px;height:8px;border:2px solid var(--lf-green);border-radius:50%}
.timeline-copy{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}
.todo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.todo-card{display:grid;align-content:start;gap:4px;min-height:115px;border:1px solid var(--lf-line);border-radius:13px;background:#fbfdfc;padding:15px;text-align:left}
.todo-card:hover{border-color:#badfca;background:#f5fcf8}
.todo-count{color:var(--lf-green-dark);font-size:26px;font-weight:800}
.todo-card b{font-size:12px}.todo-card small{color:var(--lf-muted);font-size:10px}
.admin-finance{display:none}.role-admin .admin-finance{display:block}
.admin-finance .metric-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.anchor-recent-section{display:none}
.insight-panel{min-width:0}

/* Schedule hierarchy and overflow-safe action menu */
.action-menu{position:relative}
.action-menu>summary{display:list-item;list-style:none;line-height:20px;user-select:none}
.action-menu>summary::-webkit-details-marker{display:none}
.action-menu-panel{position:absolute;right:0;top:48px;z-index:30;display:grid;grid-template-columns:1fr 1fr;gap:8px;width:390px;padding:12px;border:1px solid var(--lf-line);border-radius:14px;background:#fff;box-shadow:0 20px 60px #16281e24}
.action-menu-panel input{width:100%;min-height:40px;border:1px solid #d9e0dc;border-radius:10px;padding:8px}
.action-menu-panel .btn{width:100%}
.action-menu-panel #querySchedule{grid-column:1/-1}
.week-grid{border-radius:16px}
.day{min-height:390px;padding:12px}.day-head{font-size:12px}.shift{padding:10px;border-radius:10px}

/* Records and income */
.segmented{display:flex;width:max-content;max-width:100%;gap:4px;padding:4px;border:1px solid var(--lf-line);border-radius:12px;background:#fff}
.segmented button{min-height:34px;border:0;border-radius:8px;background:transparent;padding:7px 14px;color:var(--lf-muted);font-weight:700}
.segmented button.active{background:var(--lf-green-soft);color:var(--lf-green-dark)}
.anchor-only-control,.anchor-income-tabs,.mobile-record-cards,.salary-card-list{display:none}
.record-card,.salary-card{display:grid;width:100%;gap:8px;border:1px solid var(--lf-line);border-radius:15px;background:#fff;padding:16px;text-align:left;box-shadow:var(--lf-shadow)}
.record-card-top,.record-card-meta,.salary-card-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.record-card>b,.salary-card-top strong{font-size:18px;color:var(--lf-ink)}
.record-card-meta strong,.salary-card-top strong{color:var(--lf-green-dark)}
.salary-card>.status{width:max-content}
.salary-summary-stats{grid-template-columns:repeat(3,minmax(0,1fr))}

/* Analytics */
.analysis-mode-tabs{flex:none}.analysis-mode-card>label{display:none}
.analysis-mode-card>select{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.date-presets{display:flex;gap:5px;align-items:end;flex:1 0 100%}
.date-presets .btn{min-height:34px;padding:6px 10px;font-size:11px}
.analysis-overview{margin-top:14px}
.analysis-chart-card{padding:20px;overflow:visible}
.simple-bars{display:grid;gap:10px;margin-top:14px}
.simple-bar-row{display:grid;grid-template-columns:minmax(90px,150px) minmax(120px,1fr) minmax(70px,auto);align-items:center;gap:12px;font-size:11px}
.simple-bar-row>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.simple-bar-track{height:8px;overflow:hidden;border-radius:99px;background:#edf1ef}
.simple-bar-fill{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--lf-green),#55ce8e)}
.simple-bar-row strong{text-align:right;color:var(--lf-green-dark)}
.analysis-mobile-cards{display:none}
.analysis-mode-card{border-radius:14px}.analysis-toolbar{border-radius:14px}

/* Management and settings */
.management-toolbar{justify-content:flex-end}.management-toolbar input{max-width:360px}
.management-list{border-radius:15px}
.management-row{min-height:64px;padding:15px 18px;grid-template-columns:minmax(160px,1.2fr) minmax(180px,1fr) minmax(120px,.7fr) auto auto}
.management-row>b{font-size:13px}.management-row>span{color:var(--lf-muted)}
.management-row .btn{min-height:36px;padding:7px 12px}
.system-tabs{margin-bottom:14px}
.system-grid{display:block}.system-block{min-height:310px;padding:24px}
.system-block[hidden]{display:none!important}
.mine-profile,.mine-menu{display:none}
.mobile-back{display:none}

/* Non-anchor mobile navigation keeps all functions in a More sheet. */
.mobile-role-menu{position:fixed;inset:0;z-index:75;display:flex;align-items:flex-end;justify-content:center;padding:20px;background:#0b161050}
.mobile-role-menu-card{width:min(560px,100%);max-height:76vh;overflow:auto;border-radius:20px;background:#fff;padding:20px;box-shadow:0 24px 80px #0003}
.mobile-role-menu-list{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mobile-role-menu-list .nav-item{border:1px solid var(--lf-line);background:#fff}
.mobile-role-menu-list .mobile-menu-logout{border-color:#f0d4d1;background:#fff6f5;color:var(--lf-red)}
body.menu-open{overflow:hidden}

/* Anchor is a dedicated Mobile First product, not a reduced admin sidebar. */
.role-anchor .sidebar{display:none}
.role-anchor .main,.role-anchor .topbar{margin-left:0}
.role-anchor .content{max-width:780px;padding-top:26px}
.role-anchor .topbar{max-width:780px;margin:0 auto;padding:0 28px;background:var(--lf-bg)}
.role-anchor .anchor-recent-section{display:block}
.role-anchor .ops-dashboard-details,.role-anchor .admin-finance{display:none}
.role-anchor #dashboardStats{grid-template-columns:repeat(3,minmax(0,1fr))}
.role-anchor #dashboardBusinessSection{margin-top:26px}
.role-anchor #dashboardBusinessSection #dashboardRoomAnalysis{display:none}
.role-anchor #dashboardBusinessSection .dashboard-analysis-grid{grid-template-columns:1fr}
.role-anchor .anchor-only-control,.role-anchor .anchor-income-tabs,.role-anchor .mobile-record-cards,.role-anchor .salary-card-list{display:flex}
.role-anchor .mobile-record-cards,.role-anchor .salary-card-list,.role-anchor .compact-card-list{display:grid;gap:10px}
.role-anchor #page-records .table-wrap,.role-anchor #page-salary .table-wrap{display:none}
.role-anchor #page-records .toolbar{display:none}
.role-anchor #page-records #addRecord{display:block;width:100%;min-height:50px}
.role-anchor #page-salary .page-head .actions{display:none}
.role-anchor #page-salary .toolbar{grid-template-columns:1fr 1fr}
.role-anchor #page-salary .toolbar #salaryAnchor{display:none}
.role-anchor #page-schedule .page-head .actions,.role-anchor #page-schedule .toolbar>select{display:none}
.role-anchor #page-schedule .toolbar{background:transparent;border:0;box-shadow:none;padding:0}
.role-anchor #page-schedule .week-controls{width:100%;display:grid;grid-template-columns:1fr 1fr 1fr}
.role-anchor #page-schedule .week-controls .btn{width:100%}
.role-anchor #page-settlements .mobile-back,.role-anchor #page-conflicts .mobile-back,.role-anchor #page-analytics .mobile-back{display:grid}
.role-anchor #page-analytics .analysis-mode-card{display:none}
.role-anchor #page-analytics #analysisRoomWrap,.role-anchor #page-analytics #analysisAnchorWrap,.role-anchor #page-analytics #analysisSort,.role-anchor #page-analytics #analysisDir{display:none}
.role-anchor #page-analytics .analysis-toolbar{grid-template-columns:1fr 1fr}
.role-anchor #page-analytics .date-presets{grid-column:1/-1;overflow:auto}
.role-anchor #page-analytics .analysis-query{grid-column:1/-1}
.role-anchor #page-analytics #analysisRaw{display:none}
.role-anchor #page-analytics #analysisImportSection{display:none}
.role-anchor .analysis-mobile-cards{display:grid;gap:9px;margin-top:12px}
.role-anchor .analysis-mobile-card{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:15px}
.role-anchor .analysis-mobile-card>b,.role-anchor .analysis-mobile-card>.muted{grid-column:1/-1}
.analysis-mobile-metric{display:grid;gap:3px;padding:9px;border-radius:10px;background:#f7faf8}
.analysis-mobile-metric small{color:var(--lf-muted);font-size:9px}.analysis-mobile-metric strong{font-size:12px;overflow-wrap:anywhere}

@media(max-width:1100px){
  .ops-dashboard-details{grid-template-columns:1fr}
  .todo-grid{grid-template-columns:repeat(3,1fr)}
  .content{padding-left:28px;padding-right:28px}
}

@media(max-width:900px){
  .sidebar{display:none}.main,.topbar{margin-left:0!important}.content{padding:26px 20px 100px}
  .topbar{padding:0 20px}
  .mobile-nav{position:fixed;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-flow:row;grid-auto-columns:auto;inset:auto 0 0;z-index:40;overflow:hidden;background:#fffffff4;border-top:1px solid var(--lf-line);padding:6px 6px calc(6px + env(safe-area-inset-bottom));backdrop-filter:blur(18px)}
  .mobile-nav .nav-item{display:grid;justify-items:center;gap:2px;width:auto;min-height:54px;padding:5px 3px;border-radius:11px;text-align:center;font-size:9px}
  .mobile-nav .nav-icon{font-size:15px}.mobile-nav .nav-item.active{background:var(--lf-green-soft)}
  .management-row{grid-template-columns:1fr auto auto}.management-row>span{grid-column:1/-1}
  .system-tabs{width:100%;overflow:auto}.system-tabs button{white-space:nowrap}
}

@media(max-width:700px){
  .content{padding:18px 14px calc(92px + env(safe-area-inset-bottom))}
  .topbar{height:58px;padding:0 16px}.topbar #today{font-size:12px}
  .page-head{position:relative;margin-bottom:17px}.page-head h1{font-size:28px;letter-spacing:-1px}.page-head .muted{font-size:12px}
  .page-head .actions{display:flex}.page-head .actions .primary{grid-column:auto}
  .hero{padding:20px;gap:18px;border-radius:18px}.hero-time{font-size:32px;margin:10px 0 7px}.hero-side{gap:8px}
  .role-anchor #page-dashboard .hero-side #confirmToday{order:-1}
  .role-anchor #dashboardStats{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .role-anchor #dashboardStats .stat{padding:12px 9px}.role-anchor #dashboardStats .stat span{font-size:9px}.role-anchor #dashboardStats .stat strong{font-size:16px}.role-anchor #dashboardStats .stat p{display:none}
  .anchor-recent-section{margin-top:20px}.anchor-recent-section .section-head{align-items:center}
  .record-card.compact{grid-template-columns:1fr auto}.record-card.compact>*{grid-column:1/-1}.record-card.compact .record-card-top{grid-column:1/-1}
  .section{margin-top:22px}.section-head h2{font-size:16px}
  .stats,.metric-grid{grid-template-columns:1fr 1fr}
  .stat{padding:13px}.stat strong{font-size:18px}
  .role-anchor #dashboardBusinessSection .dashboard-analysis-filter{grid-template-columns:1fr 1fr}
  .role-anchor #dashboardBusinessSection .dashboard-analysis-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .role-anchor #dashboardBusinessSection .dashboard-analysis-stats .stat:nth-child(n+3){display:none}
  .role-anchor #dashboardBusinessSection .dashboard-analysis-row:nth-child(n+4){display:none}
  .role-anchor #page-schedule .mobile-schedule{display:grid;gap:12px}
  .role-anchor #page-schedule .mobile-day{padding:15px;border-radius:15px;box-shadow:var(--lf-shadow)}
  .role-anchor #page-schedule .mobile-day h3{font-size:14px}
  .role-anchor #page-schedule .shift{min-height:70px;padding:12px}
  .segmented{width:100%}.segmented button{flex:1}
  .role-anchor #page-salary .toolbar{display:grid;grid-template-columns:1fr 1fr;padding:9px}.role-anchor #page-salary .toolbar input[type=search]{grid-column:1/-1}
  .role-anchor #page-salary #salaryStats{grid-template-columns:repeat(3,minmax(0,1fr))}.role-anchor #page-salary #salaryStats .stat{padding:11px 8px}.role-anchor #page-salary #salaryStats .stat strong{font-size:15px}.role-anchor #page-salary #salaryStats .stat p{display:none}
  .role-anchor .mine-profile,.role-anchor .mine-menu{display:flex}
  .mine-profile{align-items:center;gap:14px;padding:18px}.mine-profile h2{margin:0 0 4px}.mine-profile p{margin:0}
  .avatar-lg{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:linear-gradient(145deg,#10b963,#078848);color:#fff;font-size:22px;font-weight:800}
  .mine-menu{display:grid!important;margin-top:12px;overflow:hidden}
  .mine-menu-row{display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:11px;min-height:69px;border:0;border-bottom:1px solid var(--lf-line);background:#fff;padding:12px 15px;text-align:left}.mine-menu-row:last-child{border-bottom:0}
  .menu-icon{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:var(--lf-green-soft);color:var(--lf-green-dark);font-weight:800}.menu-copy{display:grid;gap:3px}.menu-copy b{font-size:13px}.menu-copy small{color:var(--lf-muted);font-size:10px}.menu-arrow{font-size:24px;color:#9aa39e}.danger-row .menu-icon{background:#fff0ee;color:var(--lf-red)}
  .mobile-back{position:absolute;right:0;top:0;place-items:center;width:38px;height:38px;border:1px solid var(--lf-line);border-radius:50%;background:#fff;font-size:24px;color:var(--lf-green-dark)}
  .action-menu-panel{position:fixed;left:14px;right:14px;top:auto;bottom:88px;width:auto;grid-template-columns:1fr;padding:14px}.action-menu-panel #querySchedule{grid-column:auto}
  .todo-grid{grid-template-columns:1fr}.todo-card{min-height:88px;grid-template-columns:auto 1fr;align-items:center}.todo-card small{grid-column:2}.todo-count{grid-row:1/3}
  .simple-bar-row{grid-template-columns:78px 1fr 60px;gap:7px}.simple-bar-row strong{font-size:10px}
  .analysis-chart-card{padding:15px}.analysis-chart-card .section-head p{display:block}
  .management-toolbar input{max-width:none}
  .management-row{grid-template-columns:1fr auto;gap:8px;padding:14px}.management-row>span{display:block!important;grid-column:1/-1}.management-row>.btn{grid-column:auto}
  .system-block{padding:17px}.mobile-role-menu-list{grid-template-columns:1fr 1fr}
}

@media(max-width:390px){
  .role-anchor #dashboardStats,.role-anchor #page-salary #salaryStats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .role-anchor #dashboardStats .stat strong,.role-anchor #page-salary #salaryStats .stat strong{font-size:14px}
  .role-anchor #dashboardStats .stat span,.role-anchor #page-salary #salaryStats .stat span{font-size:8px}
  .mobile-role-menu-list{grid-template-columns:1fr}
}