/* =========================
   CLOSEOUT / KẾT CA
   ========================= */

/* Nút Lưu PDF / In */
.closeoutActions{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:12px;
  margin:0 0 12px;
  padding:10px 12px;
  background:#ffffff;
  border:1px solid #dbe4ee;
  border-radius:16px;
  box-shadow:0 6px 18px rgba(15,35,55,.08);
}

.closeoutPageHead{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
}

.savedCloseoutPanel{
  margin-top:14px;
}

.note-section label{
  display:block;
  font-weight:700;
  margin-bottom:6px;
  font-size:12px;
  color:#334155;
}

.note-section textarea,
.note-section input{
  width:100%;
  border:1px solid #cbd5e1;
  border-radius:8px;
  padding:8px 12px;
  font-size:13px;
  font-family:inherit;
  background:#f8fafc;
  color:#1e293b;
  transition: all 0.2s ease;
  outline: none;
  box-sizing: border-box;
}

.note-section textarea:focus,
.note-section input:focus{
  border-color:#0b61c9;
  background:#ffffff;
  box-shadow: 0 0 0 3px rgba(11, 97, 201, 0.15);
}

/* Dòng nhập Người bàn giao kiểu form nằm ngang */
.handover-row{
  display:flex;
  align-items:center;
  gap:8px;
  margin:8px 0 4px;
}
.handover-label{
  font-weight:800;
  font-size:12px;
  color:#1e293b;
  white-space:nowrap;
  flex-shrink:0;
}
.handover-input{
  flex:1;
  border:0!important;
  border-bottom:1.5px dotted #475569!important;
  border-radius:0!important;
  background:transparent!important;
  padding:2px 4px!important;
  font-size:12px!important;
  font-weight:700!important;
  color:#0f172a!important;
  box-shadow:none!important;
}
.handover-input:focus{
  border-bottom-color:#0b61c9!important;
  box-shadow:none!important;
  background:transparent!important;
}

/* Nút bị tắt khi chưa nhập người bàn giao */
.closeoutActions button:disabled{
  opacity:0.45;
  cursor:not-allowed;
}


@media print{
  .appNav,
  .closeoutPageHead,
  .savedCloseoutPanel,
  #progressBox,
  #msg{
    display:none!important;
  }
  #closeoutTab.panel{
    padding:0!important;
    border:0!important;
    box-shadow:none!important;
  }
}

.closeoutActions button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:130px;
  height:52px;
  font-size:22px;
  font-weight:900;
  border-radius:14px;
}

#closeoutPrintable{
  width:100%;
  min-height:400px;
  overflow:auto;
  border:1px solid #dfe7f1;
  border-radius:16px;
  background:#f1f5f9;
  padding:12px;
  flex:1 1 auto;
}

/* Khu vực kết ca */
.closeoutPrintArea,
.closeoutPrintArea *{
  box-sizing:border-box;
  font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif!important;
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
}

.closeoutPrintArea{
  width:100%!important;
  background:#f1f5f9!important;
  color:#1e293b!important;
  font-size:11px!important;
}

.closeoutPrintArea .dashboard-container{
  display:grid!important;
  grid-template-columns:290px minmax(0,1fr)!important;
  gap:12px!important;
  width:100%!important;
  min-height:620px!important;
}

.closeoutPrintArea .sidebar{
  background:#fff!important;
  border:1px solid #cbd5e1!important;
  border-radius:8px!important;
  overflow:hidden!important;
}

.closeoutPrintArea .sidebar-inner{
  padding:10px!important;
}

.closeoutPrintArea .main-columns{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  gap:12px!important;
  min-width:0!important;
  align-items:stretch!important;
}

.closeoutPrintArea .col-company{
  background:#fff!important;
  border:1px solid #cbd5e1!important;
  border-radius:8px!important;
  overflow:hidden!important;
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
}

.closeoutPrintArea .header-title{
  text-align:center!important;
  margin-bottom:8px!important;
  padding-bottom:8px!important;
  border-bottom:1px solid #e2e8f0!important;
}

.closeoutPrintArea .header-title h1{
  font-size:15px!important;
  color:#0f172a!important;
  text-transform:uppercase!important;
  margin:0!important;
}

.closeoutPrintArea .header-title .date{
  position:static!important;
  display:block!important;
  font-size:11px!important;
  color:#64748b!important;
  font-weight:700!important;
  margin-top:2px!important;
  text-align:center!important;
}

.closeoutPrintArea .summary-list{
  list-style:none!important;
  margin:0 0 8px!important;
  padding:0!important;
}

.closeoutPrintArea .summary-list li{
  display:flex!important;
  justify-content:space-between!important;
  padding:3px 0!important;
  border-bottom:1px dashed #cbd5e1!important;
  font-weight:700!important;
}

