/* Osrilo Build 127 FINAL — Workflow Cohesion Hotfix 22.1
   Estimates + Invoices UI Congruency
   Visual-only follow-up to deployed Hotfix 22. No workflow or document behavior changes. */

body:not(.landing-visible) #estimatesPage,
body:not(.landing-visible) #invoicesPage{
  --document-card-border:#c8d3dc;
  --document-card-radius:14px;
  --document-card-bg:#fbfcfd;
  --document-card-shadow:0 7px 20px rgba(15,23,42,.055);
  --document-divider:#dbe3e9;
  --document-strip:#edf2f5;
  --document-control-height:42px;
}

/* Document pages use the same compact toolbar rhythm as Work operations. */
body:not(.landing-visible) #estimatesPage .estimate-tools,
body:not(.landing-visible) #invoicesPage .invoice-tools{
  gap:10px;
  margin-top:10px;
  padding:10px;
  border:1px solid #d5dfe6;
  border-radius:12px;
  background:var(--document-strip);
  box-shadow:none;
}
body:not(.landing-visible) #estimatesPage .estimate-tools .search-box,
body:not(.landing-visible) #invoicesPage .invoice-tools .search-box,
body:not(.landing-visible) #estimatesPage .estimate-filter-bar select,
body:not(.landing-visible) #invoicesPage .invoice-filter-bar select,
body:not(.landing-visible) #estimatesPage .page-filter-more>summary,
body:not(.landing-visible) #invoicesPage .page-filter-more>summary{
  min-height:var(--document-control-height);
}
body:not(.landing-visible) #estimatesPage .estimate-list,
body:not(.landing-visible) #invoicesPage .invoice-list{
  gap:10px;
  margin-top:12px;
}

/* Estimate and Invoice cards now share one physical card system. */
body:not(.landing-visible) #estimatesPage .estimate-card,
body:not(.landing-visible) #invoicesPage .invoice-card{
  margin:0;
  padding:0;
  overflow:hidden;
  border:1px solid var(--document-card-border);
  border-radius:var(--document-card-radius);
  background:var(--document-card-bg);
  box-shadow:var(--document-card-shadow);
}
body:not(.landing-visible) #estimatesPage .estimate-card:hover,
body:not(.landing-visible) #invoicesPage .invoice-card:hover{border-color:#aab8c4}

body:not(.landing-visible) #estimatesPage .estimate-card-main,
body:not(.landing-visible) #invoicesPage .invoice-card-main{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  min-height:0;
  padding:14px 16px 12px;
  background:transparent;
}
body:not(.landing-visible) #estimatesPage .estimate-card-main>div:first-child,
body:not(.landing-visible) #invoicesPage .invoice-card-copy{
  display:grid;
  align-content:start;
  gap:4px;
  min-width:0;
  flex:1 1 auto;
}

/* Number + state row mirrors Work card status density. */
body:not(.landing-visible) #estimatesPage .estimate-card-heading,
body:not(.landing-visible) #invoicesPage .invoice-card-heading{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  min-height:24px;
}
body:not(.landing-visible) #estimatesPage .estimate-card-heading>strong,
body:not(.landing-visible) #invoicesPage .invoice-card-heading>strong{
  margin-right:2px;
  color:#172033;
  font-size:15px;
  line-height:1.2;
  letter-spacing:-.01em;
}
body:not(.landing-visible) #estimatesPage .estimate-status,
body:not(.landing-visible) #invoicesPage .invoice-status,
body:not(.landing-visible) #invoicesPage .invoice-source-badge,
body:not(.landing-visible) #estimatesPage .notification-decision-tag,
body:not(.landing-visible) #invoicesPage .notification-decision-tag,
body:not(.landing-visible) #estimatesPage .new-response-pill{
  display:inline-flex;
  align-items:center;
  min-height:22px;
  padding:3px 7px;
  border-radius:999px;
  font-size:9px;
  font-weight:900;
  line-height:1.1;
  white-space:nowrap;
}

/* Customer names remain clickable, but stop looking like a separate large teal CTA. */
body:not(.landing-visible) #estimatesPage .estimate-customer,
body:not(.landing-visible) #invoicesPage .invoice-customer{
  width:max-content;
  max-width:100%;
  min-height:0!important;
  margin:2px 0 0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#0f766e!important;
  font-size:14px;
  font-weight:850;
  line-height:1.3;
  text-align:left;
}
body:not(.landing-visible) #estimatesPage .estimate-customer:hover,
body:not(.landing-visible) #invoicesPage .invoice-customer:hover{text-decoration:underline;text-underline-offset:2px}

/* Supporting document information is compact and predictable. */
body:not(.landing-visible) #estimatesPage .estimate-project,
body:not(.landing-visible) #estimatesPage .estimate-meta,
body:not(.landing-visible) #invoicesPage .invoice-meta{
  margin:0;
  color:#5f6f7f;
  font-size:12px;
  line-height:1.4;
}
body:not(.landing-visible) #estimatesPage .property-document-line,
body:not(.landing-visible) #invoicesPage .property-document-line{color:#526273}
body:not(.landing-visible) #invoicesPage .invoice-meta-stack{display:grid;gap:3px;margin:0}
body:not(.landing-visible) #estimatesPage .document-intentional-skip-reason,
body:not(.landing-visible) #invoicesPage .document-intentional-skip-reason{
  margin:2px 0 0;
  padding:5px 8px;
  border:1px solid #d7e0e7;
  border-radius:8px;
  background:#f4f7f9;
  color:#526273;
  font-size:11px;
  line-height:1.35;
}
body:not(.landing-visible) #estimatesPage .response-history{margin:1px 0 0}
body:not(.landing-visible) #estimatesPage .response-history>summary{
  width:max-content;
  max-width:100%;
  color:#475569;
  font-size:11px;
  font-weight:800;
  line-height:1.3;
}

