*{box-sizing:border-box}body{margin:0;font-family:"Inter","Roboto","Segoe UI",Arial,sans-serif;background:#f3f6fb;color:#5f6078;font-size:14px}.app{display:flex;min-height:100vh;background:#eef2f7}.app::before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at top left,#e9f4ff 0,#f5f7fb 34%,#eef2f7 100%)}aside{position:relative;width:236px;background:#fff;color:#63657d;padding:18px 14px;border-right:1px solid #e8edf5;box-shadow:8px 0 28px rgba(33,43,75,.06);z-index:1}aside h2{margin:0 0 18px;padding:8px 8px 14px;font-size:21px;color:#1f6bd8;font-weight:800;border-bottom:1px solid #eef2f7}aside h2::after{content:"Sổ giao nhận KSNK";display:block;font-size:12px;font-weight:600;color:#9aa3b8;margin-top:4px}aside button{display:flex;align-items:center;gap:9px;width:100%;margin:8px 0;padding:12px 13px;border:1px solid transparent;border-radius:12px;background:#fff;color:#686a82;text-align:left;cursor:pointer;font-weight:650;transition:.15s ease;box-shadow:0 1px 0 rgba(15,23,42,.03)}aside button:hover{background:#f4f8ff;color:#1473e6}aside button.active{background:#eef6ff;color:#1473e6;border-color:#d7e8ff;box-shadow:inset 4px 0 0 #1a82ff}.wrap{position:relative;flex:1;min-width:0;z-index:1}.top{height:64px;padding:14px 24px;background:#fff;border-bottom:1px solid #e8edf5;display:flex;align-items:center;gap:12px;box-shadow:0 4px 18px rgba(33,43,75,.04)}.top::before{content:"CÔNG TY CỔ PHẦN TTH GROUP";font-weight:700;color:#6e7087;letter-spacing:.3px;margin-right:auto}.top label{font-size:13px;color:#7b8194}.top input,#supabaseUrl,#supabaseKey{padding:10px 12px;border:1px solid #d7dde9;border-radius:10px;min-width:280px;background:#fff;color:#333;outline:none}.top input:focus,#supabaseUrl,#supabaseKey:focus,.grid input:focus{border-color:#1a82ff;box-shadow:0 0 0 3px rgba(26,130,255,.12)}#syncStatus{margin-left:8px;color:#16a34a;font-weight:700}main{padding:24px;max-width:1180px;margin:0 auto}header,.page{background:#fff;border-radius:14px;padding:22px;margin-bottom:18px;border:1px solid #e8edf5;box-shadow:0 8px 24px rgba(33,43,75,.06)}header{background:linear-gradient(135deg,#fff 0%,#f7fbff 100%);min-height:112px}header h1{margin:0 0 8px;color:#282a3f;font-size:28px;font-weight:800}header p,.hint{color:#7d8496;line-height:1.55}.page{display:none}.page.active{display:block}.page h2{margin:0 0 18px;color:#2e3045;font-size:21px;font-weight:800}.grid{display:grid;grid-template-columns:repeat(3,minmax(170px,1fr));gap:12px}.grid input{height:44px;padding:11px 13px;border:1px solid #dce2ee;border-radius:11px;background:#fbfcff;color:#36384d;outline:none}.grid input::placeholder{color:#8b92a5}.grid button,.page>button,#saveSettings{height:44px;background:#1473e6;color:white;border:0;border-radius:11px;padding:0 18px;cursor:pointer;margin:4px;font-weight:750;box-shadow:0 8px 16px rgba(20,115,230,.18)}.grid button:hover,.page>button:hover,#saveSettings:hover{background:#0f63ca}table{width:100%;border-collapse:separate;border-spacing:0;margin-top:18px;background:white;border:1px solid #e8edf5;border-radius:12px;overflow:hidden}th,td{border-bottom:1px solid #edf1f7;padding:12px 10px;text-align:left;font-size:13px;vertical-align:middle}th{background:#f7f9fd;color:#626b80;font-weight:800}tr:last-child td{border-bottom:0}tbody tr:hover{background:#fbfdff}.del{background:#ff5b5b;color:white;border:0;border-radius:9px;padding:7px 11px;font-weight:700;cursor:pointer}pre{white-space:pre-wrap;background:#f8fafc;border:1px solid #e5e7eb;border-radius:12px;padding:12px;max-height:260px;overflow:auto;color:#667085}.badge{display:inline-flex;align-items:center;gap:6px;border-radius:999px;background:#ecfdf3;color:#15803d;padding:6px 10px;font-weight:700;font-size:12px}@media(max-width:900px){aside{width:210px}.grid{grid-template-columns:repeat(2,minmax(150px,1fr))}.top::before{display:none}}@media(max-width:700px){.app{display:block}aside{width:auto;display:grid;grid-template-columns:1fr 1fr;gap:6px}aside h2{grid-column:1/-1}.top{height:auto;flex-wrap:wrap}.grid{grid-template-columns:1fr}.top input,#supabaseUrl,#supabaseKey{min-width:0;width:100%}main{padding:14px}}@media print{aside,.top{display:none}main{padding:0}header,.page{box-shadow:none;border:0}.page{display:block}}

.top .mini{height:36px;border:1px solid #d7e8ff;border-radius:10px;background:#eef6ff;color:#1473e6;padding:0 12px;font-weight:800;cursor:pointer}.top .mini:hover{background:#e0efff}
.grid select{height:44px;padding:11px 13px;border:1px solid #dce2ee;border-radius:11px;background:#fbfcff;color:#36384d;outline:none}.grid select:focus{border-color:#1a82ff;box-shadow:0 0 0 3px rgba(26,130,255,.12)}.catalog-grid{display:grid;grid-template-columns:repeat(2,minmax(260px,1fr));gap:16px}.card{border:1px solid #e8edf5;border-radius:14px;background:#fbfcff;padding:16px}.card h3{margin:0 0 8px;color:#2e3045}.card textarea{width:100%;min-height:220px;border:1px solid #dce2ee;border-radius:12px;padding:12px;background:#fff;color:#333;resize:vertical;outline:none;font-family:inherit;line-height:1.5}.card textarea:focus{border-color:#1a82ff;box-shadow:0 0 0 3px rgba(26,130,255,.12)}button.secondary{background:#eef6ff!important;color:#1473e6!important;border:1px solid #d7e8ff!important;box-shadow:none!important}@media(max-width:900px){.catalog-grid{grid-template-columns:1fr}}
.toolbar-row{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 16px}.catalog-grid.advanced{grid-template-columns:repeat(2,minmax(300px,1fr))}.card.wide{grid-column:span 2}.inline-add{display:flex;gap:8px;margin:10px 0}.inline-add input,.inline-add select,#mappingBranch{height:40px;padding:9px 11px;border:1px solid #dce2ee;border-radius:10px;background:#fff;min-width:0}.inline-add input{flex:1}.inline-add button{height:40px;background:#1473e6;color:white;border:0;border-radius:10px;padding:0 12px;font-weight:750}.item-add{display:grid;grid-template-columns:150px 1fr 150px auto}.chip-list{display:flex;flex-wrap:wrap;gap:8px;min-height:44px;padding:8px 0}.chip{display:inline-flex;align-items:center;gap:6px;background:#eef6ff;border:1px solid #d7e8ff;color:#255a99;border-radius:999px;padding:7px 10px;font-weight:650}.chip button{border:0;background:#d7e8ff;color:#255a99;border-radius:999px;width:20px;height:20px;cursor:pointer;font-weight:900}.check-grid{display:grid;grid-template-columns:repeat(2,minmax(220px,1fr));gap:8px;margin:12px 0}.check-grid label{display:flex;align-items:center;gap:8px;padding:10px;border:1px solid #e8edf5;background:#fff;border-radius:10px;color:#4b5563}.items-two{display:grid;grid-template-columns:1fr 1fr;gap:16px}.items-two h4{margin:8px 0;color:#2e3045}@media(max-width:900px){.catalog-grid.advanced{grid-template-columns:1fr}.card.wide{grid-column:span 1}.item-add{grid-template-columns:1fr}.items-two,.check-grid{grid-template-columns:1fr}}

.sign-box{border:1px dashed #b8c7dc;background:#f8fbff;color:#526070;border-radius:10px;padding:10px 12px;font-weight:600;min-height:22px;display:flex;align-items:center}
.sign-box.signed{border-color:#22c55e;background:#ecfdf3;color:#15803d}
.sign-btn{min-height:44px}
.modal.hidden{display:none}
.modal{position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:99999;display:flex;align-items:center;justify-content:center;padding:20px}
.modal-card{width:min(720px,96vw);background:#fff;border-radius:18px;box-shadow:0 24px 70px rgba(15,23,42,.35);padding:22px;border:1px solid #e5eaf3}
.modal-card h3{margin:0 0 8px;color:#17213a}
.modal-card label{display:block;margin:12px 0 6px;color:#4b5870;font-weight:600}
.modal-card input{width:100%;box-sizing:border-box;border:1px solid #d5deec;border-radius:10px;padding:10px 12px;font-size:14px}
#signatureCanvas{width:100%;height:180px;border:1px solid #cbd5e1;border-radius:12px;background:#fff;margin-top:12px;touch-action:none;display:block}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:14px}
.signature-thumb{max-width:90px;max-height:36px;border:1px solid #dbe5f3;border-radius:6px;background:#fff}


/* Bộ lọc: dùng auto-fit để không bị ép chữ/dính chữ khi cửa sổ hẹp */
.filters{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:12px;
  margin:18px 0 12px;
  padding:14px;
  background:#f8fbff;
  border:1px solid #e3edf8;
  border-radius:14px;
  align-items:center;
}
.filters input,.filters select,.filters button{
  width:100%;
  min-width:0;
  height:40px;
  padding:0 12px;
  border-radius:9px;
  font-size:13px;
  line-height:40px;
  white-space:nowrap;
}
.filters select{
  text-overflow:ellipsis;
  overflow:hidden;
}
.filters input[type="date"]{
  min-width:145px;
}
.filters input[id$="Search"]{
  grid-column:span 2;
}
.filters[data-report-filter="1"]{
  grid-template-columns:repeat(auto-fit,minmax(155px,1fr));
}
.load-more{margin-top:12px;width:180px}
@media(max-width:900px){
  .filters{grid-template-columns:1fr 1fr}
  .filters input[id$="Search"]{grid-column:1/-1}
}
@media(max-width:560px){
  .filters{grid-template-columns:1fr}
  .filters input[id$="Search"]{grid-column:auto}
}
.role-badge{display:inline-block;padding:7px 10px;border-radius:999px;background:#eef2ff;color:#1e40af;font-weight:700;margin-left:8px;font-size:12px}.role-admin{background:#fee2e2;color:#991b1b}.role-ksnk{background:#dcfce7;color:#166534}.role-khoa{background:#fef3c7;color:#92400e}.role-viewer{background:#f1f5f9;color:#475569}
.report-cards{display:grid;grid-template-columns:repeat(4,minmax(130px,1fr));gap:12px;margin:14px 0 18px}.report-card{border:1px solid #e3edf8;background:linear-gradient(135deg,#fff,#f8fbff);border-radius:14px;padding:14px;box-shadow:0 4px 14px rgba(33,43,75,.04)}.report-card b{display:block;font-size:24px;color:#1473e6;margin-bottom:4px}.report-card span{color:#697386;font-weight:650}.report-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.report-grid .card{overflow:auto}.report-grid table{margin-top:8px}.report-grid th,.report-grid td{font-size:12px;padding:9px 8px}@media(max-width:900px){.report-cards{grid-template-columns:1fr 1fr}.report-grid{grid-template-columns:1fr}}
.sign-btn.disabled,.sign-btn:disabled{opacity:.55;cursor:not-allowed;background:#eef4fb!important;color:#6b7280!important;border-color:#d8e3ef!important}


/* v40 unified handover + AI assistant */
hr{border:0;border-top:1px solid #e8edf5;margin:22px 0}textarea#aiSystemPrompt{width:100%;max-width:720px;border:1px solid #d7dde9;border-radius:10px;padding:10px 12px;background:#fff;color:#333;outline:none;font-family:inherit;display:block;margin:6px 0 12px}.ai-float{position:fixed;right:18px;bottom:18px;z-index:2147483645;width:58px;height:58px;border-radius:999px;background:#1268d6;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;box-shadow:0 16px 38px rgba(18,104,214,.32);cursor:pointer;user-select:none}.ai-float:hover{background:#0f5dbf}.ai-panel{position:fixed;right:18px;bottom:88px;z-index:2147483645;width:min(420px,calc(100vw - 36px));height:min(560px,calc(100vh - 120px));background:#fff;border:1px solid #dbeafe;border-radius:18px;box-shadow:0 24px 70px rgba(15,23,42,.28);overflow:hidden;display:flex;flex-direction:column}.ai-panel.hidden{display:none}.ai-head{height:54px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;border-bottom:1px solid #e8edf5;background:#f8fbff;color:#1d2a44}.ai-head button{border:0;background:#eff6ff;color:#1268d6;border-radius:999px;width:34px;height:34px;font-size:20px;cursor:pointer}.ai-messages{flex:1;overflow:auto;padding:14px;background:#f6f8fb}.ai-msg{max-width:92%;padding:10px 12px;border-radius:14px;margin:8px 0;line-height:1.45;white-space:pre-wrap}.ai-msg.bot{background:#fff;border:1px solid #e5eaf3;color:#344054}.ai-msg.user{background:#1268d6;color:#fff;margin-left:auto}.ai-input{display:flex;gap:8px;padding:10px;border-top:1px solid #e8edf5;background:#fff}.ai-input textarea{flex:1;resize:none;border:1px solid #d7dde9;border-radius:12px;padding:10px;font-family:inherit;outline:none}.ai-input button{width:70px;border:0;border-radius:12px;background:#1268d6;color:#fff;font-weight:800;cursor:pointer}#handoverType,#linenFilterType{font-weight:700;color:#1268d6}


/* v42 - Workit-like polish + pagination */
body{background:#eef2f6;color:#5f6078}.app{background:#eef2f6}main{max-width:1240px}.wrap{background:#eef2f6}header,.page{border-radius:10px;border:0;box-shadow:0 2px 10px rgba(31,41,55,.04);background:#fff}header{border-radius:10px;background:#fff}.top{box-shadow:none;border-bottom:1px solid #e4e9f1}aside{box-shadow:none;border-right:1px solid #e4e9f1;background:#fff}aside button{border:1px solid #eef2f7;border-radius:10px;box-shadow:none;background:#fff}aside button.active{background:#eef6ff;border-color:#b9dcff;box-shadow:inset 4px 0 0 #1683ff}.grid input,.grid select,.filters input,.filters select{background:#fff;border-color:#d8e1ee}.grid button,.page>button,#saveSettings{background:#087bf5;border-radius:10px;box-shadow:0 6px 14px rgba(8,123,245,.16)}.badge{font-size:13px;background:#eafff2;color:#0a9c48}.workit-table-wrap{width:100%;overflow:auto;border:1px solid #e6edf6;border-radius:10px;background:#fff;margin-top:14px}.workit-table-wrap table{margin-top:0;border:0;border-radius:0}.workit-table-wrap th{background:#f7f9fc;color:#59627a}.workit-table-wrap td{color:#5f6078}.row-actions{white-space:nowrap}.row-actions button{margin:2px}.table-status{margin:12px 0 6px;color:#727b90}.pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;padding:12px 2px;flex-wrap:wrap}.page-size,.page-nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:#606a7f}.page-size select{height:36px;min-width:84px;border:1px solid #d8e1ee;border-radius:9px;background:#fff;color:#354052;padding:0 10px}.pager-btn{min-width:36px;height:36px;border:1px solid #d8e7fa;background:#fff;color:#1473e6;border-radius:9px;padding:0 10px;font-weight:750;cursor:pointer}.pager-btn:hover{background:#eef6ff}.pager-btn.active{background:#1473e6;color:#fff;border-color:#1473e6}.pager-btn:disabled{opacity:.45;cursor:not-allowed;background:#f5f7fb;color:#94a3b8}.pager-ellipsis{padding:0 4px;color:#94a3b8}.filters{background:#f8fbff;border-color:#deebf8}.card{background:#fff;border-color:#e6edf6}.report-card{box-shadow:none;background:#fff}.sign-box{background:#f8fbff}.ai-float{background:#1473e6}@media(max-width:760px){.pagination{align-items:flex-start}.page-nav{width:100%}.page-size{width:100%}.pager-btn{min-width:34px}}