/* AVP V5.58 — Wide canvas + readability refinement
   Uses the full desktop workspace, stronger type, cleaner spacing and better information density. */
:root{
  --v558-ink:#17372a;
  --v558-text:#294437;
  --v558-muted:#5f7167;
  --v558-soft:#f6f8f6;
  --v558-line:#d8e1da;
  --v558-line-soft:#e7ede8;
  --v558-green:#2d6a3d;
}

/* ---------- Canvas ---------- */
body.app-shell{font-size:14px!important;line-height:1.5!important;color:var(--v558-text)!important;font-weight:500!important}
body.app-shell .content{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:24px clamp(20px,1.8vw,34px) 54px!important;
}
body.app-shell:is(.page-settings,.page-profile,.page-payment_terms,.page-sharing,.page-system_health,
.page-orders,.page-invoices,.page-product_management,.page-customer_cash,.page-commission_center,.page-import_center) .content{
  max-width:none!important;
}
@media(min-width:2300px){body.app-shell .content{max-width:2080px!important;margin:0 auto!important}}

/* ---------- Typography ---------- */
body.app-shell .page-heading{margin-bottom:20px!important;gap:22px!important}
body.app-shell .page-heading h1{font-size:31px!important;line-height:1.15!important;letter-spacing:-.8px!important;font-weight:800!important;color:var(--v558-ink)!important}
body.app-shell .page-heading p:not(.overline){font-size:13.5px!important;line-height:1.5!important;color:var(--v558-muted)!important;font-weight:500!important;max-width:980px!important}
body.app-shell .overline{font-size:10.5px!important;font-weight:800!important;letter-spacing:.12em!important}
body.app-shell .panel-heading h2{font-size:17px!important;line-height:1.25!important;font-weight:800!important;color:var(--v558-ink)!important}
body.app-shell .panel-heading p{font-size:12.5px!important;line-height:1.5!important;color:var(--v558-muted)!important;font-weight:500!important;max-width:980px!important}
body.app-shell :is(.helper-note,.td-sub,.ledger-entry small,.metric small,.download-line small,.invoice-link small){font-size:11.5px!important;line-height:1.45!important;color:#687a70!important}
body.app-shell :is(.field>span,label.field>span,.form-label){font-size:11.5px!important;line-height:1.3!important;font-weight:750!important;color:#455f51!important;letter-spacing:.01em!important}
body.app-shell :is(input,select,textarea){font-size:13.5px!important;font-weight:500!important;color:#1f3b2d!important}
body.app-shell :is(input,select){min-height:43px!important}
body.app-shell textarea{line-height:1.5!important}
body.app-shell .btn{font-size:12.5px!important;font-weight:750!important;min-height:40px!important;padding:9px 15px!important}
body.app-shell .btn-small,body.app-shell .mini-btn{font-size:11.5px!important;font-weight:750!important}
body.app-shell .notice{font-size:12.5px!important;line-height:1.5!important}

/* Sidebar/topbar stay compact but readable. */
body.app-shell .nav-link{font-size:13px!important;font-weight:650!important}
body.app-shell .side-heading{font-size:9.5px!important}
body.app-shell .side-person strong{font-size:12.5px!important}
body.app-shell .side-person small{font-size:10.5px!important}
body.app-shell .topbar-context{font-size:11.5px!important}
body.app-shell .topbar-tools select{font-size:12px!important}

/* ---------- Section rhythm ---------- */
body.app-shell :is(
  .content>.panel,.order-workspace>.panel,.directory-stack>.panel,.commission-directory-stack>.panel,
  .avp-workflow-grid>.panel,.management-grid>.panel,.settings-grid>.panel,.advanced-columns>.panel,
  .account-directory-grid>.panel,.commission-order-workspace>.panel,.currency-manager-layout>.panel,
  .global-search-results>.panel
){padding:22px 0!important;border-top-color:var(--v558-line)!important}
body.app-shell :is(.content>.panel,.order-workspace .panel,.directory-stack>.panel,.commission-directory-stack>.panel,
.avp-workflow-grid>.panel,.management-grid>.panel,.settings-grid>.panel,.advanced-columns>.panel,.commission-order-workspace>.panel)>.panel-heading{
  margin-bottom:15px!important;padding-bottom:11px!important;border-bottom-color:var(--v558-line-soft)!important
}
body.app-shell .panel{color:var(--v558-text)!important}
body.app-shell .form-stack{gap:13px!important}
body.app-shell .fields-grid{gap:12px!important}
body.app-shell .form-section{grid-template-columns:220px minmax(0,1fr)!important;gap:24px!important;padding:18px 0!important}
body.app-shell .form-section-heading strong{font-size:14px!important;line-height:1.35!important}
body.app-shell .form-section-heading small{font-size:11.5px!important;line-height:1.45!important;color:var(--v558-muted)!important}
body.app-shell .form-section-grid{gap:12px!important}

/* Use the width inside forms instead of narrowing the whole page. */
body.app-shell:is(.page-settings,.page-profile,.page-payment_terms,.page-sharing) .form-stack{max-width:none!important}
body.app-shell:is(.page-settings,.page-profile,.page-payment_terms,.page-sharing) .form-section-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))!important}
body.app-shell:is(.page-settings,.page-profile,.page-payment_terms,.page-sharing) .form-section-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))!important}
body.app-shell:is(.page-settings,.page-profile,.page-payment_terms,.page-sharing) .form-section-grid.four{grid-template-columns:repeat(4,minmax(0,1fr))!important}