/* Both document types use the same financial summary box. */
body:not(.landing-visible) #estimatesPage .estimate-card-total,
body:not(.landing-visible) #invoicesPage .invoice-card-financial{
  flex:0 0 150px;
  align-self:flex-start;
  min-width:150px;
  min-height:80px;
  margin:0;
  padding:10px 12px;
  border:1px solid #d7e0e7;
  border-radius:11px;
  background:#fff;
  text-align:right;
  box-shadow:none;
}
body:not(.landing-visible) #estimatesPage .estimate-card-total::before,
body:not(.landing-visible) #invoicesPage .invoice-financial-label{
  display:block;
  margin:0 0 3px;
  color:#64748b;
  font-size:9px;
  font-weight:900;
  letter-spacing:.055em;
  line-height:1.2;
  text-transform:uppercase;
}
body:not(.landing-visible) #estimatesPage .estimate-card-total::before{content:"Estimate total"}
body:not(.landing-visible) #estimatesPage .estimate-card-total strong,
body:not(.landing-visible) #invoicesPage .invoice-card-financial strong{
  display:block;
  color:#172033;
  font-size:20px;
  line-height:1.15;
}
body:not(.landing-visible) #estimatesPage .estimate-card-total span,
body:not(.landing-visible) #invoicesPage .invoice-balance-label,
body:not(.landing-visible) #invoicesPage .invoice-card-financial small{
  display:block;
  margin-top:3px;
  font-size:10px;
  line-height:1.25;
}
body:not(.landing-visible) #estimatesPage .estimate-card-total span,
body:not(.landing-visible) #invoicesPage .invoice-balance-label{color:#64748b;font-weight:750}
body:not(.landing-visible) #invoicesPage .invoice-card-financial small{color:#0f766e;font-weight:850}

/* Actions attach directly to the card, like Work, instead of floating below excess whitespace. */
body:not(.landing-visible) #estimatesPage .estimate-card-actions,
body:not(.landing-visible) #invoicesPage .invoice-card-actions{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  min-height:52px;
  margin:0;
  padding:9px 12px;
  border-top:1px solid var(--document-divider);
  background:var(--document-strip);
}
body:not(.landing-visible) #estimatesPage .estimate-card-actions>.primary-action,
body:not(.landing-visible) #invoicesPage .invoice-card-actions>.primary-action{
  width:100%;
  min-width:0;
  min-height:var(--document-control-height);
}
body:not(.landing-visible) #estimatesPage .estimate-card-actions>.card-action-menu,
body:not(.landing-visible) #invoicesPage .invoice-card-actions>.card-action-menu{
  justify-self:end;
  margin:0;
}
body:not(.landing-visible) #estimatesPage .estimate-card-actions>.workflow-waiting-pill,
body:not(.landing-visible) #estimatesPage .estimate-card-actions>.manual-acceptance-pill,
body:not(.landing-visible) #estimatesPage .estimate-card-actions>.workflow-complete-pill{
  grid-column:1/-1;
  width:100%;
  min-width:0;
  min-height:28px;
  margin:0;
  padding:6px 9px;
  border-radius:9px;
  justify-content:flex-start;
  font-size:10px;
  line-height:1.3;
  white-space:normal;
}

@media(max-width:820px){
  body:not(.landing-visible) #estimatesPage .estimate-card-main,
  body:not(.landing-visible) #invoicesPage .invoice-card-main{gap:12px;padding:13px}
  body:not(.landing-visible) #estimatesPage .estimate-card-total,
  body:not(.landing-visible) #invoicesPage .invoice-card-financial{flex-basis:136px;min-width:136px}
}

@media(max-width:650px){
  body:not(.landing-visible) #estimatesPage .estimate-tools,
  body:not(.landing-visible) #invoicesPage .invoice-tools{display:grid;grid-template-columns:1fr;gap:8px;padding:9px}
  body:not(.landing-visible) #estimatesPage .estimate-tools .search-box,
  body:not(.landing-visible) #invoicesPage .invoice-tools .search-box{width:100%;max-width:none}
  body:not(.landing-visible) #estimatesPage .estimate-card-main,
  body:not(.landing-visible) #invoicesPage .invoice-card-main{display:grid;grid-template-columns:1fr;padding:12px}
  body:not(.landing-visible) #estimatesPage .estimate-card-total,
  body:not(.landing-visible) #invoicesPage .invoice-card-financial{
    width:100%;
    min-width:0;
    min-height:0;
    padding:9px 10px;
    text-align:left;
  }
  body:not(.landing-visible) #estimatesPage .estimate-card-actions,
  body:not(.landing-visible) #invoicesPage .invoice-card-actions{grid-template-columns:minmax(0,1fr) auto;padding:8px 10px}
  body:not(.landing-visible) #estimatesPage .estimate-card-heading,
  body:not(.landing-visible) #invoicesPage .invoice-card-heading{gap:5px}
}