/* AVP V5.52 — System layout hierarchy
   Goal: fewer floating boxes, stronger alignment, predictable page rhythm. */
:root{
  --ui-page:#f4f6f4;
  --ui-surface:#ffffff;
  --ui-line:#dfe6e1;
  --ui-line-soft:#ebefec;
  --ui-ink:#183529;
  --ui-muted:#718078;
  --ui-green:#2f6f40;
  --ui-green-soft:#f0f6ee;
  --ui-radius:10px;
  --ui-gap:14px;
}

/* ----- Global page rhythm ----- */
body.app-shell{background:var(--ui-page)}
body.app-shell .content{max-width:1480px!important;padding:26px 30px 46px!important}
body.app-shell .page-heading{margin-bottom:18px!important;min-height:46px;align-items:center!important}
body.app-shell .page-heading h1{font-size:27px!important;line-height:1.16!important;letter-spacing:-.8px!important}
body.app-shell .page-heading p:not(.overline){margin-top:5px!important;line-height:1.45!important}
body.app-shell .heading-actions{gap:7px!important}

/* Flatter working sections. One border, almost no floating shadow. */
body.app-shell .panel{
  border:1px solid var(--ui-line)!important;
  border-radius:var(--ui-radius)!important;
  box-shadow:none!important;
  padding:19px 20px!important;
  margin-bottom:var(--ui-gap)!important;
  background:var(--ui-surface)!important;
}
body.app-shell .panel-heading{
  margin-bottom:15px!important;padding:0 0 11px!important;
  border-bottom:1px solid var(--ui-line-soft)!important;
}
body.app-shell .panel-heading h2{font-size:14.5px!important;letter-spacing:-.15px!important;color:var(--ui-ink)!important}
body.app-shell .panel-heading p{margin-top:4px!important;font-size:10.5px!important;line-height:1.45!important;color:var(--ui-muted)!important}

