/* NewlineWork 2026-10-06 final mobile/table design system */
:root{
  --nw-bg:#f6f8fc;
  --nw-surface:#ffffff;
  --nw-surface-soft:#f8fbff;
  --nw-line:#e2e8f0;
  --nw-line-strong:#cfd9e7;
  --nw-text:#10213a;
  --nw-muted:#6b7c93;
  --nw-navy:#0d315b;
  --nw-blue:#0b6fe8;
  --nw-blue-soft:#edf5ff;
  --nw-green:#0a9f6e;
  --nw-green-soft:#ebfaf4;
  --nw-orange:#e97800;
  --nw-orange-soft:#fff5e8;
  --nw-red:#e23b4b;
  --nw-red-soft:#fff0f2;
  --nw-violet:#6f55d9;
  --nw-violet-soft:#f2efff;
}
html,body{max-width:100%;overflow-x:hidden}
body.nw-ui-polish{background:var(--nw-bg);color:var(--nw-text)}
body.nw-ui-polish #app,
body.nw-ui-polish .app-shell,
body.nw-ui-polish main,
body.nw-ui-polish #content{max-width:100%;min-width:0;overflow-x:hidden}
body.nw-ui-polish #content{box-sizing:border-box}
body.nw-ui-polish .card,
body.nw-ui-polish .stat,
body.nw-ui-polish .panel{
  box-sizing:border-box;
  min-width:0;
  border-color:var(--nw-line)!important;
  background:var(--nw-surface)!important;
}
body.nw-ui-polish .card{border-radius:18px!important;box-shadow:0 6px 22px rgba(26,48,82,.045)!important}
body.nw-ui-polish .panel-head,
body.nw-ui-polish .toolbar,
body.nw-ui-polish .row-wrap,
body.nw-ui-polish .actions{min-width:0;max-width:100%}
body.nw-ui-polish .panel-head{gap:10px;flex-wrap:wrap}
body.nw-ui-polish .panel-head>div{min-width:0}
body.nw-ui-polish .panel-head h3{color:var(--nw-text);line-height:1.3}
body.nw-ui-polish .panel-head small{color:var(--nw-muted);line-height:1.45}
body.nw-ui-polish .btn,
body.nw-ui-polish button{
  box-sizing:border-box;
}
body.nw-ui-polish .btn{
  min-height:38px;
  border-radius:11px!important;
  font-weight:850!important;
}
body.nw-ui-polish .btn-primary{
  background:linear-gradient(135deg,var(--nw-blue),#075fc8)!important;
  color:#fff!important;
}
body.nw-ui-polish .btn-soft{
  background:var(--nw-blue-soft)!important;
  color:#075fc8!important;
  border:1px solid #d6e7ff!important;
}
body.nw-ui-polish .btn-neutral{
  background:#f2f5f9!important;
  color:#40526b!important;
  border:1px solid var(--nw-line)!important;
}
body.nw-ui-polish .badge{
  border-radius:999px!important;
  font-weight:850!important;
}
body.nw-ui-polish .badge.blue{background:var(--nw-blue-soft)!important;color:#075fc8!important}
body.nw-ui-polish .badge.green{background:var(--nw-green-soft)!important;color:#087a58!important}
body.nw-ui-polish .badge.orange{background:var(--nw-orange-soft)!important;color:#b65f00!important}
body.nw-ui-polish .badge.red{background:var(--nw-red-soft)!important;color:#c42d3d!important}
body.nw-ui-polish .badge.violet{background:var(--nw-violet-soft)!important;color:#5e48bc!important}
body.nw-ui-polish input,
body.nw-ui-polish select,
body.nw-ui-polish textarea{
  box-sizing:border-box;
  max-width:100%;
  border-color:var(--nw-line-strong)!important;
  color:var(--nw-text)!important;
}
body.nw-ui-polish input[type="month"]{min-height:42px!important}

/* Contain every table inside its own viewport instead of widening the page. */
body.nw-ui-polish .table-wrap{
  position:relative!important;
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  -webkit-overflow-scrolling:touch!important;
  overscroll-behavior-x:contain!important;
  border:1px solid var(--nw-line)!important;
  border-radius:14px!important;
  background:#fff!important;
  box-shadow:none!important;
  scrollbar-gutter:stable both-edges;
}
body.nw-ui-polish .table-wrap table,
body.nw-ui-polish table.table{
  border-collapse:separate!important;
  border-spacing:0!important;
  margin:0!important;
  background:#fff!important;
  color:var(--nw-text)!important;
}
body.nw-ui-polish .table-wrap[data-nw-size="fit"] table{width:100%!important;min-width:100%!important;table-layout:auto!important}
body.nw-ui-polish .table-wrap[data-nw-size="medium"] table{width:max-content!important;min-width:680px!important;table-layout:auto!important}
body.nw-ui-polish .table-wrap[data-nw-size="wide"] table{width:max-content!important;min-width:900px!important;table-layout:auto!important}
body.nw-ui-polish .table-wrap[data-nw-size="xwide"] table{width:max-content!important;min-width:1160px!important;table-layout:auto!important}
body.nw-ui-polish table.table thead th{
  position:static!important;
  background:#eef4fb!important;
  color:#3d526f!important;
  border-bottom:1px solid #d7e2ef!important;
  font-weight:900!important;
  white-space:nowrap!important;
  vertical-align:middle!important;
}
body.nw-ui-polish table.table tbody td{
  background:#fff!important;
  border-bottom:1px solid #edf1f6!important;
  color:var(--nw-text)!important;
  vertical-align:middle!important;
  line-height:1.4!important;
}
body.nw-ui-polish table.table tbody tr:nth-child(even) td{background:#fbfcfe!important}
body.nw-ui-polish table.table tbody tr:last-child td{border-bottom:0!important}
body.nw-ui-polish table.table th,
body.nw-ui-polish table.table td{
  box-sizing:border-box!important;
  max-width:320px;
  overflow-wrap:anywhere;
  word-break:keep-all;
}
body.nw-ui-polish table.table td.num,
body.nw-ui-polish table.table th.num,
body.nw-ui-polish table.table td.plus,
body.nw-ui-polish table.table td.minus{
  white-space:nowrap!important;
  font-variant-numeric:tabular-nums;
  text-align:right;
}
body.nw-ui-polish table.table td b,
body.nw-ui-polish .finance-col b,
body.nw-ui-polish .stat b{
  font-variant-numeric:tabular-nums;
}
body.nw-ui-polish table.table td small{
  display:block;
  margin-top:3px;
  color:var(--nw-muted)!important;
  line-height:1.35!important;
}
body.nw-ui-polish .table-wrap .actions{
  display:flex!important;
  gap:5px!important;
  flex-wrap:wrap!important;
  align-items:center!important;
}
body.nw-ui-polish .table-wrap .actions button,
body.nw-ui-polish .table-wrap .btn{
  min-height:32px!important;
  padding:6px 9px!important;
  white-space:nowrap!important;
}
body.nw-ui-polish .plus{color:var(--nw-green)!important}
body.nw-ui-polish .minus,
body.nw-ui-polish .danger{color:var(--nw-red)!important}

/* Finance home: prevent very long amounts from damaging the grid. */
body.nw-ui-polish .image-finance-grid{min-width:0}
body.nw-ui-polish .finance-col{min-width:0}
body.nw-ui-polish .finance-col>div{min-width:0}
body.nw-ui-polish .finance-col b{
  min-width:0;
  max-width:62%;
  text-align:right;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* External workforce month control - always visible directly below the title. */
body.nw-ui-polish .external-month-toolbar{
  display:flex!important;
  visibility:visible!important;
  opacity:1!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  padding:10px!important;
  margin:0 0 12px!important;
  border:1px solid #dbe7f4!important;
  border-radius:14px!important;
  background:var(--nw-surface-soft)!important;
}
body.nw-ui-polish .external-month-nav{display:flex!important;align-items:center!important;gap:7px!important;flex-wrap:wrap!important;min-width:0}
body.nw-ui-polish .external-month-picker{display:flex!important;align-items:center!important;gap:7px!important;min-width:0!important}
body.nw-ui-polish .external-month-picker>span{white-space:nowrap;color:var(--nw-muted);font-size:10px;font-weight:900}
body.nw-ui-polish .external-month-picker input,.external-month-picker select{display:block!important;visibility:visible!important;min-width:145px!important}
body.nw-ui-polish .external-month-current{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:38px!important;
  padding:7px 11px!important;
  border-radius:11px!important;
  background:var(--nw-blue-soft)!important;
  color:#075fc8!important;
  font-weight:900!important;
  white-space:nowrap!important;
}

/* A bad imported amount should never stretch the dashboard while a repair is pending. */
body.nw-ui-polish .nw-finance-warning{
  margin:8px 0 0;
  padding:8px 10px;
  border:1px solid #fed7aa;
  border-radius:10px;
  background:#fff7ed;
  color:#9a4c00;
  font-size:10px;
  line-height:1.45;
}

@media(max-width:980px){
  body.nw-ui-polish #content{padding-left:10px!important;padding-right:10px!important}
  body.nw-ui-polish .page-title{align-items:flex-start!important;flex-wrap:wrap!important;gap:10px!important}
  body.nw-ui-polish .page-title>div,
  body.nw-ui-polish .page-title .actions{min-width:0!important;max-width:100%!important}
  body.nw-ui-polish .page-title .actions{width:100%;display:flex!important;flex-wrap:wrap!important;gap:7px!important}
  body.nw-ui-polish .card{border-radius:16px!important}
  body.nw-ui-polish table.table th,
  body.nw-ui-polish table.table td{padding:8px 7px!important;font-size:10px!important}
  body.nw-ui-polish table.table td small{font-size:8px!important}
  body.nw-ui-polish .external-no-scroll{
    overflow-x:auto!important;
    overflow-y:hidden!important;
    width:100%!important;
    max-width:100%!important;
  }
  body.nw-ui-polish .external-no-scroll table{
    width:max-content!important;
    min-width:760px!important;
    table-layout:auto!important;
  }
  body.nw-ui-polish .external-month-toolbar{display:block!important}
  body.nw-ui-polish .external-month-nav{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    width:100%!important;
  }
  body.nw-ui-polish .external-month-picker{grid-column:1/-1!important;grid-row:1!important;width:100%!important}
  body.nw-ui-polish .external-month-picker input,.external-month-picker select{width:100%!important;min-width:0!important;max-width:none!important}
  body.nw-ui-polish #externalPrevMonth{grid-column:1!important}
  body.nw-ui-polish #externalNextMonth{grid-column:2!important}
  body.nw-ui-polish #externalThisMonth{grid-column:1/-1!important}
  body.nw-ui-polish .external-month-current{width:100%!important;margin-top:8px!important}
  body.nw-ui-polish .finance-col b{max-width:58%;font-size:clamp(10px,3vw,14px)!important}
}
@media(max-width:560px){
  body.nw-ui-polish .grid.grid-4:not(.image-home-kpi-grid){grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.nw-ui-polish .toolbar{flex-wrap:wrap!important}
  body.nw-ui-polish .toolbar>input,
  body.nw-ui-polish .toolbar>select{max-width:100%!important}
  body.nw-ui-polish .external-title-actions{display:grid!important;grid-template-columns:1fr 1fr!important;width:100%!important}
  body.nw-ui-polish .external-title-actions .btn{width:100%!important}
}
@media print{
  body.nw-ui-polish .table-wrap{overflow:visible!important;border:0!important}
  body.nw-ui-polish .table-wrap table{min-width:0!important;width:100%!important}
}


/* 357 mobile viewport hard lock */
@media(max-width:980px){
  html,body,#app,.app-shell,.clean-shell{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
    box-sizing:border-box!important;
  }
  html,body{overflow-x:hidden!important;touch-action:pan-x pan-y}
  .app-shell>main,.clean-shell>main,main{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
    box-sizing:border-box!important;
    overflow-x:hidden!important;
  }
  .reference-header,
  .mobile-reference-header,
  .company-header,
  .top-primary-menu,
  .top-primary-menu.grouped-top-menu{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    box-sizing:border-box!important;
  }
  #content{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
    box-sizing:border-box!important;
    overflow-x:hidden!important;
  }
  #content>*{max-width:100%;box-sizing:border-box}
  .table-wrap{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    box-sizing:border-box!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    touch-action:pan-x pan-y!important;
  }
}


/* 357 cash annual mobile cards */
.cash-year-mobile-list{display:none}
@media(max-width:760px){
  .cash-year-stats .panel-head{display:block!important}
  .cash-year-totals{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:7px!important;
    margin-top:10px!important;
  }
  .cash-year-totals>span{
    min-width:0!important;
    padding:9px 10px!important;
    border:1px solid var(--nw-line)!important;
    border-radius:11px!important;
    background:#f8fbff!important;
    color:var(--nw-muted)!important;
    font-size:9px!important;
  }
  .cash-year-totals>span b{
    display:block!important;
    margin-top:4px!important;
    color:var(--nw-text)!important;
    font-size:13px!important;
    font-variant-numeric:tabular-nums!important;
    white-space:nowrap!important;
  }
  .cash-year-desktop-table{display:none!important}
  .cash-year-mobile-list{
    display:grid!important;
    gap:8px!important;
    margin-top:10px!important;
  }
  .cash-year-mobile-row{
    min-width:0!important;
    padding:11px!important;
    border:1px solid var(--nw-line)!important;
    border-radius:13px!important;
    background:#fff!important;
  }
  .cash-year-mobile-title{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:8px!important;
    padding-bottom:8px!important;
    margin-bottom:8px!important;
    border-bottom:1px solid #edf1f6!important;
  }
  .cash-year-mobile-title b{
    min-width:0!important;
    color:var(--nw-text)!important;
    font-size:12px!important;
    line-height:1.25!important;
  }
  .cash-year-mobile-title span{
    flex:0 0 auto!important;
    padding:4px 7px!important;
    border-radius:999px!important;
    background:#eef4fb!important;
    color:#5f7088!important;
    font-size:8.5px!important;
    font-weight:850!important;
  }
  .cash-year-mobile-values{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:6px!important;
  }
  .cash-year-mobile-values>span{
    min-width:0!important;
    padding:8px 6px!important;
    border-radius:10px!important;
    background:#fafcff!important;
    text-align:center!important;
  }
  .cash-year-mobile-values small{
    display:block!important;
    margin-bottom:4px!important;
    color:var(--nw-muted)!important;
    font-size:7.5px!important;
    font-weight:800!important;
  }
  .cash-year-mobile-values b{
    display:block!important;
    min-width:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:9.5px!important;
    font-variant-numeric:tabular-nums!important;
  }
}


/* 364 classic external workforce visibility */
body.nw-ui-polish .external-toolbar:not(.external-month-toolbar){
  display:flex!important;
  visibility:visible!important;
  opacity:1!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  margin:0 0 12px!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
}
body.nw-ui-polish .external-toolbar:not(.external-month-toolbar) #externalMonth{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  width:170px!important;
  min-width:140px!important;
  max-width:170px!important;
  min-height:40px!important;
  position:static!important;
  transform:none!important;
  pointer-events:auto!important;
}
body.nw-ui-polish .external-toolbar:not(.external-month-toolbar)>span{
  display:inline!important;
  visibility:visible!important;
  color:var(--nw-muted)!important;
  font-size:11px!important;
  white-space:nowrap!important;
}
@media(max-width:600px){
  body.nw-ui-polish .external-toolbar:not(.external-month-toolbar){
    display:grid!important;
    grid-template-columns:minmax(140px,170px) 1fr!important;
    width:100%!important;
  }
  body.nw-ui-polish .external-toolbar:not(.external-month-toolbar) #externalMonth{
    width:100%!important;
    max-width:none!important;
  }
  body.nw-ui-polish .external-toolbar:not(.external-month-toolbar)>span{
    text-align:right!important;
  }
}


/* 366 exact classic external workforce isolation */
body.nw-classic-external .external-toolbar{
  display:flex!important;
  visibility:visible!important;
  opacity:1!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  margin:0 0 12px!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
}
body.nw-classic-external .external-toolbar #externalMonth{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  max-width:170px!important;
  min-height:40px!important;
  position:static!important;
  transform:none!important;
  pointer-events:auto!important;
}
body.nw-classic-external .external-kpis{margin-bottom:12px!important}
body.nw-classic-external .external-site-summary{border-top:4px solid #4487d8!important}
body.nw-classic-external .external-company-settlement{border-top:4px solid #7b61c9!important}
body.nw-classic-external .external-tax-invoices{border-top:4px solid #0f9f7f!important}
body.nw-classic-external .external-direct-payment-detail{border-top:4px solid #e99a35!important}
body.nw-classic-external .external-company-settlement .panel-head,
body.nw-classic-external .external-tax-invoices .panel-head,
body.nw-classic-external .external-direct-payment-detail .panel-head,
body.nw-classic-external .external-site-summary .panel-head{
  padding:3px 2px 12px!important;
  border-bottom:1px solid #edf1f5!important;
  margin-bottom:12px!important;
}
body.nw-classic-external .external-company-settlement .panel-head h3{color:#4c3a92!important}
body.nw-classic-external .external-tax-invoices .panel-head h3{color:#087b65!important}
body.nw-classic-external .external-direct-payment-detail .panel-head h3{color:#a85d0c!important}
body.nw-classic-external .external-site-summary .panel-head h3{color:#275f9f!important}

body.nw-classic-external .external-no-scroll{
  overflow:visible!important;
  width:100%!important;
  max-width:100%!important;
}
body.nw-classic-external .external-company-compact,
body.nw-classic-external .external-invoice-expense-table,
body.nw-classic-external .external-invoice-due-table,
body.nw-classic-external .external-direct-compact,
body.nw-classic-external .external-worker-compact{
  width:100%!important;
  min-width:0!important;
  table-layout:fixed!important;
  border:1px solid #e4eaf1!important;
  border-collapse:separate!important;
  border-spacing:0!important;
  border-radius:12px!important;
  overflow:hidden!important;
}
body.nw-classic-external .external-company-compact th,
body.nw-classic-external .external-invoice-expense-table th,
body.nw-classic-external .external-invoice-due-table th,
body.nw-classic-external .external-direct-compact th,
body.nw-classic-external .external-worker-compact th{
  background:#f2f6fb!important;
  color:#3f5068!important;
  border-right:1px solid #e0e7f0!important;
  border-bottom:1px solid #dce4ee!important;
  text-align:center!important;
  font-weight:900!important;
}
body.nw-classic-external .external-company-compact td,
body.nw-classic-external .external-invoice-expense-table td,
body.nw-classic-external .external-invoice-due-table td,
body.nw-classic-external .external-direct-compact td,
body.nw-classic-external .external-worker-compact td{
  border-right:1px solid #edf1f5!important;
  border-bottom:1px solid #edf1f5!important;
  background:#fff!important;
}
body.nw-classic-external .external-company-compact tbody tr:nth-child(even) td,
body.nw-classic-external .external-invoice-expense-table tbody tr:nth-child(even) td,
body.nw-classic-external .external-invoice-due-table tbody tr:nth-child(even) td,
body.nw-classic-external .external-direct-compact tbody tr:nth-child(even) td,
body.nw-classic-external .external-worker-compact tbody tr:nth-child(even) td{background:#fbfdff!important}
body.nw-classic-external .external-company-compact th:last-child,
body.nw-classic-external .external-company-compact td:last-child,
body.nw-classic-external .external-invoice-expense-table th:last-child,
body.nw-classic-external .external-invoice-expense-table td:last-child,
body.nw-classic-external .external-invoice-due-table th:last-child,
body.nw-classic-external .external-invoice-due-table td:last-child,
body.nw-classic-external .external-direct-compact th:last-child,
body.nw-classic-external .external-direct-compact td:last-child,
body.nw-classic-external .external-worker-compact th:last-child,
body.nw-classic-external .external-worker-compact td:last-child{border-right:0!important}
body.nw-classic-external .ext-col-company{width:22%!important}
body.nw-classic-external .ext-col-people{width:10%!important}
body.nw-classic-external .ext-col-labor{width:20%!important}
body.nw-classic-external .ext-col-direct{width:14%!important}
body.nw-classic-external .ext-col-issued{width:12%!important}
body.nw-classic-external .ext-col-due{width:14%!important}
body.nw-classic-external .ext-col-manage{width:8%!important}
body.nw-classic-external .external-direct-cell{color:#b45309!important}
body.nw-classic-external .external-due-cell b{color:#0a7b60!important}
body.nw-classic-external .external-status{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  margin-top:4px!important;padding:3px 6px!important;border-radius:999px!important;
  font-size:7.5px!important;font-weight:900!important;white-space:nowrap!important
}
body.nw-classic-external .external-status.due{background:#fff3db!important;color:#b45309!important}
body.nw-classic-external .external-status.done{background:#e8f8f1!important;color:#087b65!important}
body.nw-classic-external .external-total-row td{
  background:#edf4fb!important;border-top:2px solid #9fb4cc!important;font-weight:900!important
}
body.nw-classic-external .external-invoice-kpi{display:flex!important;gap:7px!important;flex-wrap:wrap!important;justify-content:flex-end!important}
body.nw-classic-external .external-subsection-title{
  display:flex!important;justify-content:space-between!important;align-items:end!important;gap:12px!important;
  margin:2px 0 8px!important;padding:9px 11px!important;border-radius:10px!important;
  background:linear-gradient(90deg,#f0f7ff,#f8fbff)!important
}
@media(max-width:760px){
  body.nw-classic-external .external-company-compact,
  body.nw-classic-external .external-invoice-expense-table,
  body.nw-classic-external .external-invoice-due-table,
  body.nw-classic-external .external-direct-compact,
  body.nw-classic-external .external-worker-compact{font-size:7.8px!important}
  body.nw-classic-external .external-company-compact th,
  body.nw-classic-external .external-company-compact td,
  body.nw-classic-external .external-invoice-expense-table th,
  body.nw-classic-external .external-invoice-expense-table td,
  body.nw-classic-external .external-invoice-due-table th,
  body.nw-classic-external .external-invoice-due-table td,
  body.nw-classic-external .external-direct-compact th,
  body.nw-classic-external .external-direct-compact td,
  body.nw-classic-external .external-worker-compact th,
  body.nw-classic-external .external-worker-compact td{
    padding:6px 3px!important;
    white-space:normal!important;
    word-break:keep-all!important;
    overflow-wrap:anywhere!important;
  }
  body.nw-classic-external .external-invoice-kpi{justify-content:flex-start!important}
  body.nw-classic-external .external-subsection-title{display:block!important}
  body.nw-classic-external .external-subsection-title small{display:block!important;margin-top:3px!important}
}