/* External company settlement interaction/detail layout — 2026-10-07 */

/* Monthly company settlement: company and project are separate adjacent columns. */
#content .external-company-settlement .external-company-compact{
  width:100%!important;
  min-width:0!important;
  table-layout:fixed!important;
}
#content .external-company-settlement .ext-col-company{width:18%!important}
#content .external-company-settlement .ext-col-project{width:27%!important}
#content .external-company-settlement .ext-col-people{width:10%!important}
#content .external-company-settlement .ext-col-labor{width:13%!important}
#content .external-company-settlement .ext-col-vat{width:10%!important}
#content .external-company-settlement .ext-col-direct{width:13%!important}
#content .external-company-settlement .ext-col-manage{width:9%!important}

#content .external-company-settlement .external-company-name-cell,
#content .external-company-settlement .external-company-project-cell{
  text-align:left!important;
}
#content .external-company-link{
  display:inline-flex!important;
  align-items:center!important;
  max-width:100%!important;
  min-height:30px!important;
  margin:0!important;
  padding:5px 9px!important;
  border:1px solid #cfe0f7!important;
  border-radius:9px!important;
  background:#f4f8ff!important;
  color:#245ea8!important;
  font-size:10px!important;
  line-height:1.25!important;
  font-weight:900!important;
  text-align:left!important;
  white-space:normal!important;
  cursor:pointer!important;
  box-shadow:none!important;
  text-decoration:none!important;
}
#content .external-company-link:hover,
#content .external-company-link:focus{
  background:#eaf3ff!important;
  border-color:#9fc2ee!important;
  color:#174f96!important;
  outline:none!important;
}

/* Company detail screen: our logo immediately followed by "month company settlement". */
#content .external-company-detail-page{
  display:grid!important;
  gap:14px!important;
  width:100%!important;
  max-width:1100px!important;
  margin:0 auto!important;
}
#content .external-company-detail-head{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:14px!important;
  width:100%!important;
  min-height:78px!important;
  padding:12px 18px!important;
  box-sizing:border-box!important;
  border:1px solid #dce5ef!important;
  border-top:4px solid #7058c8!important;
  border-radius:16px!important;
  background:linear-gradient(90deg,#f7f5ff 0%,#fff 55%)!important;
  box-shadow:0 6px 18px rgba(31,49,72,.045)!important;
}
#content .external-company-detail-head img{
  display:block!important;
  width:56px!important;
  height:56px!important;
  min-width:56px!important;
  border-radius:15px!important;
  object-fit:cover!important;
}
#content .external-company-detail-head>div{
  min-width:0!important;
}
#content .external-company-detail-head b{
  display:block!important;
  color:#253a55!important;
  font-size:22px!important;
  line-height:1.2!important;
  font-weight:950!important;
  letter-spacing:-.04em!important;
  white-space:normal!important;
}
#content .external-company-detail-head small{
  display:block!important;
  margin-top:5px!important;
  color:#7a8798!important;
  font-size:10px!important;
}
#content .external-company-detail-page .external-settlement-print{
  margin:0!important;
}
#content .external-company-detail-page .external-settlement-print .payslip{
  max-width:none!important;
  width:100%!important;
}
#content .external-company-detail-page .payroll-section{
  margin-top:14px!important;
}

@media(max-width:760px){
  #content .external-company-settlement .ext-col-company{width:20%!important}
  #content .external-company-settlement .ext-col-project{width:25%!important}
  #content .external-company-settlement .ext-col-people{width:10%!important}
  #content .external-company-settlement .ext-col-labor{width:13%!important}
  #content .external-company-settlement .ext-col-vat{width:10%!important}
  #content .external-company-settlement .ext-col-direct{width:13%!important}
  #content .external-company-settlement .ext-col-manage{width:9%!important}
  #content .external-company-link{
    min-height:26px!important;
    padding:4px 5px!important;
    font-size:7.5px!important;
  }
  #content .external-company-detail-head{
    min-height:66px!important;
    padding:10px 12px!important;
    gap:10px!important;
  }
  #content .external-company-detail-head img{
    width:46px!important;
    height:46px!important;
    min-width:46px!important;
    border-radius:13px!important;
  }
  #content .external-company-detail-head b{
    font-size:16px!important;
  }
  #content .external-company-detail-head small{
    font-size:8px!important;
  }
}

