/* server-rendered app header: hidden in browsers */
.main>.top>.app-left,.main>.top>.app-title,.main>.top>.app-right{display:none}
.app-lt{display:none} /* iPhone app large title (shown by /static/app-glass.css under html.in-app) */
/* iPhone app look (projects/mml-portal-ios). Every rule is under html.in-app, set by a tiny head script only inside the
   app (window.Capacitor / "MMLApp" user agent), so the web portal is unchanged. --sat/--sab = safe areas (tests can fake them). */
html.in-app{--sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);--hdr:52px;
  -webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent;background:var(--bg,#fbf5ee);overscroll-behavior:none}
html.in-app body{overscroll-behavior:none;-webkit-touch-callout:none}
html.in-app a,html.in-app button,html.in-app .btn,html.in-app .bnav,html.in-app .top,html.in-app summary,html.in-app label{-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
html.in-app input,html.in-app textarea,html.in-app select{font-size:16px!important} /* iOS zooms into anything smaller */

/* ---- native header: maroon bar under the status bar / Dynamic Island ---- */
html.in-app .side{display:none!important}
html.in-app .main>.top{position:fixed!important;top:0;left:0;right:0;z-index:50;height:auto!important;min-height:0;
  padding:var(--sat) 6px 0 6px!important;background:#2e1113!important;border:0!important;box-shadow:0 1px 0 rgba(0,0,0,.25);
  display:grid!important;grid-template-columns:auto 1fr auto;align-items:center;gap:0!important}
html.in-app .main>.top>*{display:none!important}
html.in-app .main>.top>.app-left,html.in-app .main>.top>.app-title,html.in-app .main>.top>.app-right{display:flex!important;align-items:center;height:var(--hdr)}
html.in-app .app-title{justify-content:center;color:#fff;font:600 17px/1 -apple-system,system-ui,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
html.in-app .app-left{gap:2px;min-width:76px}
html.in-app .app-right{justify-content:flex-end;gap:2px;min-width:76px}
html.in-app .app-ib{position:relative;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border:0;background:transparent;color:#fff;border-radius:20px;padding:0}
html.in-app .app-ib svg{width:22px;height:22px;stroke:#fff}
html.in-app .app-ib:active{background:rgba(255,255,255,.14)}
html.in-app .app-ib i{position:absolute;top:3px;right:2px;background:#f05222;color:#fff;border-radius:9px;min-width:17px;height:17px;padding:0 4px;font:700 11px/17px -apple-system,system-ui;font-style:normal;text-align:center;box-sizing:border-box}
html.in-app .app-back{color:#fff;font:400 17px -apple-system,system-ui;display:flex;align-items:center;gap:1px;padding:0 6px;height:40px;border:0;background:none}
html.in-app .app-back svg{width:13px;height:21px}
html.in-app .app-mark{width:30px;height:30px;margin-left:8px;border-radius:7px;background:url(/static/mark.png) center/contain no-repeat}
/* the yellow "emails on hold / preview" bar sits right under the header */
html.in-app .testbar{position:fixed;top:calc(var(--sat) + var(--hdr));left:0;right:0;z-index:49;font-size:11px;padding:3px 8px}
html.in-app .main{padding-top:calc(var(--sat) + var(--hdr))}
html.in-app .main:has(>.testbar){padding-top:calc(var(--sat) + var(--hdr) + 21px)}
html.in-app .page{padding:14px 14px calc(78px + var(--sab))!important}
html.in-app .page>.backbtn{display:none}
html.in-app .page h1.app-dup{display:none}
@keyframes appIn{from{opacity:.35;transform:translateY(4px)}to{opacity:1;transform:none}}

/* "+" menu (New lead / New client) */
html.in-app .app-menu{position:fixed;right:10px;top:calc(var(--sat) + var(--hdr) + 4px);z-index:60;background:#fff;border-radius:14px;box-shadow:0 10px 40px rgba(0,0,0,.25);overflow:hidden;min-width:200px;animation:appPop .14s ease-out}
html.in-app .app-menu a{display:block;padding:15px 18px;color:#2a1316;font:500 16px -apple-system,system-ui;border-bottom:1px solid #f0e6de}
html.in-app .app-menu a:last-child{border-bottom:0}
html.in-app .app-menu a:active{background:#f6eee7}
html.in-app .app-scrim{position:fixed;inset:0;z-index:55;background:rgba(0,0,0,.12)}
@keyframes appPop{from{opacity:0;transform:scale(.96) translateY(-4px)}to{opacity:1;transform:none}}

/* ---- bottom tab bar above the home indicator ---- */
html.in-app .bnav{display:flex!important;position:fixed!important;left:0;right:0;bottom:0;z-index:50;
  padding:6px 4px calc(4px + var(--sab))!important;background:rgba(255,253,250,.98)!important;-webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px);border-top:.5px solid rgba(0,0,0,.12)!important}
html.in-app .bnav a{font:500 10px -apple-system,system-ui!important;letter-spacing:0!important;text-transform:none!important;padding:2px 0!important}
html.in-app .bnav .ni svg{width:25px!important;height:25px!important}
html.in-app.kb-open .bnav{display:none!important} /* keyboard open: tab bar out of the way */
html.in-app.kb-open .page{padding-bottom:24px!important}

/* ---- touch feel ---- */
html.in-app .btn:active,html.in-app button:active,html.in-app .card a:active,html.in-app .bnav a:active{opacity:.6;transition:opacity .05s}
html.in-app .btn,html.in-app button{transition:opacity .15s}

/* loading bar under the header while the next page loads */
html.in-app .app-load{position:fixed;left:0;top:calc(var(--sat) + var(--hdr));height:2px;width:0;background:#f05222;z-index:70;transition:width 8s cubic-bezier(.1,.7,.2,1)}
html.in-app .app-load.go{width:85%}

/* pull to refresh */
html.in-app .app-ptr{position:fixed;left:50%;top:calc(var(--sat) + var(--hdr) + 8px);z-index:45;width:34px;height:34px;margin-left:-17px;border-radius:17px;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.15);display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(-40px)}
html.in-app .app-ptr svg{width:18px;height:18px;stroke:#f05222}
html.in-app .app-ptr.spin svg{animation:appSpin .8s linear infinite}
@keyframes appSpin{to{transform:rotate(360deg)}}

/* full-screen search: below the status bar */
html.in-app .qs-in{padding-top:calc(8px + var(--sat))!important}

/* ================= page by page: built for the app ================= */
html.in-app{--top:calc(var(--sat) + var(--hdr))}
html.in-app:has(.main>.testbar){--top:calc(var(--sat) + var(--hdr) + 21px)}
html.in-app .crumb{display:none}                       /* the header already says where you are */
html.in-app .page>h1:first-child+.sub,html.in-app .page .sub{font-size:13px}
html.in-app body{font-size:15px}

/* buttons + chips: finger-sized */
html.in-app .page .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:12px;font-size:15px}
html.in-app .page .btn.sm{min-height:38px;padding:0 14px}
html.in-app .page a.chip{min-height:32px;display:inline-flex;align-items:center;padding:0 12px;font-size:13px}
html.in-app .page input:not([type=checkbox]):not([type=radio]):not([type=file]),html.in-app .page select{min-height:46px;border-radius:12px}
html.in-app .page textarea{border-radius:12px}

/* segmented tabs stick under the header while scrolling */
html.in-app .page .tabs{position:sticky;top:calc(var(--top) + 6px);z-index:20;box-shadow:0 0 0 6px var(--bg,#fbf5ee),0 4px 12px 6px rgba(46,17,19,.06);-webkit-overflow-scrolling:touch}
html.in-app .page .tabs a{padding:8px 14px;font-size:13px}

/* tables -> iPhone list rows: full width, one tap target per row, chevron */
html.in-app .page .card:has(>table.t){padding:0;overflow:hidden}
html.in-app .page .card:has(>table.t)>h3{padding:14px 14px 4px}
html.in-app .t thead{display:none}
html.in-app .t tbody tr{display:block;position:relative;padding:12px 36px 12px 14px!important;border-bottom:.5px solid var(--line)!important;min-height:52px}
html.in-app .t tbody tr:last-child{border-bottom:0!important}
html.in-app .t tbody tr.app-row::after{content:'';position:absolute;right:16px;top:50%;width:8px;height:8px;margin-top:-5px;border-right:2px solid #c9b8b0;border-top:2px solid #c9b8b0;transform:rotate(45deg)}
html.in-app .t tbody tr.app-row:active{background:#f3e9e1}
html.in-app .t td{display:block;padding:1px 0!important;border:0!important}
html.in-app .t td:first-child{font-size:16px!important;font-weight:600}
html.in-app .t td:nth-child(n+3){display:inline-block;margin:4px 6px 0 0;vertical-align:middle}
html.in-app .t td:nth-child(n+3):empty{display:none}
html.in-app .t td.num{position:absolute;right:36px;top:12px;margin:0}

/* leads board: grouped list with sticky section headers, no card-in-card */
html.in-app .board .col{background:transparent!important;padding:0!important;border-radius:0;margin-bottom:18px}
html.in-app .board .col h4{position:sticky;top:calc(var(--top) + 52px);z-index:10;margin:0 -14px 8px!important;padding:8px 18px;background:rgba(251,245,238,.96);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:13px!important;letter-spacing:.04em;color:#7d6164}
html.in-app .board .lc{border-radius:14px;margin-bottom:8px;box-shadow:0 1px 2px rgba(46,17,19,.06)}
html.in-app .board .lc:active{transform:scale(.985);transition:transform .08s}

/* cards: flatter, iOS grouped style */
html.in-app .page .card{border-radius:16px;box-shadow:none;border:0}
html.in-app .page .card .card{border:.5px solid var(--line);background:transparent}

/* bottom sheets (forms that used to open inside the page) */
html.in-app .app-sheet-scrim{position:fixed;inset:0;z-index:79;background:rgba(20,6,8,.38);animation:appFade .2s}
html.in-app details[open]>.app-sheet-body{position:fixed;left:0;right:0;bottom:var(--kb,0px);z-index:80;background:#fff;border-radius:18px 18px 0 0;
  padding:6px 16px calc(18px + var(--sab));max-height:calc(100vh - var(--sat) - 40px - var(--kb,0px));overflow:auto;-webkit-overflow-scrolling:touch;
  box-shadow:0 -10px 40px rgba(0,0,0,.22);animation:sheetUp .24s cubic-bezier(.2,.8,.2,1);text-align:left}
html.in-app .app-sheet-grab{width:38px;height:5px;border-radius:3px;background:#d8ccc5;margin:4px auto 6px}
html.in-app .app-sheet-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:4px 0 10px;border-bottom:.5px solid var(--line);margin-bottom:10px}
html.in-app .app-sheet-head b{font:600 17px -apple-system,system-ui;color:#2a1316}
html.in-app .app-sheet-head button{border:0;background:none;color:#f05222;font:600 16px -apple-system,system-ui;padding:8px 0 8px 12px}
html.in-app details[open].app-sheet>summary{visibility:hidden}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:none}}
@keyframes appFade{from{opacity:0}to{opacity:1}}

/* no sideways scrolling anywhere */
html.in-app .page{overflow-x:clip}
html.in-app .page img,html.in-app .page table:not(.t){max-width:100%}

/* document viewer page */
html.in-app body>.bar{padding:calc(6px + var(--sat)) 10px 8px!important;gap:6px}
html.in-app body>.bar #zo,html.in-app body>.bar #zi{display:none}
html.in-app body>.bar .nm{order:1;flex-basis:100%;text-align:center;font-size:15px}
html.in-app body>.bar a,html.in-app body>.bar button{order:2;min-height:36px;display:inline-flex;align-items:center}
html.in-app body>.bar .app-vback{order:0;background:none!important;color:#fff!important;padding:0 6px!important;font-size:17px!important}

html.in-app .main>.top>.app-title{display:block!important;line-height:var(--hdr);text-align:center;padding:0 4px}
html.in-app .app-back span{display:none}
html.in-app .app-back{width:44px;justify-content:center}
html.in-app .app-back svg{width:13px;height:22px}
html.in-app .app-left,html.in-app .app-right{min-width:0}
html.in-app .main>.top>.app-left{width:124px}
html.in-app .main>.top>.app-right{width:124px}
html.in-app .payhead{flex-wrap:wrap!important;gap:12px}
html.in-app .payhead>.grow{flex-basis:100%}
html.in-app .payhead>.acts{display:flex;flex-wrap:wrap;gap:8px;width:100%}
html.in-app .payhead>.acts>*{flex:1}
html.in-app .main>.top>.app-left{width:auto;min-width:44px}
html.in-app .main>.top>.app-title{text-align:left;padding:0 6px 0 2px}
html.in-app .main>.top>.app-right{width:auto}
/* body/html overflow-x:hidden (theme) turns body into a scroll box and breaks sticky headers: clip instead */
html.in-app,html.in-app body{overflow-x:clip!important;overflow-y:visible!important}

/* full page loads (forms): keep the old page on screen until the new one is ready, header + tabs stay put */
html.in-app .main>.top{view-transition-name:mml-hdr}
html.in-app .bnav{view-transition-name:mml-tabs}
::view-transition-old(root),::view-transition-new(root){animation-duration:.12s}
html.in-app .app-back{text-decoration:none}
html.in-app .app-mark{display:block}

/* in-page jumps (Dashboard boxes -> #tasks etc.) land below the fixed header, not under it */
html.in-app .page [id]{scroll-margin-top:calc(var(--top) + 10px)}
/* company logo (top left) -> "me" menu: account + Settings sections (native.js openMe) */
html.in-app .app-mark{cursor:pointer}
html.in-app .app-menu.app-me{left:10px;right:auto;min-width:250px;max-width:calc(100vw - 20px);max-height:calc(100vh - var(--sat) - var(--hdr) - 30px);overflow-y:auto;-webkit-overflow-scrolling:touch}
html.in-app .app-me .app-me-hd{display:flex;align-items:center;gap:12px;padding:14px 16px}
html.in-app .app-me-av{width:40px;height:40px;border-radius:50%;background:#4c1d21;color:#fff;display:flex;align-items:center;justify-content:center;font:600 15px -apple-system,system-ui;flex:none}
html.in-app .app-me-nm{display:flex;flex-direction:column;line-height:1.25}
html.in-app .app-me-nm small{color:#8a7a76;font-size:13px;font-weight:400}
html.in-app .app-me-lab{padding:10px 18px 4px;font:600 12px -apple-system,system-ui;letter-spacing:.04em;text-transform:uppercase;color:#8a7a76}
html.in-app .app-me .app-me-all{font-weight:600}
html.in-app .app-me .app-me-out{color:#c0321e}