/* NewlineWork unified application visual/table system — 2026-10-07
   Purpose:
   1) Every table fills its card instead of ending halfway.
   2) Truly wide tables scroll only inside their own frame.
   3) Cards, headings, tables and controls use one clean visual language. */

:root{
  --nw-ui-line:#dfe6ef;
  --nw-ui-line-soft:#edf1f5;
  --nw-ui-head:#f1f5f9;
  --nw-ui-head-text:#40516a;
  --nw-ui-text:#26364a;
  --nw-ui-muted:#758296;
  --nw-ui-card:#ffffff;
  --nw-ui-soft:#f8fafc;
  --nw-ui-blue:#2f78d3;
  --nw-ui-navy:#234f80;
}

#content{
  box-sizing:border-box!important;
  min-width:0!important;
  max-width:100%!important;
}

#content>*,
#content .grid,
#content .grid>*,
#content .card,
#content .panel,
#content .toolbar,
#content .table-wrap{
  box-sizing:border-box!important;
  min-width:0!important;
  max-width:100%!important;
}

/* --- Common page/card language --- */
#content .card,
#content .panel,
#content .settings-section{
  background:var(--nw-ui-card)!important;
  border:1px solid #e2e8f0!important;
  border-radius:16px!important;
  box-shadow:0 6px 18px rgba(31,49,72,.045)!important;
}

#content .card:has(.table-wrap),
#content .panel:has(.table-wrap){
  overflow:visible!important;
}

#content .card>.panel-head,
#content .panel>.panel-head,
#content .panel-head{
  min-width:0!important;
}

#content .card:has(> .panel-head + .table-wrap)>.panel-head,
#content .panel:has(> .panel-head + .table-wrap)>.panel-head{
  margin:0 0 11px!important;
  padding:0 0 10px!important;
  border-bottom:1px solid #e8edf3!important;
}

#content .panel-head h3{
  margin:0!important;
  color:#273a52!important;
  font-weight:900!important;
  letter-spacing:-.025em!important;
  line-height:1.3!important;
}

#content .panel-head small{
  display:block!important;
  margin-top:4px!important;
  color:#7a8798!important;
  line-height:1.4!important;
}

#content .page-title h2{
  color:#1d3048!important;
  font-weight:950!important;
  letter-spacing:-.035em!important;
}

#content .page-title p{
  color:#7a8798!important;
  line-height:1.5!important;
}

#content .toolbar{
  border:1px solid #e4eaf2!important;
  border-radius:14px!important;
  background:#f8fbff!important;
  padding:10px!important;
}

/* --- Universal table frame --- */
#content .table-wrap,
#content .settlement-sheet-table-wrap,
#content .settlement-sheet-summary-wrap{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  margin-left:0!important;
  margin-right:0!important;
  overflow-x:auto!important;
  overflow-y:visible!important;
  border:1px solid var(--nw-ui-line)!important;
  border-radius:12px!important;
  background:#fff!important;
  box-shadow:none!important;
  scrollbar-width:thin!important;
  scrollbar-color:#b8c5d6 #f5f7fa!important;
  -webkit-overflow-scrolling:touch!important;
  overscroll-behavior-x:contain!important;
}

#content .table-wrap::-webkit-scrollbar,
#content .settlement-sheet-table-wrap::-webkit-scrollbar,
#content .settlement-sheet-summary-wrap::-webkit-scrollbar{
  height:8px!important;
}

#content .table-wrap::-webkit-scrollbar-track,
#content .settlement-sheet-table-wrap::-webkit-scrollbar-track,
#content .settlement-sheet-summary-wrap::-webkit-scrollbar-track{
  background:#f5f7fa!important;
  border-radius:999px!important;
}

#content .table-wrap::-webkit-scrollbar-thumb,
#content .settlement-sheet-table-wrap::-webkit-scrollbar-thumb,
#content .settlement-sheet-summary-wrap::-webkit-scrollbar-thumb{
  background:#b8c5d6!important;
  border-radius:999px!important;
}

/* Every regular app table fills the visible card first. */
#content .table-wrap>table,
#content .table-wrap>.table,
#content table.nw-responsive-table,
#content .settlement-sheet-table,
#content .settlement-sheet-summary{
  box-sizing:border-box!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  border-collapse:separate!important;
  border-spacing:0!important;
  color:var(--nw-ui-text)!important;
  background:#fff!important;
}

/* Auto-classified tables: fit smaller tables, preserve width for truly wide ones. */
#content .table-wrap[data-nw-size="fit"]>table{
  width:100%!important;
  min-width:100%!important;
  table-layout:fixed!important;
}
#content .table-wrap[data-nw-size="medium"]>table{
  width:100%!important;
  min-width:100%!important;
  table-layout:fixed!important;
}
#content .table-wrap[data-nw-size="wide"]>table{
  width:max(100%,920px)!important;
  min-width:max(100%,920px)!important;
  table-layout:auto!important;
}
#content .table-wrap[data-nw-size="xwide"]>table{
  width:max(100%,1280px)!important;
  min-width:max(100%,1280px)!important;
  table-layout:auto!important;
}