.closeoutPrintArea .summary-list li.total{
  border-top:2px solid #94a3b8!important;
  border-bottom:0!important;
  padding-top:4px!important;
  color:#b91c1c!important;
}

.closeoutPrintArea .side-table{
  width:100%!important;
  border-collapse:collapse!important;
  table-layout:fixed!important;
  margin-bottom:6px!important;
  font-size:11px!important;
}

.closeoutPrintArea .side-table th,
.closeoutPrintArea .side-table td{
  border:1px solid #cbd5e1!important;
  padding:3px 5px!important;
  text-align:right!important;
  line-height:1.25!important;
}

.closeoutPrintArea .side-table th:first-child,
.closeoutPrintArea .side-table td:first-child{
  text-align:left!important;
}

.closeoutPrintArea .side-table th{
  background:#f8fafc!important;
  color:#475569!important;
  font-weight:800!important;
  text-align:center!important;
}

.closeoutPrintArea .row-yellow td{
  background:#fef08a!important;
  color:#854d0e!important;
  font-weight:900!important;
}

.closeoutPrintArea .cash-count-input{
  width:100%!important;
  height:20px!important;
  border:0!important;
  background:transparent!important;
  text-align:center!important;
  font-weight:900!important;
  outline:0!important;
}

.closeoutPrintArea .print-time{
  text-align:right!important;
  font-size:10px!important;
  font-style:italic!important;
  color:#94a3b8!important;
  margin-bottom:8px!important;
}

.closeoutPrintArea .note-section{
  margin-top:6px!important;
  border-top:1px solid #cbd5e1!important;
  padding-top:6px!important;
}

.closeoutPrintArea .note-section p{
  font-weight:800!important;
  margin-bottom:25px!important;
  color:#475569!important;
}

.closeoutPrintArea .signatures{
  display:flex!important;
  justify-content:space-between!important;
  font-weight:800!important;
  text-align:center!important;
}

.closeoutPrintArea .col-header{
  text-align:center!important;
  padding:8px!important;
  background:#f8fafc!important;
  border-bottom:1px solid #cbd5e1!important;
}

.closeoutPrintArea .col-header h2{
  font-size:14px!important;
  color:#1e3a8a!important;
  margin:0 0 2px!important;
  font-weight:900!important;
}

.closeoutPrintArea .sub-date{
  font-size:11px!important;
  font-style:italic!important;
  color:#64748b!important;
  font-weight:700!important;
}

.closeoutPrintArea .revenue{
  text-align:right!important;
  font-size:12px!important;
  font-weight:900!important;
  color:#b91c1c!important;
  margin-top:4px!important;
}

.closeoutPrintArea .tables-wrapper{
  padding:8px!important;
  overflow:visible!important;
  flex-grow:1!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:flex-start!important;
}

.closeoutPrintArea .table-title{
  text-align:center!important;
  font-weight:900!important;
  background:#e2e8f0!important;
  padding:5px!important;
  border:1px solid #94a3b8!important;
  border-bottom:0!important;
  margin-top:8px!important;
  color:#1e293b!important;
  font-size:11px!important;
}

.closeoutPrintArea .table-title:first-child{
  margin-top:0!important;
}

.closeoutPrintArea .data-table{
  width:100%!important;
  border-collapse:collapse!important;
  table-layout:fixed!important;
  margin-bottom:12px!important;
  font-size:12px!important;
}

.closeoutPrintArea .data-table tr{
  height:22px!important;
}

.closeoutPrintArea .data-table th,
.closeoutPrintArea .data-table td{
  border:1px solid #94a3b8!important;
  padding:3px 5px!important;
  vertical-align:middle!important;
  line-height:1.2!important;
  height:22px!important;
}

.closeoutPrintArea .data-table th{
  background:#f1f5f9!important;
  color:#334155!important;
  font-weight:900!important;
  text-align:center!important;
}

.closeoutPrintArea .data-table .col-lop{width:8%!important;}
.closeoutPrintArea .data-table .col-ten{width:35%!important;}
.closeoutPrintArea .data-table .col-mon{width:27%!important;}
.closeoutPrintArea .data-table .col-phieu{width:14%!important;}
.closeoutPrintArea .data-table .col-tien{width:16%!important;}

.closeoutPrintArea .data-table.transfer-table .col-ten{width:28%!important;}
.closeoutPrintArea .data-table.transfer-table .col-mon{width:22%!important;}
.closeoutPrintArea .data-table.transfer-table .col-nganhang{width:10%!important;}
.closeoutPrintArea .data-table.transfer-table .col-phieu{width:14%!important;}
.closeoutPrintArea .data-table.transfer-table .col-tien{width:18%!important;}

.closeoutPrintArea .data-table td.col-lop{
  text-align:center!important;
  font-weight:900!important;
}

