/* Liquify Time Tracker · phone.css
   Phone and installed-app styles: safe areas, no zoom, bottom tab bar, Settings list. */
/* ---------- phone polish ---------- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
button,select,summary,[role="button"]{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.item,.rbtn,.chip{-webkit-tap-highlight-color:transparent}
body{overscroll-behavior-y:contain}
@media (max-width:820px){
  #app{min-height:100vh;min-height:100dvh}
  input,select,textarea{font-size:16px} /* iPhones zoom the page when a field under 16px is focused */
  main{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right));padding-bottom:calc(32px + env(safe-area-inset-bottom))}
  .mobbar{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
  #side{padding-bottom:calc(22px + env(safe-area-inset-bottom))}
  #login{padding-left:max(24px,env(safe-area-inset-left));padding-right:max(24px,env(safe-area-inset-right))}
}
@media (pointer:coarse){
  button.sm,.chip,.fbtn{min-height:40px}
  .btns button{min-height:52px}
}
/* ---------- phone app mode: no zoom, no sideways scroll, bottom tab bar, tighter spacing ---------- */
@media (max-width:820px){
  html{touch-action:pan-y}
  html,body{max-width:100%;overflow-x:clip}
  main{min-width:0;overflow-x:clip}
  img,video{max-width:100%;height:auto}
  .wrap{overscroll-behavior-x:contain}
  /* status bar area blends into the navy top bar (installed iPhone app) */
  body::before{content:"";position:fixed;top:0;left:0;right:0;height:env(safe-area-inset-top);background:#1b252f;z-index:60;pointer-events:none}
  .mobbar{padding-top:calc(10px + env(safe-area-inset-top))}
  #side{padding-top:calc(22px + env(safe-area-inset-top))}
  /* the bell and menu moved to the bottom tab bar */
  .mobbar button:nth-of-type(1),.mobbar button:nth-of-type(2){display:none}
  .mobbar{padding-left:max(16px,env(safe-area-inset-left))}
  /* tighter, so there is less scrolling */
  .topbar{padding:12px 0 8px}
  .topbar h1{font-size:21px}.topbar h1.lc{font-size:24px}
  .card{padding:14px 16px;margin-bottom:12px;border-radius:16px}
  .kpi{min-height:0;padding:14px 16px}
  .btns{margin:10px 0 12px;gap:8px}
  main{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right));padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  /* bottom tab bar */
  #botnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:12;background:var(--rail);border-top:1px solid var(--line);padding:4px max(4px,env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) max(4px,env(safe-area-inset-left))}
  #app.hide ~ #botnav,body:has(input:focus,textarea:focus,select:focus) #botnav{display:none}
  #botnav button{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:52px;padding:6px 2px;background:none;color:var(--mute);border-radius:12px;position:relative;font-size:11px;font-weight:600}
  #botnav button:hover{background:none}
  #botnav button.on{color:var(--ink)}
  #botnav button.on::before{content:"";position:absolute;top:0;left:30%;right:30%;height:3px;border-radius:0 0 3px 3px;background:var(--caramel)}
  #botnav .bl{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.1}
  #botnav svg{width:22px;height:22px}
  #botnav .badge{position:absolute;top:2px;left:calc(50% + 4px)}
}
#botnav{display:none}
@media (max-width:820px){#botnav{display:flex}}
/* Settings tables on phones: each row becomes a small card, so nothing scrolls sideways */
@media (max-width:820px){
  .mobonly{display:inline}
  #uTable,#uTable tbody,#sTable,#sTable tbody,#bulkPrev,#bulkPrev tbody{display:block;width:100%}
  #uTable tr:first-child:has(th),#sTable tr:first-child:has(th){display:none}
  #uTable tr,#sTable tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 10px;align-items:start;padding:12px 0;border-bottom:1px solid var(--line)}
  #uTable td,#sTable td{display:block;padding:0;border:0;white-space:normal;min-width:0;text-align:left}
  #uTable td:nth-child(2),#uTable td:nth-child(3),#sTable td:nth-child(2),#sTable td:nth-child(3),#sTable td:nth-child(4){display:none}
  #uTable td:nth-child(1){grid-column:1}
  #uTable td:nth-child(4){grid-column:2;grid-row:1;white-space:nowrap}
  #uTable td:nth-child(5),#sTable td:nth-child(5){grid-column:1/-1}
  #sTable td:nth-child(1){grid-column:1/-1}
  #uTable .acts-row,#sTable .acts-row{justify-content:flex-start;flex-direction:row}
  #uTable td.empty,#sTable td.empty{grid-column:1/-1}
  #bulkPrev{table-layout:fixed}
  #bulkPrev th,#bulkPrev td{white-space:normal;word-break:break-word;padding:6px 4px;font-size:12px}
}
/* Settings as a list on phones */
.slback{display:none}
@media (max-width:820px){
  #v-settings .subnav{display:block;overflow:visible;padding:0}
  #v-settings .subnav .grp{display:block;flex:none;margin:0 0 16px}
  #v-settings .subnav h4{display:block;margin:0 4px 8px;padding:0}
  #v-settings .subnav button{width:100%;justify-content:flex-start;white-space:normal;gap:12px;padding:15px 16px;font-size:15px;font-weight:600;border-radius:0;background:var(--card);color:var(--ink);border:1px solid var(--line);border-top-width:0}
  #v-settings .subnav button.on{background:var(--card);color:var(--ink)}
  #v-settings .subnav h4 + button{border-top-width:1px;border-radius:14px 14px 0 0}
  #v-settings .subnav button:last-child{border-radius:0 0 14px 14px}
  #v-settings .subnav h4 + button:last-child{border-radius:14px}
  #v-settings .subnav button::after{content:"\203A";margin-left:auto;color:var(--taupe);font-size:22px;line-height:1}
  #v-settings.sl-list .setpage{display:none}
  #v-settings:not(.sl-list) .subnav{display:none}
  #v-settings:not(.sl-list) .slback{display:inline-flex;align-items:center;gap:4px;background:none;color:var(--ink);padding:8px 6px 8px 0;margin:0 0 4px;font-size:16px;font-weight:600;min-height:44px}
  #v-settings:not(.sl-list) .slback:hover{background:none}
}