/* 📱 App mode — only inside the Android / iPhone / computer app (html.pj-app is set by the first script on the page).
   The website in a normal browser is untouched. Shared parts first, then the customer site (.pj-site) and the agent portal (.pj-agent). */
html.pj-app{-webkit-tap-highlight-color:transparent;scroll-padding-top:70px}
html.pj-app body{font-size:16.5px;line-height:1.65;padding-bottom:calc(78px + env(safe-area-inset-bottom));overscroll-behavior-y:contain}
html.pj-app body>footer,html.pj-app [data-getapp],html.pj-app .pjgab{display:none!important}

/* inputs & buttons big enough for a thumb (16px+ text also stops the phone zooming in) */
html.pj-app input:not([type=checkbox]):not([type=radio]):not([type=file]),html.pj-app select,html.pj-app textarea{font-size:16px!important;min-height:48px;border-radius:12px!important}
html.pj-app textarea{min-height:96px}
html.pj-app button,html.pj-app .btn{min-height:44px}
html.pj-app label{font-size:.92rem}

/* 🔝 app header */
.pja-head{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;padding:calc(8px + env(safe-area-inset-top)) 14px 8px;background:var(--brand,#2C6B5E);color:#fff;min-height:58px;box-shadow:0 2px 10px rgba(0,0,0,.12)}
.pja-head .pja-logo{width:36px;height:36px;border-radius:10px;flex:0 0 36px;background:rgba(255,255,255,.14) url(/img/icon-192.png) center/cover}
.pja-head .pja-t{flex:1;min-width:0;line-height:1.25}
.pja-head .pja-t b{display:block;font-size:1.06rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pja-head .pja-t small{display:block;font-size:.78rem;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pja-head .pja-ib{flex:0 0 auto;min-width:44px;height:44px;border-radius:12px;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:1.25rem;display:inline-flex;align-items:center;justify-content:center;gap:4px;text-decoration:none;cursor:pointer;padding:0 10px;position:relative;font-family:inherit}
.pja-head .pja-back{font-size:1.5rem;background:transparent;min-width:40px;padding:0}
.pja-dot{position:absolute;top:4px;inset-inline-end:4px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#D64545;color:#fff;font-size:.7rem;font-weight:800;line-height:18px;text-align:center}



/* 🏠 home screen */
/* ⬇️ bottom tab bar — big icons, the open one sits in a soft pill */
.pja-nav{position:fixed;inset-inline:0;bottom:0;z-index:25;display:flex;background:var(--surface,#fff);border-top:1px solid var(--line,#D2DAD7);padding:6px 6px calc(6px + env(safe-area-inset-bottom));box-shadow:0 -6px 22px rgba(0,0,0,.07)}
.pja-nav button{flex:1;min-width:0;border:0;background:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:4px 2px;min-height:66px;color:var(--muted,#5A6663);font:inherit;font-size:.8rem;font-weight:700;cursor:pointer;position:relative}
.pja-nav button i{font-style:normal;font-size:1.75rem;line-height:1;display:flex;align-items:center;justify-content:center;width:62px;height:36px;border-radius:18px;transition:background .15s}
.pja-nav button span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.pja-nav button[aria-current="true"]{color:var(--brand,#2C6B5E)}
.pja-nav button[aria-current="true"] i{background:color-mix(in srgb,var(--brand,#2C6B5E) 15%,transparent)}
.pja-nav .pja-dot{top:0;inset-inline-end:calc(50% - 30px)}
/* 🏠 tiles */
.pja-grp{margin:22px 4px 10px;font-size:1.02rem;color:var(--ink,#1D2321);font-weight:800}
.pja-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.pja-tiles.three{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.pja-tile{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:8px;padding:16px 10px 14px;min-height:150px;border-radius:22px;border:1px solid var(--line,#D2DAD7);background:var(--surface,#fff);color:var(--ink,#1D2321);text-align:center;font:inherit;cursor:pointer;text-decoration:none;box-shadow:0 2px 6px rgba(16,24,20,.05);position:relative;-webkit-user-select:none;user-select:none}
.pja-tile:active{transform:scale(.97)}
.pja-tile>i{font-style:normal;font-size:2.4rem;line-height:1;width:72px;height:72px;flex:0 0 72px;border-radius:22px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--brand,#2C6B5E) 11%,var(--surface,#fff))}
.pja-tile>span{display:block;min-width:0;width:100%}
.pja-tile b{display:block;font-size:1.04rem;line-height:1.3}
.pja-tile small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:.82rem;color:var(--muted,#5A6663);line-height:1.45;margin-top:3px}
.pja-tile br{display:none}
.pja-tiles.three .pja-tile{min-height:122px;padding:14px 6px 12px;border-radius:20px;gap:8px}
.pja-tiles.three .pja-tile>i{width:60px;height:60px;flex-basis:60px;font-size:2.05rem;border-radius:18px}
.pja-tiles.three .pja-tile b{font-size:.9rem}
.pja-tiles.three .pja-tile small{display:none}
.pja-tile.big{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:flex-start;gap:14px;min-height:104px;padding:16px 18px;text-align:start;background:linear-gradient(135deg,var(--brand,#2C6B5E),color-mix(in srgb,var(--brand,#2C6B5E) 70%,#000));color:#fff;border-color:transparent;box-shadow:0 8px 20px color-mix(in srgb,var(--brand,#2C6B5E) 30%,transparent)}
.pja-tile.big>i{background:rgba(255,255,255,.16);width:76px;height:76px;flex-basis:76px;font-size:2.7rem}
.pja-tile.big b{font-size:1.25rem}
.pja-tile.big small{color:rgba(255,255,255,.88);font-size:.9rem}
.pja-tile .pja-dot{top:10px;inset-inline-end:10px}
.pja-home{padding:14px 2px 8px}
.pja-hi{margin:2px 2px 14px}
.pja-hi h2{margin:0;font-size:1.35rem;line-height:1.3}
.pja-hi p{margin:2px 0 0;color:var(--muted,#5A6663);font-size:.95rem}

/* pop-up windows → bottom sheets that fill the phone */
html.pj-app .ov{align-items:flex-end!important;padding:0!important;overflow:hidden!important;z-index:40!important}
html.pj-app .ov .sheet .form{border:0;padding:0}
html.pj-app .ov>.sheet{width:100%!important;max-width:100%!important;max-height:calc(100dvh - 10px - env(safe-area-inset-top));overflow:auto;border-radius:22px 22px 0 0!important;padding-bottom:env(safe-area-inset-bottom);animation:pjaUp .22s ease-out;overscroll-behavior:contain}
@keyframes pjaUp{from{transform:translateY(40px);opacity:.6}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){html.pj-app .ov>.sheet{animation:none}}
html.pj-app .ov>.sheet::before{content:"";display:block;width:44px;height:5px;border-radius:3px;background:var(--line,#D2DAD7);margin:8px auto 0}

/* chat: opened from the header button; the floating bubble would sit on the content */
html.pj-app .pjc-b{display:none!important}
.pja-wa svg{width:24px;height:24px;fill:#fff}
.pja-tile>i.pja-wa svg{width:38px;height:38px}
html.pj-app .pjc-p{bottom:calc(84px + env(safe-area-inset-bottom))!important;height:min(540px,calc(100dvh - 220px))!important}

/* ================= customer site ================= */
html.pj-app.pj-site .band{display:none!important}
html.pj-app.pj-site main{padding:0 14px 20px}
html.pj-app.pj-site main>.wrap{margin-top:0!important;background:transparent!important;box-shadow:none!important;border:0!important;padding:0!important;border-radius:0!important}
html.pj-app.pj-site main>.wrap>.tabs{display:none!important}
html.pj-app.pj-site.pja-at-home main>.wrap>section{display:none!important}
html.pj-app.pj-site:not(.pja-at-home) .pja-home{display:none}
html.pj-app.pj-site main>.wrap>section{padding-top:12px}
html.pj-app.pj-site #revWrap{padding:0 14px}
html.pj-app.pj-site:not(.pja-at-home) #revWrap{display:none!important}
html.pj-app.pj-site .grid{grid-template-columns:1fr!important;gap:12px}
html.pj-app.pj-site .card{padding:16px;border-radius:16px;gap:8px}
html.pj-app.pj-site .card h3{font-size:1.15rem}
html.pj-app.pj-site .price{font-size:1.25rem}
html.pj-app.pj-site .tag{font-size:.82rem;padding:3px 10px}
html.pj-app.pj-site .hs{grid-template-columns:repeat(2,minmax(0,1fr))!important;padding:14px;border-radius:18px;gap:12px}
html.pj-app.pj-site .hs>label:first-child,html.pj-app.pj-site .hs .hsq{grid-column:1/-1}
html.pj-app.pj-site .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-14px;padding:2px 14px 6px}
html.pj-app.pj-site .chips::-webkit-scrollbar{display:none}
html.pj-app.pj-site .chips button{white-space:nowrap;padding:9px 16px;min-height:42px;flex:0 0 auto}
html.pj-app.pj-site .seg button{padding:11px 18px}
html.pj-app.pj-site .hsrch,html.pj-app.pj-site #aq{max-width:none!important;min-height:52px}
html.pj-app.pj-site .sheet header{padding:14px 18px}
html.pj-app.pj-site .sheet .body{padding:14px 16px}
html.pj-app.pj-site .form{grid-template-columns:1fr!important}
html.pj-app.pj-site .cta{position:sticky;bottom:0;background:var(--surface,#fff);padding:12px 16px calc(12px + env(safe-area-inset-bottom));z-index:2}
html.pj-app.pj-site .cta button,html.pj-app.pj-site .cta a{min-height:52px;font-size:1.02rem;min-width:0}
html.pj-app.pj-site .opts{grid-template-columns:repeat(2,minmax(0,1fr))}
html.pj-app.pj-site .opt{padding:12px;min-height:56px}
html.pj-app.pj-site .note{font-size:.85rem}

/* ================= agent portal ================= */
html.pj-app.pj-agent .band{display:none!important}
html.pj-app.pj-agent main{padding:12px 12px 20px}
html.pj-app.pj-agent #app>.tabs{display:none!important}
html.pj-app.pj-agent .kpis{display:flex;overflow-x:auto;gap:10px;scrollbar-width:none;margin:0 -12px 12px;padding:2px 12px 4px;scroll-snap-type:x proximity}
html.pj-app.pj-agent .kpis::-webkit-scrollbar{display:none}
html.pj-app.pj-agent .kpi{flex:0 0 auto;min-width:150px;border-radius:16px;padding:12px 14px;scroll-snap-align:start}
html.pj-app.pj-agent .kpi .v{font-size:1.4rem}
html.pj-app.pj-agent .panel{border-radius:18px;padding:14px}
html.pj-app.pj-agent .grid{grid-template-columns:1fr!important}
html.pj-app.pj-agent .card{padding:14px 16px;border-radius:16px}
html.pj-app.pj-agent .card h3{font-size:1.12rem}
html.pj-app.pj-agent .form{grid-template-columns:1fr!important;gap:12px}
html.pj-app.pj-agent .form .half{grid-column:auto}
html.pj-app.pj-agent .btn{padding:12px 18px;border-radius:12px;font-size:1rem}
html.pj-app.pj-agent .filters,html.pj-app.pj-agent .seg{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-12px;padding:2px 12px 6px}
html.pj-app.pj-agent .filters::-webkit-scrollbar,html.pj-app.pj-agent .seg::-webkit-scrollbar{display:none}
html.pj-app.pj-agent .filters button,html.pj-app.pj-agent .seg button{flex:0 0 auto;white-space:nowrap;padding:9px 16px;min-height:42px;font-size:.92rem}
html.pj-app.pj-agent table{font-size:.95rem}
html.pj-app.pj-agent th,html.pj-app.pj-agent td{padding:10px 8px}
html.pj-app.pj-agent .sheet{padding:14px 16px 18px!important;gap:14px}
html.pj-app.pj-agent .alert{border-radius:16px}
html.pj-app.pj-agent .auth{margin:16px auto}
html.pj-app.pj-agent .pja-title{display:flex;align-items:center;gap:8px;margin:2px 0 12px;font-size:1.25rem;font-weight:800}
html.pj-app.pj-agent.pja-inner #topk .kpis{display:none}
/* tables become one card per row, each value with its column title */
html.pj-app.pj-agent .tbl{overflow:visible}
html.pj-app table.pja-cards,html.pj-app table.pja-cards tbody,html.pj-app table.pja-cards tr,html.pj-app table.pja-cards td{display:block;width:100%}
html.pj-app table.pja-cards thead,html.pj-app table.pja-cards tr:first-child:has(> th){display:none}
html.pj-app table.pja-cards tr{background:var(--surface,#fff);border:1px solid var(--line,#D2DAD7);border-radius:16px;padding:8px 12px;margin:0 0 10px}
html.pj-app table.pja-cards td{border:0;padding:7px 0;position:relative;text-align:start;border-bottom:1px dashed color-mix(in srgb,var(--line,#D2DAD7) 70%,transparent);min-height:20px}
html.pj-app table.pja-cards td[data-l]{padding-inline-start:36%}
html.pj-app table.pja-cards td:last-child{border-bottom:0}
html.pj-app table.pja-cards td[data-l]::before{content:attr(data-l);position:absolute;inset-inline-start:0;top:8px;width:33%;color:var(--muted,#5A6663);font-size:.85rem;font-weight:700;line-height:1.4}

html.pj-app table.pja-cards td:empty{display:none}
html.pj-app table.pja-cards td .btn,html.pj-app table.pja-cards td button{margin:2px}
html.pj-app.pj-agent .panel.tbl:has(table.pja-cards){background:none;border:0;padding:0;box-shadow:none}
html.pj-app table.pja-cards td.num{direction:rtl}

/* ================= staff system ================= */
html.pj-app.pj-staff body{font-size:16px}
html.pj-app.pj-staff .app{display:block!important}
html.pj-app.pj-staff .rail{position:sticky!important;top:0!important;z-index:22!important;min-height:62px;padding:calc(8px + env(safe-area-inset-top)) 12px 8px!important;gap:10px!important;display:flex!important;flex-direction:row!important;align-items:center!important;height:auto!important;overflow:visible!important}
html.pj-app.pj-staff .rail .brand>div{display:none}
html.pj-app.pj-staff .rail .brand img{width:40px;height:40px}
html.pj-app.pj-staff .mtoggle{display:inline-flex!important;flex:1;max-width:none!important;min-height:46px;font-size:1.05rem!important;padding:10px 14px!important;border-radius:14px!important;justify-content:flex-start}
html.pj-app.pj-staff .rail .who{margin:0!important;padding:0!important;border:0!important}
html.pj-app.pj-staff .rail .who .meT,html.pj-app.pj-staff:not(.pja-menu) .rail .who .meActs{display:none!important}
html.pj-app.pj-staff.pja-menu .rail .who .meActs{display:flex!important;gap:6px}
html.pj-app.pj-staff.pja-menu .mtoggle{display:none!important}
html.pj-app.pj-staff .rail .mwrap{position:fixed!important;top:calc(62px + env(safe-area-inset-top))!important;bottom:calc(78px + env(safe-area-inset-bottom))!important;inset-inline:0!important;max-height:none!important;overflow:auto!important;padding:12px 14px 20px!important;border-radius:0!important;box-shadow:none!important;z-index:21}
html.pj-app.pj-staff .rail .mwrap .mq{min-height:50px;font-size:16px;margin-bottom:10px;width:100%}
html.pj-app.pj-staff nav.menu{gap:4px}
html.pj-app.pj-staff nav.menu button{padding:13px 14px!important;font-size:1.04rem!important;border-radius:12px!important;min-height:50px}
html.pj-app.pj-staff nav.menu button.mhd{font-size:1.08rem!important;padding:14px 12px!important}
html.pj-app.pj-staff main{padding:14px 12px 24px!important;min-width:0}
html.pj-app.pj-staff .head{flex-direction:column;align-items:stretch!important;gap:10px}
html.pj-app.pj-staff .head h1{font-size:1.45rem}
html.pj-app.pj-staff .head .row{flex-wrap:wrap;gap:8px}
html.pj-app.pj-staff .head .row .btn{flex:1 1 auto}
html.pj-app.pj-staff .btn{min-height:46px;padding:11px 16px;border-radius:12px;font-size:.98rem}
html.pj-app.pj-staff .btn.small{min-height:40px;padding:8px 12px}
html.pj-app.pj-staff .kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px}
html.pj-app.pj-staff .kpi{border-radius:16px;padding:12px 14px}
html.pj-app.pj-staff .kpi .v{font-size:1.45rem}
html.pj-app.pj-staff .panel{border-radius:18px}
html.pj-app.pj-staff .form{grid-template-columns:1fr!important}
html.pj-app.pj-staff .form .f{min-width:0}
html.pj-app.pj-staff .tbl{overflow:visible!important;border:0!important;background:none!important}
html.pj-app.pj-staff .tabs,html.pj-app.pj-staff .filters,html.pj-app.pj-staff .fin-tabs{flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none;margin-inline:-12px;padding:2px 12px 8px}
html.pj-app.pj-staff .tabs::-webkit-scrollbar,html.pj-app.pj-staff .filters::-webkit-scrollbar,html.pj-app.pj-staff .fin-tabs::-webkit-scrollbar{display:none}
html.pj-app.pj-staff .tabs button,html.pj-app.pj-staff .filters button,html.pj-app.pj-staff .fin-tabs button{flex:0 0 auto;white-space:nowrap;min-height:42px;padding:9px 16px!important}
html.pj-app.pj-staff .modal,html.pj-app.pj-staff .sheet{max-width:100%!important}
html.pj-app.pj-staff #toast,html.pj-app.pj-staff .toast{bottom:calc(90px + env(safe-area-inset-bottom))!important}
/* the phone layout no matter how wide the page thinks it is (a wide table / long code made Chrome lay the page out like a computer) */
html.pj-app,html.pj-app body{overflow-x:hidden;max-width:100%}
html.pj-app td,html.pj-app th,html.pj-app .card,html.pj-app .panel{overflow-wrap:anywhere}
html.pj-app.pj-staff .app{grid-template-columns:minmax(0,1fr)!important}
html.pj-app.pj-staff .rail{border-inline:0!important;border-bottom:1px solid var(--rail-line,var(--line))!important;box-shadow:0 2px 10px rgba(30,43,39,.08);background:var(--rail,var(--surface))!important;width:100%!important;min-width:0!important}
html.pj-app.pj-staff .rail .brand{order:-2;min-width:0;flex:none}
html.pj-app.pj-staff .rail .who{order:-1;flex:none}
html.pj-app.pj-staff .rail .mwrap{display:none!important;background:var(--rail,var(--surface))!important}
html.pj-app.pj-staff .rail.mopen .mwrap,html.pj-app.pj-staff.pja-menu .rail .mwrap{display:block!important}
html.pj-app.pj-staff main{width:100%!important;max-width:100vw!important;overflow-x:hidden}
html.pj-app.pj-staff .grid2,html.pj-app.pj-staff .grid3{grid-template-columns:1fr!important}
html.pj-app .pja-row{flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none;margin-inline:-12px;padding:2px 12px 6px}
html.pj-app .pja-row::-webkit-scrollbar{display:none}
html.pj-app .pja-row>*{flex:0 0 auto;white-space:nowrap}

html.pj-app .pjc{bottom:calc(84px + env(safe-area-inset-bottom))!important}
html.pj-app .pjc.vid{bottom:0!important;inset:0!important;z-index:95}
html.pj-app .pjc.vid.mini{inset:auto!important;inset-inline-end:12px!important;bottom:calc(84px + env(safe-area-inset-bottom))!important}