/* A read-only detail dialog needs natural-height rows, rather than the global
   fullscreen form grid. Header and close action stay outside the scroll area. */
body.af-ux dialog#report-detail-dialog {
  --rd-max-height:calc(100vh - 24px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
  position:fixed!important;
  inset:calc(12px + env(safe-area-inset-top,0px)) 0 calc(12px + env(safe-area-inset-bottom,0px)) 0!important;
  box-sizing:border-box!important;
  width:min(560px,calc(100% - 24px))!important;
  max-width:560px!important;
  height:auto!important;
  min-height:0!important;
  max-height:var(--rd-max-height)!important;
  margin:auto!important;
  padding:0!important;
  border:1px solid #d9e4ef!important;
  border-radius:20px!important;
  background:#fff!important;
  color:#17334e!important;
  overflow:hidden!important;
  box-shadow:0 20px 64px #10283e33!important;
}
@supports(height:100dvh){
  body.af-ux dialog#report-detail-dialog{--rd-max-height:calc(100dvh - 24px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))}
}
body.af-ux dialog#report-detail-dialog:not([open]){display:none!important}
body.af-ux dialog#report-detail-dialog::backdrop{background:#10283e70!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
body.af-ux #report-detail-dialog > form {
  display:flex!important;
  flex-direction:column!important;
  gap:0!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:calc(var(--rd-max-height) - 2px)!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
}
body.af-ux #report-detail-dialog .dialog-head {
  position:relative!important;
  inset:auto!important;
  flex:0 0 auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  min-height:0!important;
  margin:0!important;
  padding:16px 20px!important;
  border-bottom:1px solid #e3ebf2!important;
  background:#fff!important;
  box-shadow:none!important;
}
body.af-ux #report-detail-dialog .dialog-head > div{min-width:0!important}
body.af-ux #report-detail-dialog .dialog-head small{font-size:10px!important;line-height:1.4!important;letter-spacing:.12em!important;color:#0878ef!important}
body.af-ux #report-detail-dialog .dialog-head h2{margin:4px 0 0!important;font-size:21px!important;line-height:1.25!important;letter-spacing:-.02em!important;color:#17334e!important;overflow-wrap:anywhere}
body.af-ux #report-detail-dialog .icon-btn {
  display:grid!important;
  place-items:center!important;
  flex:0 0 44px!important;
  width:44px!important;
  min-width:44px!important;
  height:44px!important;
  min-height:44px!important;
  padding:0!important;
  border:1px solid #dce6ef!important;
  border-radius:12px!important;
  background:#f5f8fb!important;
  color:#526b82!important;
  font-size:26px!important;
  line-height:1!important;
  box-shadow:none!important;
}
body.af-ux #report-detail-dialog :is(.icon-btn,.btn):focus{box-shadow:none!important;outline:none!important}
body.af-ux #report-detail-dialog :is(.icon-btn,.btn):focus-visible{outline:2px solid #0878ef!important;outline-offset:2px!important}
body.af-ux #report-detail-content {
  flex:0 1 auto!important;
  display:block!important;
  align-content:start!important;
  width:100%!important;
  min-width:0!important;
  height:auto!important;
  min-height:0!important;
  margin:0!important;
  padding:16px 20px!important;
  border:0!important;
  border-radius:0!important;
  background:#fff!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