/* Fallbacks for known wide tables even before the classifier runs. */
#content .cash-table{
  width:max(100%,1320px)!important;
  min-width:max(100%,1320px)!important;
  table-layout:fixed!important;
}
#content .stats-clean-year-table{
  width:max(100%,1360px)!important;
  min-width:max(100%,1360px)!important;
  table-layout:fixed!important;
}
#content .sales-purchase-table,
#content .sales-reconcile-table{
  width:max(100%,1240px)!important;
  min-width:max(100%,1240px)!important;
}
#content .trade-outstanding-table,
#content .card-purchase-table,
#content .employee-status-table{
  width:max(100%,1080px)!important;
  min-width:max(100%,1080px)!important;
}

/* External workforce already has its own carefully tuned fixed-layout tables. */
body.nw-classic-external #content .external-no-scroll>table,
#content .external-deployed-workers table,
#content .external-site-summary table,
#content .external-company-settlement table,
#content .external-tax-invoices table,
#content .external-direct-payment-detail table,
#content .external-worker-detail-card table{
  width:100%!important;
  min-width:0!important;
  table-layout:fixed!important;
}

/* --- Common table typography --- */
#content .table th,
#content .table td,
#content .nw-responsive-table th,
#content .nw-responsive-table td,
#content .settlement-sheet-table th,
#content .settlement-sheet-table td,
#content .settlement-sheet-summary th,
#content .settlement-sheet-summary td{
  box-sizing:border-box!important;
  border-right:1px solid var(--nw-ui-line-soft)!important;
  border-bottom:1px solid var(--nw-ui-line-soft)!important;
  padding:9px 8px!important;
  vertical-align:middle!important;
  line-height:1.4!important;
  word-break:keep-all!important;
  overflow-wrap:anywhere!important;
}

#content .table th:last-child,
#content .table td:last-child,
#content .nw-responsive-table th:last-child,
#content .nw-responsive-table td:last-child{
  border-right:0!important;
}

#content .table thead th,
#content .nw-responsive-table thead th,
#content .settlement-sheet-table thead th,
#content .settlement-sheet-summary thead th{
  position:sticky!important;
  top:0!important;
  z-index:2!important;
  background:var(--nw-ui-head)!important;
  color:var(--nw-ui-head-text)!important;
  border-bottom:1px solid #d8e1ec!important;
  font-size:10px!important;
  font-weight:900!important;
  text-align:center!important;
  white-space:normal!important;
  letter-spacing:-.02em!important;
}

#content .table tbody td,
#content .nw-responsive-table tbody td,
#content .settlement-sheet-table tbody td,
#content .settlement-sheet-summary tbody td{
  background:#fff!important;
  color:var(--nw-ui-text)!important;
  font-size:10.5px!important;
}

#content .table tbody tr:nth-child(even)>td,
#content .nw-responsive-table tbody tr:nth-child(even)>td{
  background:#fbfcfe!important;
}

#content .table tbody tr:hover>td,
#content .nw-responsive-table tbody tr:hover>td{
  background:#f5f9fd!important;
}

#content .table tbody tr:last-child>td,
#content .nw-responsive-table tbody tr:last-child>td{
  border-bottom:0!important;
}

#content .table td b,
#content .nw-responsive-table td b{
  color:#1e334d!important;
  font-weight:850!important;
}

#content .table td small,
#content .nw-responsive-table td small{
  display:block!important;
  margin-top:3px!important;
  color:var(--nw-ui-muted)!important;
  font-size:8px!important;
  line-height:1.35!important;
  white-space:normal!important;
}

#content .table td.num,
#content .table th.num,
#content .nw-responsive-table td.num,
#content .nw-responsive-table th.num{
  text-align:right!important;
  font-variant-numeric:tabular-nums!important;
}

#content .table td.center,
#content .table th.center,
#content .nw-responsive-table td.center,
#content .nw-responsive-table th.center{
  text-align:center!important;
}