.closeoutPrintArea .data-table td:nth-child(2){
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  word-break:normal!important;
  font-size:9.5px!important;
}

.closeoutPrintArea .data-table td:nth-child(3){
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  word-break:normal!important;
  font-size:9.5px!important;
}

.closeoutPrintArea .data-table td.col-nganhang{
  text-align:center!important;
  font-weight:700!important;
  color:#1e3a8a!important;
  font-size:10.5px!important;
}

.closeoutPrintArea .data-table td.col-phieu{
  text-align:center!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

.closeoutPrintArea .data-table td.col-tien{
  text-align:right!important;
  font-weight:900!important;
  white-space:nowrap!important;
}

.closeoutPrintArea .total-row td{
  background:#fef08a!important;
  color:#854d0e!important;
  font-weight:900!important;
}

.closeoutPrintArea .empty-row td{
  text-align:center!important;
  color:#94a3b8!important;
  font-style:normal!important;
  padding:3px 5px!important;
  background:#ffffff!important;
}

.cash-ok{color:#11845b!important;}
.cash-missing{color:#ef4444!important;}
.cash-extra{color:#0b61c9!important;}

/* =========================
   PRINT A4 NGANG 1 TRANG
   ========================= */

@page{
  size:A4 landscape;
  margin:0!important;
}

@media print{
  html,body{
    width:297mm!important;
    min-height:210mm!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;
    overflow:visible!important;
    background:#fff!important;
  }

  body *{
    visibility:hidden!important;
  }

  body.view-closeout #closeoutPrintable,
  body.view-closeout #closeoutPrintable *{
    visibility:visible!important;
  }

  body.view-closeout .closeoutActions{
    display:none!important;
  }

  body.view-closeout #closeoutPrintable{
    position:absolute!important;
    left:0!important;
    top:0!important;
    width:297mm!important;
    min-height:210mm!important;
    height:auto!important;
    max-height:none!important;
    overflow:visible!important;
    border:0!important;
    border-radius:0!important;
    padding:0!important;
    margin:0!important;
    background:#f1f5f9!important;
  }

  .closeoutPrintArea input,
  .closeoutPrintArea textarea,
  .closeoutPrintArea select {
    display:none!important;
  }

  .closeoutPrintArea{
    width:287mm!important;
    min-height:196mm!important;
    height:auto!important;
    margin:5mm auto!important;
    padding:0!important;
    background:#f1f5f9!important;
    overflow:visible!important;
    font-size:7.4px!important;
  }

  .closeoutPrintArea .dashboard-container{
    grid-template-columns:60mm minmax(0,1fr)!important;
    gap:3mm!important;
    width:287mm!important;
    min-height:196mm!important;
    height:auto!important;
    overflow:visible!important;
  }

  .closeoutPrintArea .main-columns{
    gap:3mm!important;
  }

  .closeoutPrintArea .sidebar,
  .closeoutPrintArea .col-company{
    min-height:196mm!important;
    height:auto!important;
    border-radius:0!important;
    box-shadow:none!important;
    overflow:visible!important;
  }

  .closeoutPrintArea .sidebar-inner{
    padding:1.2mm!important;
  }

  .closeoutPrintArea .col-header{
    padding:1.4mm!important;
  }

  .closeoutPrintArea .tables-wrapper{
    padding:1.4mm!important;
  }

  .closeoutPrintArea .header-title{
    margin-bottom:.8mm!important;
    padding-bottom:.8mm!important;
  }

  .closeoutPrintArea .header-title h1{
    font-size:10px!important;
    line-height:1.05!important;
  }

  .closeoutPrintArea .header-title .date,
  .closeoutPrintArea .sub-date{
    font-size:7.4px!important;
  }

  .closeoutPrintArea .summary-list{
    margin-bottom:.8mm!important;
  }

  .closeoutPrintArea .summary-list li{
    font-size:7.4px!important;
    padding:.3mm 0!important;
  }

  .closeoutPrintArea .side-table{
    font-size:6.8px!important;
    margin-bottom:.7mm!important;
  }

  .closeoutPrintArea .side-table th,
  .closeoutPrintArea .side-table td{
    padding:.35mm .55mm!important;
    line-height:1!important;
  }

  .closeoutPrintArea .cash-count-input{
    height:9px!important;
    font-size:6.8px!important;
  }

  .closeoutPrintArea .print-time{
    font-size:6.4px!important;
    margin-bottom:.7mm!important;
  }

  .closeoutPrintArea .col-header h2{
    font-size:9.2px!important;
    line-height:1.05!important;
  }

  .closeoutPrintArea .revenue{
    font-size:8.2px!important;
    margin-top:.6mm!important;
  }

  .closeoutPrintArea .table-title{
    font-size:7.6px!important;
    padding:.8mm!important;
    margin-top:1.2mm!important;
  }

  .closeoutPrintArea .data-table{
    font-size:6.8px!important;
    margin-bottom:1.2mm!important;
  }

  .closeoutPrintArea .data-table tr{
    height:12px!important;
  }

  .closeoutPrintArea .data-table th,
  .closeoutPrintArea .data-table td{
    padding:.65mm .45mm!important;
    line-height:1.05!important;
    height:12px!important;
  }

  .closeoutPrintArea .empty-row td{
    padding:.65mm .45mm!important;
    height:12px!important;
    background:#ffffff!important;
  }

  .closeoutPrintArea .data-table .col-lop{width:8%!important;}
  .closeoutPrintArea .data-table .col-ten{width:35%!important;}
  .closeoutPrintArea .data-table .col-mon{width:27%!important;}
  .closeoutPrintArea .data-table .col-phieu{width:14%!important;}
  .closeoutPrintArea .data-table .col-tien{width:16%!important;}

  .closeoutPrintArea .data-table.transfer-table .col-ten{width:28%!important;}
  .closeoutPrintArea .data-table.transfer-table .col-mon{width:22%!important;}
  .closeoutPrintArea .data-table.transfer-table .col-nganhang{width:10%!important;}
  .closeoutPrintArea .data-table.transfer-table .col-phieu{width:14%!important;}
  .closeoutPrintArea .data-table.transfer-table .col-tien{width:18%!important;}

  .closeoutPrintArea .data-table td:nth-child(2),
  .closeoutPrintArea .data-table td:nth-child(3),
  .closeoutPrintArea .data-table td.col-nganhang{
    font-size:6.2px!important;
  }

  .closeoutPrintArea .note-section p{
    font-size:7px!important;
    margin-bottom:4mm!important;
  }

  .closeoutPrintArea .signatures{
    font-size:7px!important;
  }

  .closeoutPrintArea .signatures .sig-input {
    display: none !important;
  }
}

/* ─── Giao diện hàng nút trên Header ─── */
.closeoutHeaderActions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.closeoutHeaderActions .closeoutActions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.closeoutHeaderActions button {
  min-width: 100px !important;
  height: 38px !important;
  font-size: 14px !important;
  border-radius: 9px !important;
  padding: 8px 12px !important;
}

/* ─── Nhập tên ký trực tiếp ─── */
.closeoutPrintArea .signatures {
  display: flex !important;
  justify-content: space-between !important;
  margin-top: 15px !important;
  font-weight: 800 !important;
  text-align: center !important;
}

.closeoutPrintArea .signatures > div {
  width: 48% !important;
  text-align: center !important;
}

.closeoutPrintArea .signatures .sig-input {
  width: 100% !important;
  max-width: 130px !important;
  border: none !important;
  border-bottom: 1.2px dotted #94a3b8 !important;
  background: transparent !important;
  text-align: center !important;
  font-family: inherit !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  padding: 2px 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  margin-top: 45px !important;
}

.closeoutPrintArea .signatures .sig-input::placeholder {
  color: #cbd5e1 !important;
  font-weight: 400 !important;
  font-size: 9px !important;
  text-align: center !important;
}

@media print {
  .closeoutPrintArea .signatures .sig-input {
    border: none !important;
    border-bottom: 1.2px dotted #94a3b8 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 8px !important;
    margin-top: 45px !important;
    width: 130px !important;
    max-width: 130px !important;
    text-align: center !important;
  }
}



/* === Specificity override to hide main shell when app is locked === */
html body.locked #appShell {
  display: none !important;
}

/* === Print styles for saved closeout modal === */
@media print {
  body.print-saved-closeout #appShell,
  body.print-saved-closeout #progressBox,
  body.print-saved-closeout #msg {
    display: none !important;
  }
  body.print-saved-closeout #savedCloseoutModal,
  body.print-saved-closeout #savedCloseoutModal * {
    visibility: visible !important;
  }
  body.print-saved-closeout #savedCloseoutModal {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 297mm !important;
    min-height: 196mm !important;
    height: auto !important;
    background: #fff !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    overflow: visible !important;
    display: block !important;
    z-index: 9999999 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  body.print-saved-closeout #savedCloseoutModal .modalBox {
    width: 287mm !important;
    min-height: 190mm !important;
    height: auto !important;
    margin: 3mm auto !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    background: #fff !important;
    overflow: visible !important;
  }
  body.print-saved-closeout #savedCloseoutModal .modalHead,
  body.print-saved-closeout #savedCloseoutModal .modalClose {
    display: none !important;
  }
}

#savedCloseoutTable .gridTable th:nth-child(6),
#savedCloseoutTable .gridTable td:nth-child(6) {
  text-align: center !important;
}