/* Buttons sit on the same visual baseline; no jumping/shadow effects. */
body.app-shell .btn{min-height:38px!important;border-radius:8px!important;padding:9px 14px!important;box-shadow:none!important;transform:none!important}
body.app-shell .btn:hover{transform:none!important}
body.app-shell .btn-primary{background:#2e6d3f!important}
body.app-shell .mini-btn{border-radius:7px!important}

/* Consistent compact fields. */
body.app-shell .form-stack{gap:11px!important}
body.app-shell .field>input,
body.app-shell .field>select,
body.app-shell .form-stack>input:not([type=hidden]),
body.app-shell .form-stack>select{min-height:40px!important;border-radius:8px!important;background:#fff!important}
body.app-shell .field>textarea,
body.app-shell .form-stack>textarea{border-radius:8px!important;background:#fff!important}
body.app-shell .field>span,body.app-shell label.field>span{font-size:9px!important;letter-spacing:.055em!important}
body.app-shell .fields-grid{gap:10px!important}
body.app-shell .helper-note{border:1px solid #e7ece8!important;background:#f8faf8!important;border-radius:8px!important;padding:9px 10px!important}

/* Metrics are a single aligned strip, not floating cards. */
body.app-shell .metric-grid,
body.app-shell .v15-money-summary{gap:10px!important;margin-bottom:14px!important}
body.app-shell .metric{
  min-height:88px!important;padding:14px 15px!important;border:1px solid var(--ui-line)!important;
  border-radius:9px!important;box-shadow:none!important;background:#fff!important;
}
body.app-shell .metric-top{font-size:10px!important}
body.app-shell .metric-top i{width:28px!important;height:28px!important;border-radius:7px!important}
body.app-shell .metric strong{font-size:20px!important;letter-spacing:-.5px!important;margin:5px 0 3px!important}
body.app-shell .metric small{font-size:9.5px!important;line-height:1.35!important}

/* Tables and registers visually belong to their section. */
body.app-shell .table-scroll,
body.app-shell .ledger-list{border-radius:8px!important;border-color:var(--ui-line-soft)!important;box-shadow:none!important}
body.app-shell .data-table th{padding:10px 12px!important}
body.app-shell .data-table td{padding:11px 12px!important}
body.app-shell .ledger-entry{padding:11px 12px!important}
body.app-shell .ledger-entry strong{font-size:12px!important}
body.app-shell .ledger-entry small{font-size:9.5px!important;line-height:1.4!important}

/* Standard grids: no exaggerated gutters and no stretched child panels. */
body.app-shell .order-columns,
body.app-shell .dashboard-columns,
body.app-shell .avp-workflow-grid,
body.app-shell .management-grid,
body.app-shell .settings-grid{gap:var(--ui-gap)!important;align-items:start!important}
body.app-shell .order-columns>.panel,
body.app-shell .avp-workflow-grid>.panel{margin-bottom:0!important}

/* ----- Order workspace ----- */
.order-workspace{gap:13px!important}
.order-workspace .order-identity-card{border-radius:10px!important;box-shadow:none!important}
.order-workspace .order-section-nav{border-radius:9px!important;box-shadow:none!important;margin-bottom:0!important}
.order-workspace .order-tab-intro{margin:0!important;padding:3px 2px 1px!important}
.order-workspace .order-tab-intro h2{font-size:19px!important}
.order-workspace .panel{margin-bottom:0!important}
.order-workspace .payment-summary{gap:10px!important}
.order-workspace .payment-summary .metric{min-height:86px!important;padding:13px 14px!important}

/* Payment page: one main working area + one compact settlement rail. */
.order-workspace .finance-workspace{
  display:grid;grid-template-columns:minmax(0,1.45fr) minmax(340px,.75fr);
  gap:14px;align-items:start;width:100%;
}
.order-workspace .finance-primary-column,
.order-workspace .finance-secondary-column{min-width:0}
.order-workspace .finance-payment-panel,
.order-workspace .finance-settlement-panel{margin:0!important}
.order-workspace .finance-settlement-panel{position:sticky;top:14px}

/* Customer payment entry: related fields line up horizontally. */
.order-workspace .finance-entry-form{
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px!important;align-items:end;
}
.order-workspace .finance-entry-form>.field:first-of-type{grid-column:1/-1}
.order-workspace .finance-entry-form>.fields-grid{grid-column:1/-1;margin:0!important}
.order-workspace .finance-entry-form>.field:has(textarea){grid-column:1/-1}
.order-workspace .finance-entry-form>details,
.order-workspace .finance-entry-form>.btn{grid-column:1/-1}
.order-workspace .finance-entry-form>.btn{justify-self:end;min-width:190px}
.order-workspace .finance-payment-panel>.ledger-list{margin-top:14px!important}
.order-workspace .finance-payment-panel>p:last-child{margin:12px 0 0!important}

/* Settlement rail is deliberately compact. */
.order-workspace .finance-settlement-panel .form-stack{gap:9px!important}
.order-workspace .finance-settlement-panel .fields-grid{grid-template-columns:1fr 1fr!important}
.order-workspace .finance-settlement-panel textarea{min-height:72px!important}
.order-workspace .finance-settlement-panel .btn{width:100%}
.order-workspace .finance-settlement-panel .ledger-list{margin-top:12px!important}

/* The lower finance section reads as one continuation, not more floating boxes. */
.order-workspace .finance-position-section{
  margin:0;padding:15px 0 1px;border-top:1px solid #dbe4dd;
}
.order-workspace .finance-section-heading{
  display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:0 2px 10px;
}
.order-workspace .finance-section-heading span{display:block;font-size:8.5px;font-weight:900;letter-spacing:.11em;color:#6e946c}
.order-workspace .finance-section-heading h3{margin:3px 0 0;font-size:15px;color:var(--ui-ink)}
.order-workspace .finance-section-heading p{margin:0;max-width:560px;text-align:right;color:var(--ui-muted);font-size:10.5px}
.order-workspace .finance-position-section .v15-money-summary{margin:0!important}
.order-workspace .finance-history-panel,
.order-workspace .finance-action-panel{margin-top:0!important}

/* Avoid nested-card appearance in many pages. */
body.app-shell .panel .metric{background:#fafcfa!important}
body.app-shell .panel .ledger-list{background:#fff!important}
body.app-shell .panel .notice{box-shadow:none!important;border-radius:8px!important}
body.app-shell details.row-edit,
body.app-shell details.danger-disclosure,
body.app-shell details.nested-adjustment{border-radius:8px!important}

/* Management/search bars become one horizontal toolbar. */
body.app-shell .filter-bar.smart-filter{padding:11px!important;border-radius:9px!important;box-shadow:none!important;gap:9px!important}
body.app-shell .filter-bar.smart-filter .search-field{min-height:40px!important;border-radius:8px!important;box-shadow:none!important}
body.app-shell .avp-search-select-input{height:40px!important;border-radius:8px!important}
body.app-shell .avp-search-select-toggle{height:36px!important}

/* Wide screens should use the available canvas; avoid giant empty outer gutters. */
@media(min-width:1700px){body.app-shell .content{max-width:1580px!important}}

@media(max-width:1180px){
  .order-workspace .finance-workspace{grid-template-columns:1fr!important}
  .order-workspace .finance-settlement-panel{position:static}
}
@media(max-width:760px){
  body.app-shell .content{padding:18px 13px 36px!important}
  body.app-shell .panel{padding:15px!important}
  .order-workspace .finance-entry-form{grid-template-columns:1fr!important}
  .order-workspace .finance-entry-form>*{grid-column:auto!important}
  .order-workspace .finance-entry-form>.fields-grid{grid-template-columns:1fr!important}
  .order-workspace .finance-entry-form>.btn{width:100%;justify-self:stretch}
  .order-workspace .finance-section-heading{align-items:flex-start;flex-direction:column;gap:4px}
  .order-workspace .finance-section-heading p{text-align:left}
}

/* Common custom surfaces follow the same geometry as panels. */
body.app-shell :is(
  .order-clean-card,.order-kpi,.account-payment-card,.health-card,.statement-card,
  .credit-number-grid article,.fx-rate-tile,.customer-ledger-picker,.customer-ledger-hero,
  .credit-customer-picker,.credit-account-hero,.return-hero,.invoice-link
){box-shadow:none!important;border-radius:10px!important}

/* Long identifiers belong on a full row rather than leaving an accidental half-row gap. */
.order-workspace .finance-entry-form>.field:nth-of-type(4){grid-column:1/-1}

/* V5.53 layout continuation: remove awkward split invoice pages and over-tall empty cards. */
.order-workspace .order-documents-layout{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:14px!important;
}
.order-workspace .order-documents-secondary{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px!important;
  align-items:start!important;
}
.order-workspace .order-document-panel{margin:0!important}
.order-workspace .order-document-panel-primary .panel-heading p{max-width:780px}
.order-workspace .order-document-panel-secondary .panel-heading p{max-width:none}
.order-workspace .order-document-panel-secondary .panel-heading{margin-bottom:12px!important;padding-bottom:10px!important}
.order-workspace .order-document-panel-secondary .panel-heading h2{font-size:13.5px!important}
.order-workspace .order-empty-state{
  min-height:96px!important;
  padding:18px 16px!important;
  align-content:center!important;
}
.order-workspace .order-empty-state.compact{min-height:96px!important;padding:18px 16px!important}
.order-workspace .order-invoice-list .invoice-link{
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center!important;
  gap:12px!important;
}
.order-workspace .order-invoice-list .invoice-link > span{min-width:0!important}
.order-workspace .download-line{
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center!important;
  gap:10px!important;
  padding:12px 0!important;
}
.order-workspace .order-upload-disclosure{
  margin-top:12px!important;
  padding-top:12px!important;
}
@media(max-width:980px){
  .order-workspace .order-documents-secondary{grid-template-columns:1fr!important}
}

/* =====================================================================
   V5.53 — LINEAR WORKSPACE SYSTEM
   Working pages are sections, not a collection of floating cards.
   ===================================================================== */
:root{
  --v553-rule:#dbe4dd;
  --v553-rule-soft:#e9eeea;
  --v553-canvas:#ffffff;
  --v553-page:#f3f6f3;
}

/* Use one predictable reading direction on business/workflow pages. */
body.app-shell :is(
  .dashboard-columns,.order-columns,.advanced-columns,.avp-workflow-grid,
  .management-grid,.settings-grid,.profile-grid,.account-directory-grid,
  .customer-cash-top,.credit-control-grid,.commission-order-workspace,
  .currency-manager-layout,.global-search-results
){
  grid-template-columns:1fr!important;
  gap:0!important;
  align-items:start!important;
}

/* Remove old sticky side rails once the page becomes linear. */
body.app-shell :is(
  .order-overview-side .panel,.finance-settlement-panel,
  .commission-order-workspace .panel,.profile-security-stack .panel
){position:static!important}

/* Working sections share one horizontal alignment and use dividers, not boxes. */
body.app-shell :is(
  .content>.panel,
  .order-workspace>.panel,
  .order-workspace .order-documents-layout>.panel,
  .order-workspace .order-documents-secondary>.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
){
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:20px 2px!important;
  border:0!important;
  border-top:1px solid var(--v553-rule)!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  min-height:0!important;
  height:auto!important;
}

body.app-shell :is(
  .content>.panel:first-of-type,
  .order-workspace>.panel:first-of-type,
  .directory-stack>.panel:first-child,
  .commission-directory-stack>.panel:first-child,
  .avp-workflow-grid>.panel:first-child,
  .management-grid>.panel:first-child,
  .settings-grid>.panel:first-child,
  .advanced-columns>.panel:first-child,
  .account-directory-grid>.panel:first-child,
  .commission-order-workspace>.panel:first-child,
  .currency-manager-layout>.panel:first-child,
  .global-search-results>.panel:first-child
){border-top:0!important;padding-top:4px!important}

/* Section headings sit on the canvas instead of inside a card header. */
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:0 0 13px!important;
  padding:0 0 10px!important;
  border-bottom:1px solid var(--v553-rule-soft)!important;
}

/* Do not reserve vertical space for empty content. */
body.app-shell .empty-state,
body.app-shell .order-empty-state{
  min-height:0!important;
  padding:17px 14px!important;
  border-radius:8px!important;
  background:#f8faf8!important;
}
body.app-shell .order-empty-state.compact{min-height:0!important;padding:16px 14px!important}

/* Registers/tables are the bounded object; the containing section is not another box. */
body.app-shell :is(.table-scroll,.ledger-list,.status-history){
  border-radius:8px!important;
  box-shadow:none!important;
}

/* Metrics remain aligned but visually lighter than primary work areas. */
body.app-shell .metric-grid{gap:8px!important;margin:0 0 18px!important}
body.app-shell .metric{
  min-height:78px!important;
  padding:12px 14px!important;
  border-radius:8px!important;
  background:#fafcfa!important;
  box-shadow:none!important;
}

/* Forms should read as one form, not fields trapped inside another large card. */
body.app-shell .form-section{grid-template-columns:190px minmax(0,1fr)!important;gap:18px!important;padding:14px 0!important}
body.app-shell .form-action-bar{border-radius:8px!important;box-shadow:none!important}
body.app-shell .filter-bar.smart-filter{
  margin-bottom:16px!important;
  border-radius:8px!important;
  box-shadow:none!important;
}

/* Order workspace tabs/sections line up to the same left/right edge. */
.order-workspace .order-tab-intro{padding:8px 2px 12px!important;border-bottom:1px solid var(--v553-rule)!important}
.order-workspace .order-tab-intro p{max-width:900px!important}
.order-workspace .order-documents-layout{grid-template-columns:1fr!important;gap:0!important}
.order-workspace .order-documents-layout>main{display:block!important}
.order-workspace .order-documents-secondary{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:22px!important;
  border-top:1px solid var(--v553-rule)!important;
  padding-top:2px!important;
}
.order-workspace .order-documents-secondary>.panel{border-top:0!important;padding-top:18px!important}
.order-workspace .order-document-panel-primary{padding-bottom:22px!important}
.order-workspace .order-invoice-actions{justify-content:flex-end!important}

/* Generic two-up action/card collections become aligned strips where possible. */
body.app-shell .action-card-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:8px!important}
body.app-shell .action-card{border-radius:8px!important;box-shadow:none!important}
body.app-shell .customer-card-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important}
body.app-shell .customer-account-card{border-radius:8px!important;box-shadow:none!important}

/* Prevent legacy rules from forcing equal-height cards. */
body.app-shell :is(
  .management-grid>.panel,.settings-grid>.panel,.account-directory-grid>.panel,
  .commission-order-workspace>.panel,.avp-workflow-grid>.panel
){height:auto!important}

/* Wide forms can still use columns internally; the page itself stays linear. */
body.app-shell .page-settings .settings-grid,
body.app-shell.page-settings .settings-grid{grid-template-columns:1fr!important}

@media(max-width:1100px){
  .order-workspace .order-documents-secondary{grid-template-columns:1fr!important;gap:0!important}
  .order-workspace .order-documents-secondary>.panel+.panel{border-top:1px solid var(--v553-rule)!important}
  body.app-shell .action-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.app-shell .customer-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:760px){
  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:16px 0!important}
  body.app-shell .form-section{grid-template-columns:1fr!important;gap:9px!important}
  body.app-shell .action-card-grid,
  body.app-shell .customer-card-grid{grid-template-columns:1fr!important}
}