/* 2026-09-30 — final compact invoice cards v214 */

@media(max-width:680px){
  [data-page="invoices"] .section-intro{
    gap:8px!important;
    margin-bottom:12px!important;
  }
  [data-page="invoices"] .section-intro h2{
    font-size:clamp(36px,10.5vw,46px)!important;
    line-height:.98!important;
    letter-spacing:-.045em!important;
  }
  [data-page="invoices"] .section-intro>.primary-btn{
    min-height:46px!important;
    margin-top:0!important;
  }

  [data-page="invoices"] .metric-grid.compact{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:7px!important;
    margin-bottom:10px!important;
  }
  [data-page="invoices"] .metric-grid.compact .metric-card{
    min-width:0!important;
    min-height:72px!important;
    padding:9px 8px!important;
    border-radius:15px!important;
    overflow:hidden!important;
  }
  [data-page="invoices"] .metric-grid.compact .metric-card span{
    min-height:16px!important;
    font-size:9px!important;
    line-height:1.05!important;
  }
  [data-page="invoices"] .metric-grid.compact .metric-card strong{
    display:block!important;
    width:100%!important;
    margin:6px 0 0!important;
    font-size:clamp(15px,4.15vw,18px)!important;
    line-height:1!important;
    letter-spacing:-.045em!important;
    white-space:nowrap!important;
    overflow:visible!important;
    text-overflow:clip!important;
  }

  [data-page="invoices"] .table-card{
    padding:0!important;
    border:0!important;
    background:transparent!important;
    overflow:visible!important;
  }

  [data-page="invoices"] #invoicesTable{
    display:grid!important;
    gap:9px!important;
  }

  [data-page="invoices"] #invoicesTable>.invoice-growth-row{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-rows:auto auto auto auto!important;
    gap:0 10px!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    margin:0!important;
    padding:12px!important;
    border:1px solid #DADFE3!important;
    border-radius:18px!important;
    background:#FFFDF9!important;
    box-shadow:0 8px 24px rgba(25,25,25,.035)!important;
    overflow:hidden!important;
  }

  [data-page="invoices"] #invoicesTable>.invoice-growth-row>.invoice-growth-primary{
    grid-column:1!important;
    grid-row:1!important;
    display:grid!important;
    grid-template-columns:auto auto!important;
    justify-content:start!important;
    align-items:end!important;
    column-gap:7px!important;
    row-gap:3px!important;
    width:auto!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
  }
  [data-page="invoices"] #invoicesTable .invoice-number{
    grid-column:1/-1!important;
    display:block!important;
    margin:0!important;
    color:#7E786F!important;
    font-size:8px!important;
    line-height:1!important;
    font-weight:900!important;
    letter-spacing:.12em!important;
  }
  [data-page="invoices"] #invoicesTable .invoice-growth-amount{
    grid-column:1!important;
    display:block!important;
    min-width:0!important;
    margin:0!important;
    color:#111!important;
    font-size:clamp(28px,8.6vw,35px)!important;
    line-height:.92!important;
    letter-spacing:-.055em!important;
    white-space:nowrap!important;
  }
  [data-page="invoices"] #invoicesTable .invoice-growth-balance-label{
    grid-column:2!important;
    align-self:end!important;
    margin:0 0 2px!important;
    color:#736E66!important;
    font-size:9px!important;
    line-height:1.05!important;
    white-space:nowrap!important;
  }

  [data-page="invoices"] #invoicesTable .invoice-status-badge{
    grid-column:2!important;
    grid-row:1!important;
    align-self:start!important;
    justify-self:end!important;
    min-width:0!important;
    margin:0!important;
  }
  [data-page="invoices"] #invoicesTable .invoice-status-badge .status{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:max-content!important;
    max-width:100%!important;
    margin:0!important;
    padding:5px 8px!important;
    border-radius:999px!important;
    font-size:9px!important;
    line-height:1!important;
    white-space:nowrap!important;
  }

  [data-page="invoices"] #invoicesTable .invoice-status-meta{
    grid-column:1/-1!important;
    grid-row:2!important;
    display:flex!important;
    flex-wrap:wrap!important;
    align-items:center!important;
    gap:5px 7px!important;
    width:100%!important;
    min-width:0!important;
    margin:8px 0 0!important;
    padding:7px 0!important;
    border-top:1px solid #E9E4DB!important;
    border-bottom:1px solid #E9E4DB!important;
    text-align:left!important;
  }
  [data-page="invoices"] #invoicesTable .invoice-status-meta .invoice-next-action{
    display:inline-block!important;
    margin:0!important;
    color:#191919!important;
    font-size:9px!important;
    line-height:1.1!important;
    white-space:nowrap!important;
  }
  [data-page="invoices"] #invoicesTable .invoice-status-meta .customer-open-status,
  [data-page="invoices"] #invoicesTable .invoice-status-meta .payment-choice-note,
  [data-page="invoices"] #invoicesTable .invoice-status-meta .dispute-alert{
    display:inline-flex!important;
    align-items:center!important;
    width:max-content!important;
    max-width:100%!important;
    margin:0!important;
    padding:4px 7px!important;
    border-radius:999px!important;
    font-size:8px!important;
    line-height:1.1!important;
    white-space:nowrap!important;
    overflow-wrap:normal!important;
    text-align:left!important;
  }

  [data-page="invoices"] #invoicesTable>.invoice-growth-row>.invoice-client-field{
    grid-column:1/-1!important;
    grid-row:3!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:3px!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    margin:0!important;
    padding:8px 0 0!important;
    border:0!important;
    text-align:left!important;
  }
  [data-page="invoices"] #invoicesTable>.invoice-growth-row>.invoice-client-field::before{
    content:attr(data-label)!important;
    display:block!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    color:#777168!important;
    font-size:8px!important;
    font-weight:900!important;
    letter-spacing:.12em!important;
    line-height:1!important;
    text-transform:uppercase!important;
    text-align:left!important;
  }
  [data-page="invoices"] #invoicesTable .invoice-client-field>strong{
    margin:0!important;
    color:#111!important;
    font-size:15px!important;
    line-height:1.1!important;
    text-align:left!important;
  }
  [data-page="invoices"] #invoicesTable .invoice-due-date{
    margin:0!important;
    color:#7A746C!important;
    font-size:9px!important;
    line-height:1.1!important;
    text-align:left!important;
  }

  [data-page="invoices"] #invoicesTable .invoice-contact-list{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:5px!important;
    width:100%!important;
    margin:5px 0 0!important;
    padding:0!important;
    background:transparent!important;
    border:0!important;
    border-radius:0!important;
    overflow:visible!important;
  }
  [data-page="invoices"] #invoicesTable .invoice-contact-row{
    display:grid!important;
    grid-template-columns:22px minmax(0,1fr)!important;
    align-items:center!important;
    gap:6px!important;
    min-width:0!important;
    margin:0!important;
    padding:6px 7px!important;
    color:#181818!important;
    border:0!important;
    border-radius:11px!important;
    background:#F1F5F7!important;
    text-decoration:none!important;
    font-size:9px!important;
    line-height:1.1!important;
  }
  [data-page="invoices"] #invoicesTable .invoice-contact-row.is-address{
    grid-column:1/-1!important;
  }
  [data-page="invoices"] #invoicesTable .invoice-contact-row>span:last-child{
    min-width:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  [data-page="invoices"] #invoicesTable .invoice-contact-row.is-address>span:last-child{
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }
  [data-page="invoices"] #invoicesTable .invoice-contact-icon{
    display:grid!important;
    place-items:center!important;
    width:22px!important;
    height:22px!important;
    border-radius:50%!important;
    background:#E4EEF6!important;
    color:#191919!important;
    font-size:6px!important;
    line-height:1!important;
    font-style:normal!important;
    font-weight:900!important;
    letter-spacing:.03em!important;
  }

  [data-page="invoices"] #invoicesTable>.invoice-growth-row>.invoice-actions-stable{
    grid-column:1/-1!important;
    grid-row:4!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:6px!important;
    width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:8px 0 0!important;
    border:0!important;
  }
  [data-page="invoices"] #invoicesTable .invoice-actions-stable .safe-actions{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:6px!important;
    width:100%!important;
    min-width:0!important;
  }
  [data-page="invoices"] #invoicesTable .invoice-actions-stable .safe-actions button{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    min-height:36px!important;
    margin:0!important;
    padding:7px 8px!important;
    border-radius:11px!important;
    font-size:9px!important;
    line-height:1.1!important;
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
  }
  [data-page="invoices"] #invoicesTable .invoice-actions-stable .safe-actions button:last-child:nth-child(odd){
    grid-column:1/-1!important;
  }
  [data-page="invoices"] #invoicesTable .invoice-actions-stable>.record-delete-btn{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    min-height:36px!important;
    margin:0!important;
    padding:7px 8px!important;
    border-radius:11px!important;
    font-size:9px!important;
    line-height:1.1!important;
  }
}

@media(max-width:390px){
  [data-page="invoices"] #invoicesTable>.invoice-growth-row{
    gap:0 8px!important;
    padding:11px!important;
  }
  [data-page="invoices"] #invoicesTable .invoice-growth-amount{
    font-size:clamp(27px,8.4vw,33px)!important;
  }
  [data-page="invoices"] #invoicesTable .invoice-growth-balance-label{
    font-size:8px!important;
  }
  [data-page="invoices"] #invoicesTable .invoice-contact-list{
    gap:4px!important;
  }
  [data-page="invoices"] #invoicesTable .invoice-contact-row{
    padding:6px!important;
    font-size:8px!important;
  }
  [data-page="invoices"] #invoicesTable .invoice-actions-stable .safe-actions button,
  [data-page="invoices"] #invoicesTable .invoice-actions-stable>.record-delete-btn{
    min-height:35px!important;
    font-size:9px!important;
  }
}