body.af-ux #report-detail-content .rd-period{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:4px 12px;margin:0 0 12px;padding:8px 12px;border-radius:10px;background:#f0f6fc;line-height:1.4}
body.af-ux #report-detail-content .rd-period span{font-size:12px!important;color:#5c7186!important}
body.af-ux #report-detail-content .rd-period strong{font-size:13px!important;color:#1167ba!important;font-weight:750!important;overflow-wrap:anywhere}
body.af-ux #report-detail-content dl{margin:0;min-width:0;font-variant-numeric:tabular-nums}
body.af-ux #report-detail-content .rd-ledger{display:block;border:1px solid #e2eaf1;border-radius:12px;overflow:hidden}
body.af-ux #report-detail-content .rd-row{display:grid;grid-template-columns:minmax(0,1fr) max-content;align-items:center;gap:6px 14px;min-height:42px;padding:10px 12px;border-top:1px solid #e8eef4;line-height:1.35}
body.af-ux #report-detail-content .rd-row:first-child{border-top:0}
body.af-ux #report-detail-content dt{min-width:0;margin:0;color:#5d7185;font-size:13px;line-height:1.4;overflow-wrap:anywhere}
body.af-ux #report-detail-content dd{min-width:0;max-width:100%;margin:0;text-align:right;color:#17334e;font-size:15px;font-weight:750;line-height:1.35;overflow-wrap:anywhere}
body.af-ux #report-detail-content .rd-negative{color:#c52b3f}
body.af-ux #report-detail-content .rd-row.rd-long{grid-template-columns:minmax(0,1fr);gap:3px}
body.af-ux #report-detail-content .rd-result{margin:12px 0;padding:14px;border:1px solid #d4e4f5;border-radius:14px;background:#f2f7fd}
body.af-ux #report-detail-content .rd-result dt{font-weight:650;color:#496984}
body.af-ux #report-detail-content .rd-result dd{margin-top:4px;text-align:left;font-size:27px;font-weight:800;letter-spacing:-.03em}
body.af-ux #report-detail-content .rd-result p{margin:5px 0 0;font-size:12px;line-height:1.4;color:#526d84}
body.af-ux #report-detail-content .rd-profit{background:#edf9f3;border-color:#c5e7d7}
body.af-ux #report-detail-content .rd-profit dd{color:#087d59}
body.af-ux #report-detail-content .rd-loss{background:#fff4f5;border-color:#f1d0d6}
body.af-ux #report-detail-content .rd-loss dd{color:#c52b3f}
body.af-ux #report-detail-content :is(.rd-receipts,.rd-expenses)>p{margin:8px 2px 0;font-size:12px;line-height:1.45;color:#6a7e91}
body.af-ux #report-detail-content .rd-expenses h3{margin:14px 2px 8px;color:#17334e;font-size:14px;font-weight:750}
body.af-ux #report-detail-content .rd-receipts details{margin-top:8px}
body.af-ux #report-detail-content .rd-receipts summary{display:list-item;min-height:44px;padding:12px 2px;color:#1267ba;font-size:13px;font-weight:650;line-height:1.4;cursor:pointer}
body.af-ux #report-detail-content .rd-receipts summary:focus-visible{outline:2px solid #0878ef;outline-offset:2px;border-radius:4px}
body.af-ux #report-detail-dialog .dialog-actions {
  position:relative!important;
  inset:auto!important;
  flex:0 0 auto!important;
  display:flex!important;
  gap:0!important;
  min-height:0!important;
  margin:0!important;
  padding:12px 20px!important;
  border-top:1px solid #e3ebf2!important;
  background:#f8fafc!important;
  box-shadow:none!important;
}
body.af-ux #report-detail-dialog .dialog-actions .btn{width:100%!important;height:46px!important;min-height:46px!important;margin:0!important;padding:0 14px!important;border:1px solid #cbdceb!important;border-radius:12px!important;background:#fff!important;color:#244b6d!important;font-size:15px!important;line-height:1.3!important;font-weight:750!important}
/* If the small renderer cannot load, the existing detail rows remain readable. */
body.af-ux #report-detail-content > .detail-period{min-height:0;padding:8px 12px;margin-bottom:8px;border-radius:10px;font-size:13px}
body.af-ux #report-detail-content > div:not(.detail-period){height:auto!important;min-height:42px!important;padding:10px 12px!important;flex-wrap:wrap!important}
body.af-ux #report-detail-content > div:not(.detail-period) span{font-size:13px!important}
body.af-ux #report-detail-content > div:not(.detail-period) strong{font-size:15px!important;overflow-wrap:anywhere}
@media(max-width:560px){
  body.af-ux #report-detail-dialog .dialog-head{padding:14px 16px!important}
  body.af-ux #report-detail-dialog .dialog-head h2{font-size:20px!important}
  body.af-ux #report-detail-content{padding:14px 16px!important}
  body.af-ux #report-detail-dialog .dialog-actions{padding:10px 16px!important}
}
@media(max-height:480px){
  body.af-ux #report-detail-dialog .dialog-head{padding:8px 14px!important}
  body.af-ux #report-detail-dialog .dialog-head small{display:none}
  body.af-ux #report-detail-dialog .dialog-head h2{font-size:18px!important;margin:0!important}
  body.af-ux #report-detail-dialog .dialog-actions{padding:8px 14px!important}
}