/* Keep the generated mobile primary-action dock hidden unless the mobile media query styles it. */
.mobile-action-dock{display:none!important}

@media (max-width: 760px){
  html{font-size:16px;-webkit-text-size-adjust:100%}
  body{min-width:0;overflow-x:hidden;background:#f5f5f7!important}
  .page{width:100%!important;max-width:none!important;padding:6px 8px calc(84px + env(safe-area-inset-bottom,0px))!important}

  .topbar{position:static!important;margin-bottom:10px!important;border-radius:12px!important;padding:8px 10px!important}
  .brand{width:100%!important;min-width:0!important}
  .brand img,.topbar .brand img{width:86px!important;height:auto!important;max-height:38px!important;object-fit:contain!important}
  .brand h1{font-size:16px!important;line-height:1.12!important}
  .brand span{font-size:11px!important}
  .mobile-nav-toggle{min-height:38px!important;max-width:118px!important;padding:6px 10px!important}
  .mobile-nav-toggle span{font-size:10px!important}
  .mobile-nav-toggle strong{max-width:94px!important;font-size:12px!important}
  .actions,.top-actions{width:100%!important;grid-template-columns:1fr 1fr!important;gap:8px!important}
  .actions .btn,.top-actions .btn,.btn{min-height:44px!important;padding:10px 12px!important;white-space:normal!important;text-align:center!important}
  .stepper{grid-column:1/-1!important}

  h1,h2,h3{letter-spacing:0!important}
  .stats,.grid,.layout,.welcome,.customer-grid,.pricebook-grid,.mini-stats,.filters,.form-grid,.customer-form,.quick-row,.section-split,.section-split-notes,.invoice-meta,.invoice-footer{display:grid!important;grid-template-columns:1fr!important;gap:8px!important}
  .card,.stat,.panel,.form-section,.tool-box,.customer-card,.item-card{border-radius:12px!important;box-shadow:0 1px 2px rgba(0,0,0,.04),0 8px 22px rgba(0,0,0,.05)!important}
  .card-head,.card-body,.panel,.filters,.customer-grid{padding:10px!important}
  .card-head{display:grid!important;grid-template-columns:1fr!important;gap:10px!important}
  .card-head h2,.card-head h3,.panel h2{font-size:20px!important;line-height:1.16!important}
  .card-head p,.panel p{font-size:14px!important}
  .stat{min-height:auto!important;padding:10px!important}
  .stat strong{font-size:21px!important;line-height:1.05!important}
  .stat span{font-size:12px!important}

  input,select,textarea{min-height:44px!important;font-size:16px!important}
  input[type="color"]{min-height:48px!important;padding:6px!important}
  input[type="checkbox"],input[type="radio"]{min-height:0!important}
  textarea{min-height:104px!important}
  label{font-size:12px!important}

  #mode-screen,.mode-screen,.invoice-mode-screen{
    padding:10px!important;
    place-items:start center!important;
    align-items:start!important;
    overflow:auto!important;
    min-height:100dvh!important;
  }
  #mode-screen .mode-card,.mode-screen .mode-card,.invoice-mode-screen .mode-card{
    width:100%!important;
    max-height:calc(100dvh - 20px)!important;
    overflow:auto!important;
    padding:14px!important;
    gap:12px!important;
    border-radius:12px!important;
  }
  .mode-card-head{grid-template-columns:minmax(0,1fr) 38px!important;gap:10px!important}
  .mode-card h2{font-size:22px!important;line-height:1.14!important}
  .mode-card p{font-size:14px!important;line-height:1.35!important;margin-top:5px!important}
  .mode-cancel{width:38px!important;height:38px!important}
  .mode-options{grid-template-columns:1fr!important;gap:10px!important}
  .mode-option{
    min-height:auto!important;
    padding:14px!important;
    gap:8px!important;
    border-radius:10px!important;
  }
  .mode-option strong{font-size:18px!important;line-height:1.2!important}
  .mode-option span{font-size:14px!important;line-height:1.35!important}
  .mode-option b{padding:7px 10px!important;font-size:12px!important}

  .panel{
    align-content:start!important;
    place-items:stretch!important;
    padding:8px!important;
    overflow:auto!important;
  }
  .panel>div:first-child{
    width:100%!important;
    padding:14px 14px 0!important;
    border-radius:12px 12px 0 0!important;
  }
  .panel>.form-grid{
    width:100%!important;
    padding:12px 14px 14px!important;
    gap:10px!important;
    border-radius:0 0 12px 12px!important;
  }
  .panel h2{font-size:20px!important;line-height:1.16!important}
  .panel p{font-size:13px!important;line-height:1.35!important}
  .panel input,.panel select,.panel textarea{min-height:40px!important;padding:8px 10px!important}
  .panel textarea{min-height:88px!important}
  .panel label{font-size:11px!important;margin-bottom:4px!important}
  .panel .tool-actions{display:grid!important;grid-template-columns:1fr!important;gap:8px!important}
  .panel .tool-actions .btn{width:100%!important;min-height:42px!important}

  .side{position:static!important}
  .section-title{display:grid!important;gap:5px!important}
  .section-title span{text-align:left!important;max-width:none!important}
  .section-graphic{display:none!important}
  .item-entry-grid,.form-grid.compact,.form-grid.thirds{grid-template-columns:1fr!important}

  .table-wrap,.line-items,.invoice-table,.payment-table,.customer-table-wrap,.pricebook-list,.payment-activity-table,.payment-table-wrap{display:block!important;width:100%!important;max-width:100%!important;overflow:visible!important}
  table{min-width:0!important}
  .table-wrap::after,.customer-table-wrap::after,.pricebook-list::after{display:none!important}
  .invoice-table,.customer-table,.pricebook-table,.line-items.editor-table{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    border:0!important;
    background:transparent!important;
  }
  .invoice-table thead,.customer-table thead,.pricebook-table thead,.line-items.editor-table thead{display:none!important}
  .invoice-table tbody,.customer-table tbody,.pricebook-table tbody,.line-items.editor-table tbody{display:grid!important;gap:10px!important}
  .invoice-table tr,.customer-table tr,.pricebook-table tr,.line-items.editor-table tr{
    display:grid!important;
    gap:9px!important;
    border:1px solid rgba(0,0,0,.08)!important;
    border-radius:12px!important;
    background:#fff!important;
    box-shadow:0 1px 2px rgba(0,0,0,.035)!important;
    padding:12px!important;
  }
  .invoice-table td,.customer-table td,.pricebook-table td,.line-items.editor-table td{
    display:grid!important;
    grid-template-columns:minmax(92px,.36fr) minmax(0,1fr)!important;
    align-items:start!important;
    gap:10px!important;
    padding:0!important;
    border:0!important;
    text-align:left!important;
    min-width:0!important;
    overflow-wrap:anywhere!important;
    font-size:15px!important;
    line-height:1.35!important;
  }
  .invoice-table td::before,.customer-table td::before,.pricebook-table td::before,.line-items.editor-table td::before{
    content:attr(data-label);
    color:#6e6e73!important;
    font-size:12px!important;
    font-weight:650!important;
  }
  .invoice-table td:empty,.customer-table td:empty,.pricebook-table td:empty,.line-items.editor-table td:empty{display:none!important}
  .invoice-table tr.empty-table-row{
    display:block!important;
    padding:0!important;
    border:0!important;
    box-shadow:none!important;
    background:transparent!important;
  }
  .invoice-table tr.empty-table-row td.empty-table-cell{
    display:block!important;
    grid-template-columns:1fr!important;
    width:100%!important;
    padding:0!important;
    min-height:0!important;
    text-align:center!important;
  }
  .invoice-table tr.empty-table-row td.empty-table-cell::before{display:none!important}
  .invoice-table tr.empty-table-row .empty{
    margin:10px 0 0!important;
    padding:22px 14px!important;
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:break-word!important;
    line-height:1.35!important;
  }
  .invoice-table tr.empty-table-row .empty .btn{
    width:100%!important;
    max-width:280px!important;
    margin-top:6px!important;
  }

  .customer-table-wrap{overflow:visible!important;background:transparent!important}
  .customer-table tbody{gap:12px!important}
  .customer-table tr{
    gap:8px!important;
    padding:14px!important;
    margin:0!important;
  }
  .customer-table td{
    grid-template-columns:104px minmax(0,1fr)!important;
    min-height:0!important;
    height:auto!important;
    gap:8px!important;
    line-height:1.3!important;
  }
  .customer-table .row-menu-cell{
    display:flex!important;
    justify-content:flex-end!important;
    padding:0!important;
    margin-bottom:2px!important;
  }
  .customer-table .row-menu-cell::before{display:none!important}
  .customer-table .row-menu-cell .table-menu{margin:0!important}
  .customer-table .customer-name-main{padding:0!important}
  .customer-table .customer-name-link{
    font-size:18px!important;
    line-height:1.2!important;
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
  }
  .customer-table .customer-sub{font-size:12px!important;line-height:1.25!important}
  .customer-table .customer-cell{
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
    overflow-wrap:anywhere!important;
  }
  .customer-table .customer-cell.address{max-width:none!important}
  .customer-table .balance-amount{text-align:left!important}
  .customer-table .table-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
    justify-content:stretch!important;
    width:100%!important;
  }
  .customer-table .table-actions button{
    width:100%!important;
    min-height:42px!important;
    white-space:normal!important;
  }

  .customers-shell{
    border-radius:0!important;
    border-left:0!important;
    border-right:0!important;
    box-shadow:none!important;
    background:#fff!important;
    overflow:visible!important;
  }
  .customers-shell .card-head{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    align-items:center!important;
    gap:12px!important;
    padding:14px 16px!important;
    background:#fff!important;
    border-bottom:1px solid #e5e5ea!important;
  }
  .customers-title h2{
    font-size:22px!important;
    line-height:1.15!important;
    font-weight:650!important;
  }
  .customers-title span{font-size:13px!important;color:#6e6e73!important}
  #toolbar-add-customer{
    min-height:38px!important;
    border-radius:999px!important;
    padding:8px 13px!important;
    white-space:nowrap!important;
    font-size:14px!important;
  }
  .customer-toolbar{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    padding:12px 16px!important;
    background:#fff!important;
    border-bottom:1px solid #e5e5ea!important;
  }
  .customer-toolbar label{display:none!important}
  .customer-toolbar input,.customer-toolbar select{
    min-height:44px!important;
    border-radius:12px!important;
    background:#f5f5f7!important;
    border-color:#e5e5ea!important;
  }
  .customer-toolbar .status-line:empty{display:none!important}
  #refresh-customers{display:none!important}

  .mobile-customer-list{
    display:grid!important;
    gap:0!important;
    background:#fff!important;
    border-top:1px solid #e5e5ea!important;
    border-bottom:1px solid #e5e5ea!important;
    margin-top:0!important;
  }
  .mobile-customer-card{
    background:#fff!important;
    border:0!important;
    border-bottom:1px solid #e5e5ea!important;
    border-radius:0!important;
    box-shadow:none!important;
  }
  .mobile-customer-card:last-child{border-bottom:0!important}
  .mobile-customer-card summary{
    list-style:none!important;
    min-height:58px!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 22px!important;
    align-items:center!important;
    gap:12px!important;
    padding:0 18px!important;
    cursor:pointer!important;
    color:#1d1d1f!important;
    font-size:18px!important;
    font-weight:500!important;
  }
  .mobile-customer-card summary::-webkit-details-marker{display:none!important}
  .mobile-customer-card summary span{
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  .mobile-customer-card summary b{
    width:12px!important;
    height:12px!important;
    border-right:3px solid #1d1d1f!important;
    border-bottom:3px solid #1d1d1f!important;
    transform:rotate(-45deg)!important;
    justify-self:end!important;
    transition:transform .16s ease!important;
  }
  .mobile-customer-card[open] summary b{transform:rotate(45deg)!important}
  .mobile-customer-details{
    display:grid!important;
    gap:12px!important;
    padding:0 18px 18px!important;
    color:#1d1d1f!important;
  }
  .mobile-customer-details>div:not(.mobile-customer-actions):not(.mobile-customer-metrics){
    display:grid!important;
    gap:3px!important;
  }
  .mobile-customer-details span{
    color:#6e6e73!important;
    font-size:12px!important;
    font-weight:650!important;
  }
  .mobile-customer-details strong{
    color:#1d1d1f!important;
    font-size:15px!important;
    line-height:1.3!important;
    font-weight:500!important;
    overflow-wrap:anywhere!important;
  }
  .mobile-customer-metrics{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
  }
  .mobile-customer-metrics span{
    border:1px solid #e5e5ea!important;
    border-radius:10px!important;
    padding:10px!important;
    background:#f9f9fb!important;
    color:#6e6e73!important;
    font-size:12px!important;
  }
  .mobile-customer-metrics b{
    display:block!important;
    color:#1d1d1f!important;
    font-size:16px!important;
    line-height:1.1!important;
    margin-bottom:2px!important;
  }
  .mobile-customer-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
    padding-top:2px!important;
  }
  .mobile-customer-actions button{
    width:100%!important;
    min-height:42px!important;
    border:1px solid #d2d2d7!important;
    border-radius:10px!important;
    background:#fff!important;
    color:#1d1d1f!important;
    font:inherit!important;
    font-size:15px!important;
    font-weight:650!important;
  }
  .mobile-customer-actions button:first-child{
    background:#1d1d1f!important;
    border-color:#1d1d1f!important;
    color:#fff!important;
  }

  .mobile-list-host{
    display:block!important;
    padding:0!important;
    border:0!important;
    box-shadow:none!important;
    background:transparent!important;
  }
  .mobile-list-host td{
    display:block!important;
    grid-template-columns:1fr!important;
    padding:0!important;
    border:0!important;
  }
  .mobile-list-host td::before{display:none!important}
  .mobile-app-list{
    display:grid!important;
    gap:0!important;
    background:#fff!important;
    border-top:1px solid #e5e5ea!important;
    border-bottom:1px solid #e5e5ea!important;
  }
  .mobile-app-row{
    background:#fff!important;
    border:0!important;
    border-bottom:1px solid #e5e5ea!important;
    border-radius:0!important;
    box-shadow:none!important;
  }
  .mobile-app-row:last-child{border-bottom:0!important}
  .mobile-app-row summary{
    list-style:none!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    align-items:start!important;
    gap:14px!important;
    min-height:74px!important;
    padding:14px 18px!important;
    cursor:pointer!important;
  }
  .mobile-app-row summary::-webkit-details-marker{display:none!important}
  .mobile-app-row summary span{
    display:grid!important;
    gap:5px!important;
    min-width:0!important;
  }
  .mobile-app-row summary strong{
    color:#1d1d1f!important;
    font-size:18px!important;
    line-height:1.2!important;
    font-weight:500!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  .mobile-app-row summary small{
    color:#6e6e73!important;
    font-size:15px!important;
    line-height:1.25!important;
    font-weight:400!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  .mobile-app-row summary b{
    color:#3a3a3c!important;
    font-size:18px!important;
    line-height:1.2!important;
    font-weight:500!important;
    white-space:nowrap!important;
    text-align:right!important;
  }
  .mobile-app-details{
    display:grid!important;
    gap:11px!important;
    padding:0 18px 16px!important;
  }
  .mobile-app-details>div:not(.mobile-app-actions){
    display:grid!important;
    gap:3px!important;
  }
  .mobile-app-details span{
    color:#6e6e73!important;
    font-size:12px!important;
    font-weight:650!important;
  }
  .mobile-app-details strong{
    color:#1d1d1f!important;
    font-size:15px!important;
    line-height:1.3!important;
    font-weight:500!important;
    overflow-wrap:anywhere!important;
  }
  .mobile-app-details .status-select{
    width:100%!important;
    min-height:40px!important;
  }
  .mobile-app-actions{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
    padding-top:2px!important;
  }
  .mobile-app-actions button{
    min-height:40px!important;
    border:1px solid #d2d2d7!important;
    border-radius:10px!important;
    background:#fff!important;
    color:#1d1d1f!important;
    font:inherit!important;
    font-size:14px!important;
    font-weight:650!important;
  }
  .mobile-app-actions button:first-child{
    background:#1d1d1f!important;
    border-color:#1d1d1f!important;
    color:#fff!important;
  }

  .transaction-feed{gap:10px!important}
  .transaction-row{
    display:grid!important;
    grid-template-columns:34px minmax(0,1fr)!important;
    gap:8px 12px!important;
    padding:14px 0!important;
    align-items:start!important;
  }
  .transaction-row .row-menu-cell{
    grid-column:1!important;
    grid-row:1!important;
    width:34px!important;
    padding-top:1px!important;
  }
  .transaction-row>div:not(.row-menu-cell){
    grid-column:2!important;
    min-width:0!important;
  }
  .transaction-row strong,.transaction-row span{
    overflow-wrap:anywhere!important;
    word-break:normal!important;
  }
  .transaction-row .transaction-amount{
    grid-column:2!important;
    text-align:left!important;
    font-size:17px!important;
  }
  .customer-name-cell{grid-template-columns:28px minmax(0,1fr)!important;column-gap:10px!important}
  .customer-name-link,.price-name{font-size:17px!important;line-height:1.2!important}
  .price-desc{font-size:14px!important}
  .line-items.editor-table input{width:100%!important;max-width:none!important}
  .line-items.editor-table .remove{width:100%!important}

  .invoice-preview{margin-top:12px!important}
  .preview-box{border-radius:12px!important;overflow:hidden!important}
  .invoice-top{display:grid!important;grid-template-columns:1fr!important;gap:10px!important;align-items:start!important;padding:12px!important}
  .invoice-title{text-align:left!important}
  .invoice-title strong{font-size:24px!important}
  .invoice-body{padding:12px!important}
  .invoice-brand img{width:min(52vw,160px)!important;height:auto!important}
  .invoice-brand-name{font-size:20px!important}
  .info-card{padding:12px!important}
  .order-note{padding:12px!important}
  .total-box{max-width:none!important;margin-top:12px!important}
  .summary-row{font-size:15px!important;padding:9px 0!important}
  .summary-row.total{font-size:20px!important}

  .customer-card{padding:48px 12px 12px!important}
  .customer-menu{top:12px!important;left:12px!important}
  .customer-actions,.item-actions,.row-actions,.form-actions,.confirm-actions,.edit-actions{display:grid!important;grid-template-columns:1fr!important;gap:8px!important}
  .customer-actions button,.item-actions button,.row-actions button,.form-actions .btn,.confirm-actions .btn,.edit-actions .btn{width:100%!important;min-height:42px!important}
  .summary-panel,.side,.builder-tools{position:static!important}
  .payment-workspace,.payment-grid,.details-grid,.invoice-search,.method-group,.mode-switch,.activity-head,.flow-head,.transaction-row,.theme-row,.customer-toolbar,.pricebook-toolbar{grid-template-columns:1fr!important}
  .method-group{display:grid!important;gap:8px!important}
  .mode-switch{width:100%!important;border-radius:12px!important}
  .mode-button,.method-button{min-height:44px!important}
  .transaction-amount,.amount,.balance-amount,.price-amount{text-align:left!important}
  .transaction-row{grid-template-columns:34px minmax(0,1fr)!important}
  .transaction-row .row-menu-cell{grid-column:1!important;grid-row:1!important}
  .transaction-row>div:not(.row-menu-cell),.transaction-row .transaction-amount{grid-column:2!important}
  .quick-actions{grid-template-columns:1fr!important}
  .quick-actions .btn,.builder-tools .btn,#confirm-invoice,#save-draft,#save-and-close,#record-payment{min-height:50px!important;font-size:16px!important}
  .builder-tools>div:first-child{padding:12px!important}
  .readiness-panel,.send-card,.email-preview,.history-item{padding:12px!important}
  .readiness-list{display:grid!important;gap:8px!important;padding-left:20px!important}
  .edit-overlay,.confirm-overlay{padding:12px!important}
  .edit-panel,.confirm-dialog{width:100%!important;max-height:calc(100vh - 24px)!important;overflow:auto!important}
  .edit-head,.edit-body{padding:16px!important}
  .edit-head h3{font-size:24px!important}
  .price-overlay,.customer-modal-backdrop{align-items:stretch!important;padding:12px!important}
  .price-dialog,.customer-modal{width:100%!important;max-height:calc(100vh - 24px)!important;overflow:auto!important}
  .bar-chart{grid-template-columns:1fr!important;gap:8px!important;min-height:auto!important}
  .bar-group{grid-template-columns:56px minmax(0,1fr) 70px!important;align-items:center!important}
  .bar-stack{height:12px!important;display:flex!important;border-bottom:0!important;background:#e8e8ed!important;border-radius:999px!important;padding:0!important;overflow:hidden!important}
  .bar{height:12px!important;width:50%!important;min-height:12px!important;border-radius:999px!important}
  .mix-row{grid-template-columns:78px minmax(0,1fr)!important}
  .mix-value{grid-column:2!important;text-align:left!important}

  .mobile-action-dock{
    position:fixed!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    z-index:120!important;
    display:none!important;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px))!important;
    background:rgba(245,245,247,.86)!important;
    border-top:1px solid rgba(0,0,0,.08)!important;
    backdrop-filter:saturate(180%) blur(18px)!important;
  }
  .mobile-action-dock.is-visible{display:block!important}
  .mobile-action-button{
    width:100%!important;
    min-height:48px!important;
    border:0!important;
    border-radius:14px!important;
    background:var(--ui-accent,#0066cc)!important;
    color:var(--ui-on-accent,#fff)!important;
    font:inherit!important;
    font-weight:750!important;
    font-size:16px!important;
    box-shadow:0 8px 24px rgba(0,0,0,.16)!important;
  }
}

@media (max-width: 420px){
  .actions,.top-actions{grid-template-columns:1fr!important}
  .brand img,.topbar .brand img{width:86px!important}
  .card-head h2,.panel h2{font-size:19px!important}
  .bar-chart{grid-template-columns:1fr!important}
}