/* =============================================================================
   NamPhuongERP 1.66.3 C5 — Bulk Approval (Duyệt nhiều)
   Presentation only. Rows are rendered by renderApprovals (1.37.8 owner);
   the mode header / action bar by np1663Bulk (patch_1_65_1_approval_performance).
   Colours come from the 1.64.7 token set, so Light / Dark follow the app theme.
   ============================================================================= */
:root{
  --np1663-accent: var(--np1647-primary, #0B7FA4);
  --np1663-accent-weak: #E8F5FA;
  --np1663-surface: var(--np1647-surface, #fff);
  --np1663-line: var(--np1647-border-subtle, #E5E7EB);
  --np1663-text: var(--np1647-text-primary, #111827);
  --np1663-muted: var(--np1647-text-secondary, #475467);
}
html[data-theme="dark"]{ --np1663-accent-weak: rgba(56,189,248,.14); }

.np1663-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.np1663-bulk-toggle[hidden]{display:none!important}

/* ---- Checkbox (44 px hit area, 22 px visual box) ---- */
.np1663-pick{width:52px;text-align:center;vertical-align:middle}
.np1663-check{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;min-width:44px;min-height:44px;padding:0;margin:0;
  border:0!important;background:transparent!important;box-shadow:none!important;cursor:pointer;
}
.np1663-check::before{
  content:"";width:22px;height:22px;border-radius:6px;box-sizing:border-box;
  border:2px solid var(--np1647-text-muted, #667085);background:var(--np1663-surface);
}
.np1663-check.on::before{border-color:var(--np1663-accent);background:var(--np1663-accent)}
.np1663-check.on::after{
  content:"";position:absolute;left:50%;top:50%;width:6px;height:11px;margin:-7px 0 0 -3px;
  border:solid var(--np1647-on-primary, #fff);border-width:0 2.5px 2.5px 0;transform:rotate(45deg);
}
.np1663-check:focus-visible{outline:2px solid var(--np1663-accent);outline-offset:-4px;border-radius:10px}
tr.np1663-pickable{cursor:pointer}
#approvalTable tr.np1663-picked,#approvalTable tr.np1663-picked:nth-child(even),#approvalTable tr.np1663-picked:hover{background:var(--np1663-accent-weak)!important}
#approvalTable tr.np1663-picked>td:not(.np1663-pick){background:var(--np1663-accent-weak)!important}
@media (min-width:821px){#approvalTable tr.np1663-picked>td.np1663-pick{background:var(--np1663-accent-weak)!important}}
.np1663-check:disabled{opacity:.45;cursor:default}
@media (max-width:820px){#approvalTable .np-mobile-card-table tr.np1663-picked{box-shadow:0 0 0 2px var(--np1663-accent)!important;border-color:var(--np1663-accent)!important}}
tr.np1663-done{opacity:.72}
tr.np1663-failed{box-shadow:inset 3px 0 0 var(--np1647-danger, #B42318)}

/* ---- Mode header ---- */
.np1663-bulk-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  margin:0 0 10px;padding:10px 12px;border:1px solid var(--np1663-accent);border-radius:12px;
  background:var(--np1663-accent-weak);color:var(--np1663-text);
}
.np1663-bulk-title{display:flex;flex-direction:column;gap:2px;min-width:0}
.np1663-bulk-title b{font-size:15px}
.np1663-bulk-sum{font-size:13px;color:var(--np1663-muted);font-variant-numeric:tabular-nums}
.np1663-bulk-tools{display:flex;gap:8px;flex-wrap:wrap}
.np1663-bulk-tools button,
.np1663-bulk-bar button,
.np1663-confirm-actions button,
.np1663-results li button{min-height:44px!important;height:auto!important;white-space:nowrap}
@media (max-width:820px){#np1663BulkToggle{min-height:44px!important}}

/* ---- Action bar: desktop = inline under header area (sticky bottom of the page) ---- */
.np1663-bulk-bar{
  position:sticky;bottom:12px;z-index:30;
  display:flex;align-items:center;gap:8px;margin:10px 0 0;padding:8px 10px;
  border:1px solid var(--np1663-line);border-radius:12px;background:var(--np1663-surface);
  color:var(--np1663-text);box-shadow:0 -4px 16px rgba(16,24,40,.10);box-sizing:border-box;
}
html[data-theme="dark"] .np1663-bulk-bar{box-shadow:0 -4px 16px rgba(0,0,0,.45)}
.np1663-bar-info{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.np1663-bar-info b{font-size:15px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.np1663-bar-info small{font-size:14px;font-weight:700;line-height:1.25;color:var(--np1663-accent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.np1663-bar-info small:empty{display:none}
.np1663-bulk-bar.np1663-running .np1663-bar-info small{font-size:12px;font-weight:500;color:var(--np1663-muted)}
.np1663-bulk-bar button{flex:0 0 auto;white-space:nowrap;padding-left:14px;padding-right:14px}
.np1663-bulk-bar button[hidden]{display:none!important}
.np1663-progress{display:block;height:6px;border-radius:3px;background:var(--np1663-line);overflow:hidden}
.np1663-progress[hidden]{display:none}
.np1663-progress span{display:block;height:100%;width:0;background:var(--np1663-accent);transition:width .2s ease}
/* Desktop: the header already carries the primary action; bar only shows while running. */
@media (min-width:821px){
  .np1663-bulk-bar:not(.np1663-running){display:none}
}
@media (max-width:820px){
  .np1663-go-desktop{display:none}
  /* Mobile: fixed just above the bottom nav (same height source as 1.64.7 nextbar). */
  .np1663-bulk-bar{
    position:fixed;left:8px;right:8px;margin:0;z-index:56;
    /* --np1663-bar-bottom = distance from the viewport bottom to the TOP of the visible
       bottom nav (measured by np1663Bulk, covers the floating nav and its safe-area offset);
       without a nav it is env(safe-area-inset-bottom). Fallback = 1.64.7 nav height token. */
    bottom:calc(var(--np1663-bar-bottom, var(--np1647-nav-total, 72px)) + 8px);
  }
  body.np1663-bulk-bar-open #approvalTable{padding-bottom:88px}
  body.modal-open .np1663-bulk-bar{visibility:hidden}
  /* Typing in a filter (keyboard open): the bar steps aside so it never covers the field. */
  body:has(#content input:is([type="search"],[type="text"],[type="date"]):focus) .np1663-bulk-bar{display:none}
  .np1663-bulk-tools{width:100%}
  .np1663-bulk-tools button{flex:1 1 0;min-width:0;padding-left:8px;padding-right:8px}
  /* Card mode: checkbox is a 44 px target in the card's action row, no label column. */
  .np1663-bulk-table.np-mobile-card-table tr{position:relative}
  #approvalTable .np1663-bulk-table.np-mobile-card-table td.np1663-pick{
    position:absolute!important;top:auto!important;bottom:11px;right:14px;display:block!important;width:44px!important;height:44px!important;min-height:0!important;
    padding:0!important;margin:0!important;border:0!important;z-index:2;background:transparent!important;box-shadow:none!important;
  }
  #approvalTable .np1663-bulk-table.np-mobile-card-table td.np1663-pick::before{display:none!important}
  /* The checkbox sits in the card's action row (right of "Chi tiết", which is left-aligned),
     so it never covers the time, the customer name or the vehicle chip. */
}

/* ---- "Chọn tất cả": full wording on desktop, short on phones ---- */
.np1663-short{display:none}
@media (max-width:820px){.np1663-long{display:none}.np1663-short{display:inline}}

/* ---- Column shift: in bulk mode the pick cell is column 1, so existing
   index-based rules (written for the 6-column table) are re-applied one column
   later. Only inside .np1663-bulk-table; the normal table is untouched. ---- */
body.np-ui-reference .np1663-bulk-table tbody td.np1663-pick{font-weight:inherit!important}
body.np-ui-reference #approvalTable .np1663-bulk-table tbody td:nth-child(2){font-weight:700!important}
@media (max-width:900px){
  body.np137-modern #approvalTable .np1663-bulk-table.np-mobile-card-table td:nth-child(2){padding-top:11px}
}
@media (max-width:760px){
  body.np1421-density #approvalTable .np1663-bulk-table.np-mobile-card-table tbody td:nth-child(2){
    font-size:12px!important;font-weight:700!important;color:var(--npui-text, #0f172a)!important;
  }
  body.np1421-density #approvalTable .np1663-bulk-table.np-mobile-card-table tbody td:nth-child(3){
    font-size:13.5px!important;font-weight:780!important;color:#21495b!important;
  }
}
@media (min-width:901px){
  body.np-ui-reference #approvalTable .np1663-bulk-table th.np1663-pick,
  body.np-ui-reference #approvalTable .np1663-bulk-table td.np1663-pick{min-width:0;width:52px;white-space:nowrap!important}
  body.np-ui-reference #approvalTable .np1663-bulk-table th:nth-child(2),
  body.np-ui-reference #approvalTable .np1663-bulk-table td:nth-child(2){min-width:0;white-space:nowrap!important}
  body.np-ui-reference #approvalTable .np1663-bulk-table th:nth-child(3),
  body.np-ui-reference #approvalTable .np1663-bulk-table td:nth-child(3){min-width:220px;white-space:normal!important}
  body.np-ui-reference #approvalTable .np1663-bulk-table td:nth-child(2)>b,
  body.np-ui-reference #approvalTable .np1663-bulk-table td:nth-child(2)>small{display:inline;max-width:none}
  body.np-ui-reference #approvalTable .np1663-bulk-table td:nth-child(3)>b,
  body.np-ui-reference #approvalTable .np1663-bulk-table td:nth-child(3)>small{display:block;max-width:100%;overflow-wrap:anywhere}
}

/* ---- Confirm / result dialogs ---- */
.np1663-confirm{display:flex;flex-direction:column;gap:12px}
.np1663-confirm-total{display:flex;justify-content:space-between;align-items:baseline;padding:10px 12px;border-radius:10px;background:var(--np1663-accent-weak)}
.np1663-confirm-total b{font-size:18px;font-variant-numeric:tabular-nums}
.np1663-confirm-list,.np1663-results{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.np1663-confirm-list li{display:flex;justify-content:space-between;gap:10px;padding:8px 2px;border-bottom:1px solid var(--np1663-line)}
.np1663-confirm-list li span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.np1663-confirm-list li b{font-variant-numeric:tabular-nums;white-space:nowrap}
.np1663-confirm-list li.np1663-more{color:var(--np1663-muted);justify-content:flex-start}
.np1663-note{margin:0;font-size:13px;color:var(--np1663-muted)}
.np1663-confirm-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}
@media (max-width:820px){.np1663-confirm-actions button{flex:1 1 0}}
.np1663-results li{display:flex;align-items:center;gap:10px;padding:8px 2px;border-bottom:1px solid var(--np1663-line)}
.np1663-results li>i{flex:0 0 26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-weight:800;font-size:14px}
.np1663-results li.ok>i{background:var(--np1647-success-weak,#F0FDF4);color:var(--np1647-success,#16803D)}
.np1663-results li.bad>i{background:var(--np1647-danger-weak,#FEF3F2);color:var(--np1647-danger,#B42318)}
.np1663-results li.warn>i{background:var(--np1647-warning-weak,#FFF7ED);color:var(--np1647-warning,#9A570C)}
.np1663-results li>div{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.np1663-results li>div span{font-size:12.5px;color:var(--np1663-muted)}
.np1663-results li button{flex:0 0 auto}