/* ---------- Metrics ---------- */
body.app-shell .metric-grid,
body.app-shell .v15-money-summary{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))!important;gap:10px!important}
body.app-shell .metric{min-height:88px!important;padding:14px 16px!important;border-color:var(--v558-line)!important}
body.app-shell .metric-top{font-size:11.5px!important;font-weight:700!important;color:#607168!important}
body.app-shell .metric strong{font-size:21px!important;line-height:1.2!important;margin:6px 0 4px!important}
body.app-shell .metric small{font-size:11.25px!important}

/* ---------- Filters/search ---------- */
body.app-shell .filter-bar.smart-filter{gap:10px!important;padding:12px!important;margin-bottom:17px!important}
body.app-shell .filter-bar.smart-filter>.field{flex:1 1 180px!important;min-width:170px!important}
body.app-shell .filter-bar.smart-filter>.field:first-of-type{flex:2.2 1 360px!important;min-width:300px!important}
body.app-shell .filter-bar.smart-filter :is(input,select){min-height:43px!important}
body.app-shell .search-field{min-height:43px!important}
body.app-shell .search-field input{font-size:13.5px!important}

/* ---------- Tables/registers ---------- */
body.app-shell .table-scroll{
  max-height:none!important;
  overflow-y:visible!important;
  border-color:var(--v558-line)!important;
  border-radius:9px!important;
}
body.app-shell .data-table{font-size:13px!important;line-height:1.45!important}
body.app-shell .data-table th{font-size:11px!important;font-weight:800!important;color:#566b60!important;padding:12px 13px!important;letter-spacing:.035em!important}
body.app-shell .data-table td{font-size:13px!important;padding:13px!important;color:#2d4739!important}
body.app-shell .data-table td strong{font-size:13.25px!important;font-weight:750!important;color:#213f31!important}
body.app-shell .td-sub{font-size:11.25px!important;margin-top:4px!important}
body.app-shell .ledger-entry{padding:13px 14px!important}
body.app-shell .ledger-entry strong{font-size:13px!important}
body.app-shell .ledger-entry small{font-size:11.25px!important}
body.app-shell .status{font-size:11px!important;font-weight:750!important;padding:5px 9px!important}

/* ---------- Empty states ---------- */
body.app-shell :is(.empty-state,.order-empty-state){font-size:12px!important}
body.app-shell .empty-state>h3{font-size:13px!important}
body.app-shell .empty-state>p{font-size:11.5px!important}
body.app-shell .order-empty-state>strong{font-size:12.5px!important}
body.app-shell .order-empty-state>span{font-size:11.5px!important}

/* ---------- Order workspace ---------- */
.order-workspace{gap:15px!important}
.order-workspace .order-tab-intro h2{font-size:21px!important;font-weight:800!important}
.order-workspace .order-tab-intro p{font-size:12.5px!important;line-height:1.5!important;max-width:1000px!important}
.order-workspace .order-section-link{font-size:12px!important;font-weight:750!important}
.order-workspace .order-documents-secondary{gap:26px!important}
.order-workspace .order-invoice-list .invoice-link{padding:13px 14px!important}
.order-workspace .order-invoice-list .invoice-link b{font-size:13px!important}

/* ---------- Product/catalogue density ---------- */
body.app-shell .products-grid{grid-template-columns:repeat(auto-fill,minmax(245px,1fr))!important;gap:14px!important}
body.app-shell .product-card h3{font-size:13.5px!important;line-height:1.4!important}
body.app-shell .product-card-category{font-size:10.5px!important}

/* ---------- Invoice screen: wider, still document-first ---------- */
body.app-shell .invoice-layout.invoice-layout-linear{max-width:1420px!important;width:100%!important;margin-left:auto!important;margin-right:auto!important}
body.app-shell .invoice-layout.invoice-layout-linear>.invoice-paper{max-width:1220px!important;width:100%!important}
body.app-shell .invoice-layout.invoice-layout-linear>.invoice-editor-linear{max-width:1220px!important;width:100%!important;margin-top:20px!important}
body.app-shell .invoice-paper-simple{padding:38px 44px!important}
body.app-shell .invoice-simple-title small{font-size:10.5px!important}
body.app-shell .invoice-simple-title h1{font-size:27px!important}
body.app-shell .invoice-simple-title strong{font-size:13.5px!important}
body.app-shell .invoice-simple-info small,
body.app-shell .invoice-simple-payment small{font-size:10px!important}
body.app-shell .invoice-simple-info p{font-size:12.75px!important}
body.app-shell .invoice-simple-meta p{font-size:12.25px!important;padding:7px 0!important}
body.app-shell .invoice-table-simple{font-size:12px!important}
body.app-shell .invoice-table-simple th{font-size:10.5px!important;padding:11px 10px!important}
body.app-shell .invoice-table-simple td{font-size:12px!important;padding:13px 10px!important}
body.app-shell .invoice-table-simple small{font-size:10.5px!important}
body.app-shell .invoice-simple-line{font-size:12.5px!important;max-width:500px!important}
body.app-shell .invoice-simple-total{max-width:500px!important}
body.app-shell .invoice-simple-total strong{font-size:24px!important}
body.app-shell .invoice-simple-payment p{font-size:12px!important}
body.app-shell .invoice-management-head>h2{font-size:19px!important}
body.app-shell .invoice-management-head>p{font-size:11.75px!important}
body.app-shell .invoice-editor-linear>.invoice-admin-section>.panel-heading h2,
body.app-shell .invoice-editor-linear>.panel>.panel-heading h2{font-size:14.5px!important}
body.app-shell .invoice-editor-linear>.invoice-admin-section>.panel-heading p,
body.app-shell .invoice-editor-linear>.panel>.panel-heading p{font-size:11.75px!important}
body.app-shell .invoice-editor-linear>.invoice-sharing>strong{font-size:13px!important}
body.app-shell .invoice-editor-linear>.invoice-sharing>p{font-size:11.5px!important}

/* ---------- Large-screen balance ---------- */
@media(min-width:1500px){
  body.app-shell .form-section-grid.four{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  body.app-shell .action-card-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  body.app-shell .customer-card-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
}
@media(max-width:1180px){
  body.app-shell .content{padding:22px 20px 48px!important}
  body.app-shell .form-section{grid-template-columns:180px minmax(0,1fr)!important;gap:18px!important}
  body.app-shell:is(.page-settings,.page-profile,.page-payment_terms,.page-sharing) .form-section-grid.four{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:760px){
  body.app-shell{font-size:13.5px!important}
  body.app-shell .content{padding:18px 13px 38px!important}
  body.app-shell .page-heading h1{font-size:26px!important}
  body.app-shell .page-heading p:not(.overline){font-size:12.5px!important}
  body.app-shell .form-section{grid-template-columns:1fr!important;gap:9px!important}
  body.app-shell :is(.fields-grid,.form-section-grid.two,.form-section-grid.three,.form-section-grid.four){grid-template-columns:1fr!important}
  body.app-shell .filter-bar.smart-filter>.field,
  body.app-shell .filter-bar.smart-filter>.field:first-of-type{min-width:0!important;flex:1 1 100%!important}
  body.app-shell .invoice-paper-simple{padding:22px!important}
  body.app-shell .invoice-layout.invoice-layout-linear>.invoice-paper,
  body.app-shell .invoice-layout.invoice-layout-linear>.invoice-editor-linear{max-width:none!important}
}

/* Keep print dimensions independent from screen widening. */
@media print{
  body.app-shell .invoice-paper-simple{padding:8mm!important}
  body.app-shell .invoice-layout.invoice-layout-linear>.invoice-paper{max-width:none!important;width:100%!important}
}