/* Stitch shell adaptation for three existing apps. */
body.qc-app{background:#f6f8ff;color:#172338}
body.qc-app :where(.panel,.card,.stat-card,.metric,.mini-card,.admin-kpi){box-shadow:0 2px 8px rgba(24,39,72,.035);border-color:#d9e2f2;border-radius:12px}
body.qc-app :where(.topbar){background:#fff;border-bottom:1px solid #dce4f1}
body.qc-app :where(.primary-btn,.btn.primary){background:#c91424;border-color:#c91424;color:#fff;border-radius:9px;box-shadow:none}
body.qc-app :where(.primary-btn,.btn.primary):hover{background:#a71919;border-color:#a71919}
body.qc-app :where(.table th,.admin-table th){background:#f8faff;color:#58677e;letter-spacing:.045em}
body.qc-app :where(.company-title,.shipping-company){color:#40516b;font-weight:800;letter-spacing:.035em}
@media(min-width:821px){
body.qc-payroll .app-shell{grid-template-columns:256px minmax(0,1fr)}
body.qc-payroll .sidebar{width:256px}
body.qc-payroll .brand-block{height:96px;padding:17px 18px;gap:13px}
body.qc-payroll .brand-mark{width:58px;height:58px;flex:none}
body.qc-payroll #nav{padding:8px 0 20px 12px}
body.qc-payroll #nav .nav-item{min-height:46px;margin:2px 0;padding:0 16px;white-space:nowrap}
body.qc-payroll .section-tab{display:none}
body.qc-payroll #main{padding:26px 26px 48px}
body.qc-payroll .topbar{padding:0 26px;height:72px}
body.qc-payroll .company-title{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
@media(min-width:761px){
body.qc-attendance{--sidebar:256px}
body.qc-attendance .brand{height:96px;padding:17px 18px;gap:13px}
body.qc-attendance .brand img{width:58px;height:58px}
body.qc-attendance .nav{padding:9px 0 20px 12px;gap:2px}
body.qc-attendance .nav-item{min-height:46px;white-space:nowrap}
body.qc-attendance .topbar{height:72px}
body.qc-attendance main{max-width:none;padding:26px 26px 48px}
body.qc-attendance .company-title{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.qc-attendance .admin-table{min-width:980px}
body.qc-attendance .admin-table th,body.qc-attendance .admin-table td{white-space:nowrap}
body.qc-attendance .admin-table td:first-child{white-space:normal;min-width:170px}
body.qc-attendance .dash-grid-2{grid-template-columns:1fr 1fr}
}
body.qc-payroll .payroll-entry-table{min-width:1120px}
body.qc-payroll .payroll-entry-table th{white-space:normal;line-height:1.35;word-break:normal}
body.qc-payroll .payroll-entry-table td{white-space:nowrap}
body.qc-payroll .payroll-entry-table .name{white-space:normal;min-width:160px}
body.qc-payroll .payroll-entry-table .table-input{width:100%;min-width:86px;max-width:120px}
body.qc-payroll .payroll-entry-table .kpi-input{border:1px solid #d9e2f2;background:#fff;font-weight:700;color:#172338;text-align:left}
body.qc-payroll .payroll-entry-table .kpi-input:disabled{background:#f7f9fc}
body.qc-payroll .table-wrap,body.qc-attendance .table-wrap{overflow-x:auto}

@media(min-width:761px){
}
@media(min-width:761px){
}
@media(max-width:760px){
}
@media(max-width:1100px) and (min-width:761px){
}

/* Dense operational cards and tables modeled on the Stitch review screens. */
body.qc-payroll .summary-strip{gap:12px}
body.qc-payroll .summary-strip .mini-card{min-height:110px;padding:17px}
body.qc-payroll .summary-strip .mini-card strong{font-size:22px;letter-spacing:-.02em;line-height:1.25}
body.qc-payroll .panel-head{padding:17px 20px}
body.qc-payroll .payroll-entry-table td,body.qc-payroll .payroll-entry-table th{padding:12px 9px}
body.qc-payroll .payroll-entry-table td.num{font-variant-numeric:tabular-nums}
body.qc-attendance .admin-kpis-main{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
body.qc-attendance .admin-kpi{min-height:112px;padding:17px}
body.qc-attendance .dash-table-card .card-head{padding:17px 20px}
body.qc-attendance .admin-table td,body.qc-attendance .admin-table th{padding:12px}
@media(max-width:1100px){
body.qc-payroll .summary-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
body.qc-attendance .admin-kpis-main{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(min-width:761px) and (max-width:960px){
}

/* ===== Chấm công: cùng ngôn ngữ với CRM (giai đoạn 2) ===== */
body.qc-attendance :is(.section-title,.card-head h2){font-size:var(--qc-fs-md);font-weight:var(--qc-fw-heavy)}
body.qc-attendance .section-title:before{display:none}
body.qc-attendance :is(.eyebrow,.dash-eyebrow){display:none}
body.qc-attendance main{padding:var(--qc-sp-4) var(--qc-sp-5) var(--qc-sp-8)}
body.qc-attendance .page-head,body.qc-attendance .dash-hero{align-items:center;margin:0 0 var(--qc-sp-3);gap:var(--qc-sp-3);flex-wrap:wrap}
body.qc-attendance .page-head h1,body.qc-attendance .dash-hero h1{font-size:var(--qc-fs-xl);font-weight:var(--qc-fw-bold);letter-spacing:-.01em;line-height:var(--qc-lh-tight);margin:0}
body.qc-attendance .page-head p,body.qc-attendance .dash-hero p{margin:2px 0 0;font-size:var(--qc-fs-xs);color:var(--qc-text-muted)}
body.qc-attendance .card{box-shadow:none;border-color:var(--qc-line);border-radius:var(--qc-r-lg)}
body.qc-attendance .card-head{padding:var(--qc-sp-3) var(--qc-sp-4)}
body.qc-attendance .card-head small,body.qc-attendance .card-head p{font-size:var(--qc-fs-xs);color:var(--qc-text-muted)}
body.qc-attendance .status-hero{background:var(--qc-surface)}
body.qc-attendance .status-hero:after{display:none}
body.qc-attendance .status-main h2{font-size:var(--qc-fs-lg);font-weight:var(--qc-fw-heavy);margin:0 0 2px}
/* Dải chỉ số: một khung, các ô ngăn bằng đường kẻ */
body.qc-attendance .admin-kpis-main,body.qc-attendance .metrics{gap:0;background:var(--qc-surface);border:1px solid var(--qc-line);border-radius:var(--qc-r-lg);overflow:hidden}
body.qc-attendance :is(.admin-kpi,.metric){min-height:0;padding:var(--qc-sp-3) var(--qc-sp-4);border:0;border-left:1px solid var(--qc-line);border-radius:0;box-shadow:none;background:none}
body.qc-attendance :is(.admin-kpi,.metric):first-child{border-left:0}
body.qc-attendance .admin-kpi:after{display:none}
body.qc-attendance .admin-kpi strong,body.qc-attendance .metric strong{margin-top:2px;font-size:var(--qc-fs-xl);font-weight:var(--qc-fw-heavy);line-height:var(--qc-lh-tight);font-variant-numeric:tabular-nums}
body.qc-attendance :is(.admin-kpi,.metric) span{font-size:var(--qc-fs-xs);font-weight:var(--qc-fw-semibold);color:var(--qc-text-muted)}
body.qc-attendance .admin-kpis-main{grid-template-columns:repeat(8,minmax(0,1fr))}
@media(max-width:1280px){body.qc-attendance .admin-kpis-main{grid-template-columns:repeat(4,minmax(0,1fr))}body.qc-attendance .admin-kpis-main .admin-kpi:nth-child(n+5){border-top:1px solid var(--qc-line)}body.qc-attendance .admin-kpis-main .admin-kpi:nth-child(5){border-left:0}}
@media(max-width:760px){body.qc-attendance .admin-kpis-main{grid-template-columns:repeat(2,minmax(0,1fr))}body.qc-attendance .admin-kpis-main .admin-kpi{border-top:1px solid var(--qc-line)}body.qc-attendance .admin-kpis-main .admin-kpi:nth-child(-n+2){border-top:0}body.qc-attendance .admin-kpis-main .admin-kpi:nth-child(odd){border-left:0}}
/* Điều khiển 36px */
body.qc-attendance :is(.btn,.input,select,input:not([type=checkbox]):not([type=radio])){min-height:var(--qc-h-control);height:var(--qc-h-control);border-radius:var(--qc-r-md);font-size:var(--qc-fs-sm)}
body.qc-attendance .btn{padding:0 var(--qc-sp-3);font-weight:var(--qc-fw-semibold);box-shadow:none}
body.qc-attendance .btn.primary{box-shadow:none}
body.qc-attendance textarea{border-radius:var(--qc-r-md);font-size:var(--qc-fs-sm)}
body.qc-attendance :is(.date-nav input,#historyCard .admin-filters select,#historyCard .admin-filters input){height:var(--qc-h-control)}
body.qc-attendance .field label{font-size:var(--qc-fs-xs);font-weight:var(--qc-fw-semibold)}
@media(max-width:760px){body.qc-attendance :is(.btn,.input,select,input:not([type=checkbox]):not([type=radio])){min-height:var(--qc-h-touch);height:auto}}
/* Bảng */
body.qc-attendance .table th{font-size:var(--qc-fs-xs);font-weight:var(--qc-fw-bold);letter-spacing:0;text-transform:none;color:var(--qc-text-muted);padding:9px var(--qc-sp-3)}
body.qc-attendance .table td{font-size:var(--qc-fs-sm);padding:9px var(--qc-sp-3)}
body.qc-attendance .admin-table th{font-size:var(--qc-fs-xs)}
body.qc-attendance .admin-table td{font-size:var(--qc-fs-sm)}
body.qc-attendance .admin-table td b{font-weight:var(--qc-fw-semibold)}
body.qc-attendance .click-row:hover{background:var(--qc-surface-2)!important}
body.qc-attendance .tag{font-size:var(--qc-fs-xs);font-weight:var(--qc-fw-semibold);padding:2px 9px}
body.qc-attendance .today-chip{font-size:var(--qc-fs-xs);font-weight:var(--qc-fw-semibold)}
/* Menu */
body.qc-attendance .nav-item{font-weight:var(--qc-fw-semibold);font-size:var(--qc-fs-sm)}
body.qc-attendance .request-item{padding:var(--qc-sp-3) var(--qc-sp-4)}
body.qc-attendance .request-item b{font-weight:var(--qc-fw-semibold)}
body.qc-attendance .punch-box .btn{min-height:var(--qc-h-touch);height:var(--qc-h-touch);font-size:var(--qc-fs-md);font-weight:var(--qc-fw-bold)}
body.qc-attendance .dash-hero{text-align:left}body.qc-attendance .dash-hero>div{text-align:left}

/* ===== Vận chuyển: cùng ngôn ngữ với CRM (giai đoạn 2) ===== */
/* Dải chỉ số một khung */
/* Điều khiển */
/* Bảng */
@media(max-width:760px){
 /* Bảng thành thẻ có nhãn */
}

/* ===== Tính lương: cùng ngôn ngữ với CRM (giai đoạn 2) ===== */
body.qc-payroll .page-title-row{align-items:center;margin:0 0 var(--qc-sp-3);gap:var(--qc-sp-3);flex-wrap:wrap}
body.qc-payroll .page-title h1{font-size:var(--qc-fs-xl);font-weight:var(--qc-fw-bold);letter-spacing:-.01em;margin:0}
body.qc-payroll .page-title p{margin:2px 0 0}
body.qc-payroll #main{padding:var(--qc-sp-4) var(--qc-sp-5) var(--qc-sp-8)}
body.qc-payroll :is(.panel,.mini-card,.metric){box-shadow:none;border-radius:var(--qc-r-lg)}
body.qc-payroll .panel-head{padding:var(--qc-sp-3) var(--qc-sp-4)}
body.qc-payroll .panel-head h2{font-size:var(--qc-fs-md);font-weight:var(--qc-fw-heavy)}
body.qc-payroll .metric-grid{gap:0;background:var(--qc-surface);border:1px solid var(--qc-line);border-radius:var(--qc-r-lg);overflow:hidden}
body.qc-payroll .metric-grid .metric{border:0;border-left:1px solid var(--qc-line);border-radius:0;box-shadow:none;background:none;min-height:0;padding:var(--qc-sp-3) var(--qc-sp-4)}
body.qc-payroll .metric-grid .metric:first-child{border-left:0}
body.qc-payroll .metric-grid .metric strong{font-size:var(--qc-fs-xl);font-weight:var(--qc-fw-heavy);line-height:var(--qc-lh-tight);font-variant-numeric:tabular-nums}
body.qc-payroll .metric-grid .metric :is(span,small){font-size:var(--qc-fs-xs)}
body.qc-payroll .summary-strip .mini-card{min-height:0;padding:var(--qc-sp-3) var(--qc-sp-4)}
body.qc-payroll .summary-strip .mini-card strong{font-size:var(--qc-fs-lg);font-weight:var(--qc-fw-heavy)}
body.qc-payroll .btn{font-weight:var(--qc-fw-semibold);font-size:var(--qc-fs-sm);box-shadow:none}
body.qc-payroll :is(input,select):not([type=checkbox]):not([type=radio]){border-radius:var(--qc-r-md)}
body.qc-payroll .table th,body.qc-payroll .payroll-entry-table th{font-size:var(--qc-fs-xs);font-weight:var(--qc-fw-bold);letter-spacing:0;text-transform:none;color:var(--qc-text-muted)}
body.qc-payroll .table td,body.qc-payroll .payroll-entry-table td{font-size:var(--qc-fs-sm)}
body.qc-payroll .tag{font-size:var(--qc-fs-xs);font-weight:var(--qc-fw-semibold)}
body.qc-payroll .nav-item,body.qc-payroll #nav .nav-item{font-weight:var(--qc-fw-semibold);font-size:var(--qc-fs-sm)}
@media(max-width:900px){body.qc-payroll .metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}body.qc-payroll .metric-grid .metric:nth-child(odd){border-left:0}body.qc-payroll .metric-grid .metric:nth-child(n+3){border-top:1px solid var(--qc-line)}}
body.qc-payroll .panel-head h2:before,body.qc-payroll .panel-head h2::before{display:none!important}