/* LandlordHub shared mobile layer (V97).
 * Page-specific mobile rules remain in each page; portal shell rules live in landlordhub-portal.css.
 * Everything here is scoped to phone widths or to the shared .lh-tabbar component, so desktop is unchanged. */

/* ---- base: no sideways wobble, no tap delay ------------------------------- */
@media(max-width:860px){
  /* "clip" stops sideways scrolling without breaking sticky headers (unlike "hidden"). */
  html,body{overflow-x:hidden;overflow-x:clip;}
  img{max-width:100%;height:auto;}
  button,a,label,summary,[role=button]{touch-action:manipulation;-webkit-tap-highlight-color:rgba(200,162,74,.18);}
  /* iPhone zooms the page when a field's text is under 16px. */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea{font-size:16px!important;}
  /* Comfortable tap sizes (Apple/Google guideline is ~44px). */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=hidden]),select{min-height:44px;}
  .btn-gold,.btn-outline,.btn,.btn-primary,.btn-secondary,.btn-icon,.btn-dark,.btn-ghost{min-height:44px;}
  .btn-icon{min-width:44px;}
  button:disabled,.btn-outline:disabled,.btn-gold:disabled{opacity:.45;cursor:not-allowed;}
  .table-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
}
@media(orientation:landscape) and (max-width:1000px){
  html{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);}
}
html.lh-sheet-open,html.lh-sheet-open body{overflow:hidden;}