/* Cash journal: explicit widths stop the right side from being clipped/half-width. */
#content .cash-table th:nth-child(1),
#content .cash-table td:nth-child(1){width:92px!important;text-align:center!important}
#content .cash-table th:nth-child(2),
#content .cash-table td:nth-child(2){width:140px!important}
#content .cash-table th:nth-child(3),
#content .cash-table td:nth-child(3){width:100px!important}
#content .cash-table th:nth-child(4),
#content .cash-table td:nth-child(4),
#content .cash-table th:nth-child(5),
#content .cash-table td:nth-child(5){width:95px!important}
#content .cash-table th:nth-child(6),
#content .cash-table td:nth-child(6){width:135px!important}
#content .cash-table th:nth-child(7),
#content .cash-table td:nth-child(7),
#content .cash-table th:nth-child(8),
#content .cash-table td:nth-child(8),
#content .cash-table th:nth-child(9),
#content .cash-table td:nth-child(9),
#content .cash-table th:nth-child(10),
#content .cash-table td:nth-child(10){width:100px!important;text-align:right!important;font-variant-numeric:tabular-nums!important}
#content .cash-table th:nth-child(11),
#content .cash-table td:nth-child(11){width:120px!important;text-align:center!important}
#content .cash-table th:nth-child(12),
#content .cash-table td:nth-child(12){width:115px!important;text-align:center!important}
#content .cash-table th:nth-child(13),
#content .cash-table td:nth-child(13){width:90px!important;text-align:center!important}

/* Buttons inside tables stay compact and aligned. */
#content .table .actions,
#content .nw-responsive-table .actions{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
  flex-wrap:wrap!important;
}

#content .table .actions button,
#content .nw-responsive-table .actions button,
#content .table button,
#content .nw-responsive-table button{
  min-height:28px!important;
  padding:5px 8px!important;
  border-radius:8px!important;
  font-size:8.5px!important;
  line-height:1.2!important;
  white-space:nowrap!important;
}

/* KPI cards use the same clean spacing as external workforce. */
#content .hero-stats,
#content .grid-4{
  gap:10px!important;
}

#content .hero-stats .stat,
#content .grid-4>.stat{
  min-width:0!important;
  border:1px solid #dfe7f1!important;
  border-radius:15px!important;
  box-shadow:0 5px 14px rgba(25,47,76,.04)!important;
}

#content .stat small{
  color:#708096!important;
  font-weight:800!important;
}

#content .stat b{
  color:#17304e!important;
  letter-spacing:-.03em!important;
}

/* Section title used in cash/accounting pages. */
#content .cash-category-title{
  margin:18px 2px 10px!important;
}

#content .cash-category-title h2{
  margin:0!important;
  color:#253a55!important;
  font-size:15px!important;
  font-weight:900!important;
}

#content .cash-category-title p{
  margin:5px 0 0!important;
  color:#7b8798!important;
  font-size:9px!important;
}

/* --- Responsive behavior --- */
@media (max-width:980px){
  #content .card,
  #content .panel,
  #content .settings-section{
    border-radius:14px!important;
  }

  #content .table-wrap[data-nw-size="wide"]>table{
    width:max(100%,840px)!important;
    min-width:max(100%,840px)!important;
  }
  #content .table-wrap[data-nw-size="xwide"]>table{
    width:max(100%,1160px)!important;
    min-width:max(100%,1160px)!important;
  }
}

@media (max-width:760px){
  #content .card,
  #content .panel{
    padding:11px 9px!important;
  }

  #content .table th,
  #content .table td,
  #content .nw-responsive-table th,
  #content .nw-responsive-table td{
    padding:7px 5px!important;
    line-height:1.35!important;
  }

  #content .table thead th,
  #content .nw-responsive-table thead th{
    font-size:8px!important;
  }

  #content .table tbody td,
  #content .nw-responsive-table tbody td{
    font-size:8.5px!important;
  }

  #content .table td small,
  #content .nw-responsive-table td small{
    font-size:7px!important;
  }

  #content .table-wrap[data-nw-size="fit"]>table{
    width:100%!important;
    min-width:100%!important;
    table-layout:fixed!important;
  }
  #content .table-wrap[data-nw-size="medium"]>table{
    width:max(100%,620px)!important;
    min-width:max(100%,620px)!important;
    table-layout:auto!important;
  }
  #content .table-wrap[data-nw-size="wide"]>table{
    width:max(100%,820px)!important;
    min-width:max(100%,820px)!important;
  }
  #content .table-wrap[data-nw-size="xwide"]>table{
    width:max(100%,1120px)!important;
    min-width:max(100%,1120px)!important;
  }

  #content .hero-stats,
  #content .grid-4{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }
}

/* Print keeps content full-width and removes screen-only scrolling. */
@media print{
  #content .table-wrap,
  #content .settlement-sheet-table-wrap,
  #content .settlement-sheet-summary-wrap{
    overflow:visible!important;
    border-radius:0!important;
    scrollbar-width:none!important;
  }

  #content .table-wrap>table,
  #content .table-wrap>.table,
  #content table.nw-responsive-table,
  #content .cash-table,
  #content .stats-clean-year-table,
  #content .sales-purchase-table,
  #content .sales-reconcile-table,
  #content .trade-outstanding-table{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    table-layout:fixed!important;
  }

  #content .table thead th,
  #content .nw-responsive-table thead th{
    position:static!important;
  }
}