/* JOBIX_V146_MOBILE_DOCUMENT_UI
   Phone-first customer document polish for quote/invoice/admin document pages.
   Goal: no tiny desktop sheet on phone; readable cards, clean action buttons, SMS button emphasis.
*/
:root{--jx146-blue:#2563eb;--jx146-sky:#0ea5e9;--jx146-green:#16a34a;--jx146-ink:#0f172a;--jx146-line:#dbe7f4;--jx146-soft:#eef6ff;}

/* Make Text/SMS actions visually obvious on admin document pages. */
.actions form:nth-of-type(2) button,
.actions.no-print form:nth-of-type(2) button{
  background:linear-gradient(135deg,#0ea5e9,#2563eb)!important;
  color:#fff!important;
  border:0!important;
  box-shadow:0 10px 24px rgba(37,99,235,.20)!important;
}
.actions form:nth-of-type(2) button:before,
.actions.no-print form:nth-of-type(2) button:before{content:"💬 ";font-weight:900;}

@media screen and (max-width: 760px){
  html{font-size:16px;-webkit-text-size-adjust:100%;}
  body{overflow-x:hidden!important;background:#eef5ff!important;}
  img,svg,canvas,video{max-width:100%;height:auto;}

  /* Admin shell: let document pages breathe on phone. */
  .jobix-shell{display:block!important;min-width:0!important;}
  .jobix-sidebar{display:none!important;}
  .jobix-main-shell{width:100%!important;margin:0!important;padding:0!important;min-width:0!important;}
  .jobix-mobilebar{display:flex!important;position:sticky;top:0;z-index:90;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-bottom:1px solid var(--jx146-line);}
  .container,.jobix-admin-container,.jobix-main-shell>.container{width:100%!important;max-width:100%!important;margin:0!important;padding:12px!important;}
  .page-title{margin:4px 0 12px!important;}
  .page-title h1{font-size:30px!important;line-height:1.05!important;letter-spacing:-.055em!important;}

  /* Admin action bars: horizontally scrollable pills instead of tiny wrapping buttons. */
  .actions,.actions.no-print,.jx16-action-strip{
    display:flex!important;
    flex-wrap:nowrap!important;
    gap:8px!important;
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch;
    align-items:center!important;
    padding:10px 4px 12px!important;
    margin:0 0 12px!important;
    border-radius:18px!important;
    background:rgba(248,251,255,.96)!important;
    border:1px solid rgba(219,231,244,.9)!important;
    box-shadow:0 12px 30px rgba(15,23,42,.07)!important;
    position:sticky!important;
    top:0!important;
    z-index:70!important;
  }
  .actions form,.actions.no-print form,.jx16-action-strip form{flex:0 0 auto!important;margin:0!important;}
  .actions a,.actions button,.actions.no-print a,.actions.no-print button,.jx16-action-strip a,.jx16-action-strip button{
    flex:0 0 auto!important;
    white-space:nowrap!important;
    min-height:42px!important;
    border-radius:999px!important;
    font-size:13px!important;
    padding:10px 14px!important;
    line-height:1!important;
  }

  /* Public/customer pages: keep the useful buttons reachable at the bottom. */
  body:not(.jobix-admin-page) .jx248-simple-toolbar,
  body:not(.jobix-admin-page) .jx14-public-actions{
    display:flex!important;
    flex-wrap:nowrap!important;
    gap:8px!important;
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch;
    position:sticky!important;
    bottom:0!important;
    z-index:90!important;
    padding:10px!important;
    margin:10px -2px 12px!important;
    background:rgba(255,255,255,.96)!important;
    border:1px solid var(--jx146-line)!important;
    border-radius:18px!important;
    box-shadow:0 -10px 28px rgba(15,23,42,.10)!important;
  }
  body:not(.jobix-admin-page) .jx248-simple-toolbar .btn,
  body:not(.jobix-admin-page) .jx14-public-actions .btn{
    flex:0 0 auto!important;
    white-space:nowrap!important;
    min-height:42px!important;
    border-radius:999px!important;
    padding:10px 14px!important;
    font-size:13px!important;
  }

  /* Public quote shell/hero. */
  .jx244-page,.jx246-page,.jx247-page{width:100%!important;max-width:100%!important;margin:0!important;padding:10px!important;}
  .jx244-topbar{display:flex!important;gap:10px!important;align-items:center!important;justify-content:space-between!important;position:sticky!important;top:0!important;z-index:80!important;background:rgba(238,245,255,.96)!important;border-bottom:1px solid var(--jx146-line)!important;padding:8px 4px!important;}
  .jx244-brand{min-width:0!important;}
  .jx244-brand strong{font-size:14px!important;}
  .jx244-brand small{font-size:11px!important;}
  .jx244-pill{font-size:12px!important;white-space:nowrap!important;}
  .jx244-hero,.jx246-hero{display:grid!important;grid-template-columns:1fr!important;gap:12px!important;padding:18px!important;border-radius:22px!important;}
  .jx244-hero h1,.jx246-hero h1{font-size:34px!important;line-height:1!important;letter-spacing:-.07em!important;margin:4px 0 6px!important;}
  .jx244-hero p,.jx246-hero p{font-size:15px!important;line-height:1.4!important;}
  .jx244-contact-card{width:100%!important;}
  .jx244-main,.jx246-main{display:block!important;width:100%!important;max-width:100%!important;margin:0!important;padding:0!important;}
  .jx246-document-shell{width:100%!important;max-width:100%!important;margin:0!important;}

  /* Core document component: card layout instead of scaled A4. */
  .jx16-document,.sheet{
    width:100%!important;
    max-width:100%!important;
    margin:0 0 16px!important;
    border-radius:20px!important;
    box-shadow:0 14px 40px rgba(15,23,42,.08)!important;
    overflow:hidden!important;
  }
  .jx16-document{padding:16px!important;}
  .sheet .pad,.pad{padding:16px!important;}
  .topbar{height:7px!important;}

  .jx16-doc-header,.header{display:grid!important;grid-template-columns:1fr!important;gap:16px!important;margin-bottom:18px!important;}
  .jx16-company-block,.company{display:flex!important;align-items:center!important;gap:12px!important;min-width:0!important;}
  .jx16-company-logo,.jx16-logo-initials,.logo{width:62px!important;height:62px!important;border-radius:18px!important;flex:0 0 62px!important;}
  .jx16-company-block h1,.company h1{font-size:28px!important;line-height:1!important;margin:0 0 5px!important;letter-spacing:-.055em!important;}
  .jx16-company-block p,.company p{font-size:13px!important;line-height:1.35!important;word-break:break-word!important;}

  .jx16-meta-card,.meta{width:100%!important;border-radius:18px!important;}
  .jx16-meta-title,.meta-title,.meta .title{padding:13px 15px!important;}
  .jx16-meta-title strong,.meta-title strong,.meta .title strong{font-size:24px!important;line-height:1.05!important;word-break:break-word!important;}
  .jx16-meta-row,.meta-row{padding:10px 15px!important;font-size:14px!important;}
  .jx16-meta-total,.meta-total{padding:14px 15px!important;}
  .jx16-meta-total strong,.meta-total strong{font-size:22px!important;}

  .jx16-recipient-grid,.grid,.jx16-summary-grid,.summary,.jx16-signature-summary,.signature,.payment-status,.status{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
  }
  .jx16-recipient-grid,.grid{margin:16px 0 18px!important;}
  .jx16-recipient-card,.card,.jx16-note-card,.jx16-terms,.terms,.notes,.note,.totals{
    border-radius:16px!important;
    padding:14px!important;
    min-width:0!important;
  }
  .jx16-recipient-card strong,.card strong{font-size:18px!important;}
  .jx16-recipient-card p,.card p,.notes p,.note p,.terms p{font-size:14px!important;line-height:1.45!important;word-break:break-word!important;}

  .payment-status,.status{padding:12px!important;}
  .payment-status .big,.status strong{font-size:22px!important;}

  .jx16-items-card h2,.section-title{font-size:22px!important;margin:20px 0 10px!important;}
  .jx16-table,.table{border-radius:16px!important;overflow:hidden!important;}
  .jx16-table-head,.thead{display:none!important;}
  .jx16-table.priced .jx16-table-row,
  .jx16-table.unpriced .jx16-table-row,
  .jx16-table-row,
  .row{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:6px!important;
    padding:13px!important;
    font-size:14px!important;
  }
  .jx16-table-row>div,.row>div{padding:3px 0!important;min-width:0!important;word-break:break-word!important;}
  .jx16-item-desc{font-size:14px!important;line-height:1.4!important;}
  .jx16-item-name strong,.row .name{font-size:15px!important;}

  .jx16-totals-card,.totals{padding:0!important;overflow:hidden!important;}
  .jx16-totals-card div,.totals div{font-size:15px!important;padding:12px 14px!important;}
  .jx16-totals-card .jx16-grand,.totals .grand{font-size:19px!important;}
  .jx16-totals-card .jx16-grand strong,.totals .grand strong{font-size:24px!important;}
  .jx16-watermark,.paidstamp{font-size:36px!important;opacity:.22!important;}

  /* Standalone clean PDF pages: toolbar becomes usable on phone. */
  .toolbar{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:8px!important;width:100%!important;max-width:100%!important;margin:0!important;padding:10px!important;position:sticky!important;top:0!important;z-index:95!important;background:rgba(238,245,255,.96)!important;border-bottom:1px solid var(--jx146-line)!important;}
  .toolbar>div{display:flex!important;gap:8px!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch;}
  .toolbar .btn,.toolbar button,.toolbar a{white-space:nowrap!important;flex:0 0 auto!important;border-radius:999px!important;min-height:42px!important;}
  .toolbar .hint{font-size:12px!important;}

  /* Prevent long URLs/activity rows from breaking the mobile frame. */
  .activity-table,.document-activity,.jx-activity-panel,.jx14-hub-card,table{max-width:100%!important;}
  td,th,.referrer,.provider-ref,.url,.muted{overflow-wrap:anywhere!important;word-break:break-word!important;}
}

@media screen and (max-width: 420px){
  .jx244-hero h1,.jx246-hero h1{font-size:30px!important;}
  .page-title h1{font-size:26px!important;}
  .jx16-company-block h1,.company h1{font-size:25px!important;}
  .jx16-meta-title strong,.meta-title strong,.meta .title strong{font-size:22px!important;}
  .jx16-document{padding:13px!important;}
  .sheet .pad,.pad{padding:13px!important;}
  .actions a,.actions button,.toolbar .btn{font-size:12px!important;padding:9px 12px!important;}
}