/* ---- shared app tab bar (landlord + tenant) -------------------------------- */
.lh-tabbar,.lh-sheet{display:none;}
@media(max-width:860px){
  body.lh-shell:not(.portal-page){padding-bottom:calc(76px + env(safe-area-inset-bottom));}
  body.lh-shell:not(.portal-page) .lh-tabbar{display:flex;}
  /* replaced by .lh-tabbar */
  body.lh-shell:not(.portal-page) .lh-mobile-nav,
  body.lh-shell:not(.portal-page) .lh-bottom-nav,
  body.lh-shell:not(.portal-page) .mobile-bottom,
  body.lh-shell:not(.portal-page) .lh-menu-btn{display:none!important;}
}
@media(max-width:760px){
  body.lh-shell.portal-page{padding-bottom:calc(76px + env(safe-area-inset-bottom));}
  body.lh-shell.portal-page .lh-tabbar{display:flex;}
  body.lh-shell.portal-page .lh-mobile-nav,
  body.lh-shell.portal-page .lh-bottom-nav,
  body.lh-shell.portal-page .mobile-bottom,
  body.lh-shell.portal-page .lh-menu-btn{display:none!important;}
}
.lh-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:9000;justify-content:space-around;align-items:stretch;
  background:#17281C;border-top:1px solid rgba(200,162,74,.28);box-shadow:0 -6px 20px rgba(0,0,0,.18);
  padding:4px max(4px,env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) max(4px,env(safe-area-inset-left));
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;}
.lh-tabbar a,.lh-tabbar button{flex:1 1 0;min-width:0;min-height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  background:none;border:0;margin:0;padding:6px 0;border-radius:12px;color:#C9D0C7!important;text-decoration:none!important;
  font-family:inherit;font-weight:600;font-size:10.5px;line-height:1.1;letter-spacing:0;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.lh-tabbar svg{width:23px;height:23px;flex:0 0 auto;}
.lh-tabbar span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.lh-tabbar .is-active{color:#E1BF63!important;}
.lh-tabbar .is-active svg{stroke-width:2.3;}
.lh-tabbar a:active,.lh-tabbar button:active{background:rgba(255,255,255,.07);}
.lh-tabbar :focus-visible{outline:2px solid #C8A24A;outline-offset:-2px;}

/* "More" bottom sheet */
.lh-sheet{position:fixed;inset:0;z-index:9500;background:rgba(10,18,12,0);transition:background .18s ease;}
.lh-sheet:not([hidden]){display:block;}
.lh-sheet.is-open{background:rgba(10,18,12,.5);}
.lh-sheet-panel{position:absolute;left:0;right:0;bottom:0;max-height:85vh;overflow-y:auto;overscroll-behavior:contain;
  background:#FFFDF7;color:#191914;border-radius:20px 20px 0 0;box-shadow:0 -12px 40px rgba(0,0,0,.25);
  padding:8px 12px calc(16px + env(safe-area-inset-bottom));transform:translateY(100%);transition:transform .2s ease;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;}
.lh-sheet.is-open .lh-sheet-panel{transform:none;}
.lh-sheet-grab{width:40px;height:5px;border-radius:3px;background:#DCD2B4;margin:4px auto 10px;}
.lh-sheet-head{display:flex;align-items:center;justify-content:space-between;padding:0 6px 8px;}
.lh-sheet-head h2{margin:0;font-size:17px;font-weight:800;color:#17281C;}
.lh-sheet-close{width:44px;height:44px;border:0;border-radius:50%;background:#F3EAD0;color:#17281C;font-size:22px;line-height:1;cursor:pointer;}
.lh-sheet-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
.lh-sheet-grid a,.lh-sheet-grid button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;min-height:84px;padding:10px 6px;
  border:1px solid #E1D7BA;border-radius:14px;background:#fff;color:#191914!important;text-decoration:none!important;font-family:inherit;font-weight:600;font-size:12.5px;line-height:1.2;text-align:center;cursor:pointer;}
.lh-sheet-grid svg{width:24px;height:24px;color:#8E6C27;}
.lh-sheet-grid a.is-active{border-color:#C8A24A;background:#FBF3DC;}
.lh-sheet-grid [data-lh-signout]{color:#B0503F!important;}
.lh-sheet-grid [data-lh-signout] svg{color:#B0503F;}
@media(prefers-reduced-motion:reduce){.lh-sheet,.lh-sheet-panel{transition:none;}}

/* keep floating messages clear of the tab bar */
@media(max-width:860px){
  body.lh-shell .lh-access-toast{bottom:calc(88px + env(safe-area-inset-bottom))!important;}
  body.lh-shell #lhInstallBanner{bottom:calc(84px + env(safe-area-inset-bottom))!important;}
}

/* ---- header search on phones: give the search box the room ----------------- */
@media(max-width:760px){
  body.lh-shell .topbar .user-name,body.lh-shell .topbar .user-role,
  body.lh-shell .topbar-right .user > div:not(.avatar){display:none!important;}
  body.lh-shell .topbar .search{flex:1 1 auto;width:auto!important;min-width:0;}
}

/* compliance date pickers: the narrow native date input is an icon button; hide its clipped text */
.date-dual .c-date-calendar{color:transparent!important;}

/* iPhone/iPad "Add to Home Screen" hint (js/landlordhub-pwa.js) */
.lh-ios-hint{position:fixed;left:12px;right:12px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:9400;display:flex;gap:12px;align-items:center;
  background:#1F3324;color:#F7F3E8;border:1px solid rgba(200,162,74,.45);border-radius:16px;padding:12px 14px;box-shadow:0 14px 40px rgba(0,0,0,.28);
  font:500 14px/1.4 Inter,ui-sans-serif,system-ui,-apple-system,sans-serif;}
body.lh-shell .lh-ios-hint{bottom:calc(84px + env(safe-area-inset-bottom));}
.lh-ios-hint img{width:40px;height:40px;border-radius:10px;flex:0 0 auto;}
.lh-ios-hint div{flex:1;min-width:0}.lh-ios-hint strong{display:block}.lh-ios-hint svg{vertical-align:-3px}
.lh-ios-hint button{flex:0 0 auto;width:44px;height:44px;border:0;background:transparent;color:#F7F3E8;font-size:24px;cursor:pointer;}

/* header bell badge: hidden until there are unread notifications */
.bell .dot[hidden]{display:none!important;}

/* ---- compact page header on phones (search + bell + avatar row) ------------- */
@media(max-width:860px){
  body.lh-shell:not(.portal-page) .topbar{gap:10px!important;margin:0 0 14px!important;padding:0!important;height:auto!important;border:0!important;}
  body.lh-shell:not(.portal-page) .topbar .search{flex:1 1 auto!important;max-width:none!important;height:44px!important;min-height:44px;padding:0 12px!important;border-radius:12px!important;}
  body.lh-shell:not(.portal-page) .topbar .search input{min-height:0!important;height:100%;padding:0!important;}
  body.lh-shell:not(.portal-page) .topbar-right{gap:8px!important;flex:0 0 auto;}
  body.lh-shell:not(.portal-page) .topbar .bell{width:44px!important;height:44px!important;}
  body.lh-shell:not(.portal-page) .topbar .avatar{width:40px!important;height:40px!important;}
  body.lh-shell:not(.portal-page) .topbar .user-name,body.lh-shell:not(.portal-page) .topbar .user-role{display:none!important;}
  body.lh-shell:not(.portal-page) .main{padding-top:14px!important;}
}

/* ---- V133: dashboard scroll boxes ------------------------------------------
 * Lists on the dashboards (documents, upcoming dates, repairs, activity,
 * messages, viewings, properties) keep a steady height and scroll inside
 * themselves instead of stretching the page. Wired up by js/landlordhub-scrollbox.js. */
.lh-scrollbox{
  --lh-sb-h:440px;
  max-height:var(--lh-sb-h);
  overflow-y:auto;overflow-x:hidden;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:rgba(142,108,39,.45) transparent;
  scroll-behavior:smooth;
  padding-right:6px;margin-right:-6px;
  position:relative;
}
#attentionList.lh-scrollbox{--lh-sb-h:360px;}
#vwList.lh-scrollbox{--lh-sb-h:560px;}
#propTable .table-wrap.lh-scrollbox{--lh-sb-h:620px;overflow-x:auto;padding-right:0;margin-right:0;}
#propTable .table-wrap.lh-scrollbox thead th{position:sticky;top:0;z-index:2;background:var(--card,#fffdf8);box-shadow:inset 0 -1px 0 rgba(23,40,28,.1);}
.lh-scrollbox::-webkit-scrollbar{width:8px;height:8px;}
.lh-scrollbox::-webkit-scrollbar-track{background:transparent;}
.lh-scrollbox::-webkit-scrollbar-thumb{background:rgba(142,108,39,.35);border-radius:99px;border:2px solid transparent;background-clip:padding-box;}
.lh-scrollbox:hover::-webkit-scrollbar-thumb{background-color:rgba(142,108,39,.6);}
.lh-scrollbox:focus-visible{outline:2px solid #C8A24A;outline-offset:4px;border-radius:10px;}
/* Soft fades show there is more above/below; they vanish at the ends. */
.lh-scrollbox.lh-sb-more:not(.lh-sb-end){
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 44px),transparent 100%);
          mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 44px),transparent 100%);
}
.lh-scrollbox.lh-sb-more.lh-sb-scrolled:not(.lh-sb-end){
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 28px,#000 calc(100% - 44px),transparent 100%);
          mask-image:linear-gradient(to bottom,transparent 0,#000 28px,#000 calc(100% - 44px),transparent 100%);
}
.lh-scrollbox.lh-sb-more.lh-sb-scrolled.lh-sb-end{
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 28px);
          mask-image:linear-gradient(to bottom,transparent 0,#000 28px);
}
@media(max-width:860px){
  .lh-scrollbox{--lh-sb-h:min(380px,62vh);}
  #attentionList.lh-scrollbox{--lh-sb-h:min(320px,55vh);}
  #vwList.lh-scrollbox,#propTable .table-wrap.lh-scrollbox{--lh-sb-h:min(520px,70vh);}
}
@media print{.lh-scrollbox{max-height:none!important;overflow:visible!important;-webkit-mask-image:none!important;mask-image:none!important;}}

/* ---- V135: the dark sidebar always runs the full length of the page ---------
 * The sidebar itself stays pinned while you scroll; this paints the same colour
 * behind it for the whole height of the page (long pages, printing, zooming).
 * Width and colour are copied from the real sidebar by js/landlordhub-pwa.js. */
@media(min-width:861px){
  body .app{position:relative}
  body .app.lh-sb-fill::before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--lh-sbw,0px);background:var(--lh-sbbg,#17281C);z-index:0;pointer-events:none}
  body .app.lh-sb-fill>.sidebar{z-index:20}
}

/* V143: bigger tap areas on touch screens (Google flags anything under ~44px). */
@media (pointer: coarse) {
  html .stat-link{padding:9px 0;margin-top:2px}
  html .ex-lnk{padding:9px 2px}
  html .lh-cal-btn,html .c-card .date-dual .lh-cal-btn{width:40px;height:40px;flex-basis:40px}
  html .ex-del{padding:10px 2px}
  html .photo-change,html .change-photo{min-height:36px;padding-left:10px;padding-right:10px}
  html .lh-tabbar a,html .lh-tabbar button{min-height:48px}
}