@media print{
  html body #app #content .external-company-link{
    display:inline!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    color:#1e334d!important;
    font-size:inherit!important;
    font-weight:900!important;
    text-decoration:none!important;
    box-shadow:none!important;
  }
  /* On this company-detail document, use the dedicated logo+title header instead
     of the generic app print brand so the logo is followed by "10월 회사 결산내역". */
  html body:has(.external-company-detail-page) #app .global-print-brand{
    display:none!important;
    visibility:hidden!important;
  }
  html body #app #content .external-company-detail-page{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
  }
  html body #app #content .external-company-detail-head{
    display:flex!important;
    visibility:visible!important;
    opacity:1!important;
    position:static!important;
    width:100%!important;
    max-width:100%!important;
    min-height:18mm!important;
    margin:0 0 6mm!important;
    padding:0 0 4mm!important;
    border:0!important;
    border-bottom:1px solid #cfd8e3!important;
    border-radius:0!important;
    background:#fff!important;
    box-shadow:none!important;
    break-inside:avoid!important;
    page-break-inside:avoid!important;
    -webkit-print-color-adjust:exact!important;
    print-color-adjust:exact!important;
  }
  html body #app #content .external-company-detail-head img{
    display:block!important;
    width:15mm!important;
    height:15mm!important;
    min-width:15mm!important;
    max-width:15mm!important;
    border-radius:4mm!important;
  }
  html body #app #content .external-company-detail-head b{
    font-size:18pt!important;
    color:#10233f!important;
    white-space:normal!important;
  }
  html body #app #content .external-company-detail-head small{
    font-size:8pt!important;
    color:#667085!important;
  }
}

/* 2026-10-07 external company settlement print header hard override */
@media print{
  html body:has(#backExternalSettlementPrint) #app .global-print-brand,
  html body:has(#doExternalSettlementPrint) #app .global-print-brand,
  html body:has(.external-company-print-header) #app .global-print-brand{
    display:flex!important;
    visibility:visible!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:5mm!important;
  }
  html body:has(#backExternalSettlementPrint) #app .global-print-brand b,
  html body:has(#doExternalSettlementPrint) #app .global-print-brand b,
  html body:has(.external-company-print-header) #app .global-print-brand b{
    display:block!important;
    visibility:visible!important;
    font-size:18pt!important;
    font-weight:900!important;
    color:#10233f!important;
    white-space:normal!important;
  }
  html body:has(#backExternalSettlementPrint) #app #content .external-print-document-header,
  html body:has(#doExternalSettlementPrint) #app #content .external-print-document-header,
  html body:has(.external-company-print-header) #app #content .external-print-document-header,
  html body:has(#backExternalSettlementPrint) #app #content .external-company-detail-head,
  html body:has(#doExternalSettlementPrint) #app #content .external-company-detail-head{
    display:none!important;
    visibility:hidden!important;
  }
}

/* 2026-10-07 external company title attr print override */
@media print{
  html body #app .global-print-brand[data-external-company-print="1"] b{
    display:none!important;
    visibility:hidden!important;
  }
  html body #app .global-print-brand[data-external-company-print="1"]::after{
    content:attr(data-external-title)!important;
    display:block!important;
    visibility:visible!important;
    color:#10233f!important;
    font-size:18pt!important;
    font-weight:900!important;
    line-height:1.15!important;
    letter-spacing:-.03em!important;
    white-space:normal!important;
  }
}