/* ════════════════════════════════════════════════
   Phones and the installed app
   Loaded last. Keeps every page inside the screen
   width (tables still scroll sideways inside their
   own card), sized for thumbs, and stops iPhones
   zooming in when a field is tapped.
   ════════════════════════════════════════════════ */

/* the installed app has no browser bar: respect the notch and home bar */
@supports (padding:env(safe-area-inset-top)){
  .topbar{padding-top:max(12px, env(safe-area-inset-top))}
  .sidebar{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
  .content{padding-bottom:max(110px, calc(80px + env(safe-area-inset-bottom)))}
}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overflow-x:hidden}
img,video,canvas{max-width:100%}

@media (max-width:900px){
  /* the company switcher is only a label; the company shows in the sidebar */
  .org-switch{display:none}
  .topbar-right{gap:8px}
  .topbar > div:not(.topbar-right){min-width:0;flex:1 1 auto}
  .topbar h1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}

@media (max-width:620px){
  /* the floating annotate bar only marks a tool as pressed; on a phone it covers the page */
  .toolbar{display:none !important}
  .intro > .hr-actions{width:100%}
  .hr-actions > .btn{flex:1 1 140px}
  .filter-row--flex > *{flex:1 1 100% !important;width:100%}
  .topbar{gap:8px;padding-left:12px;padding-right:12px}
  .topbar .crumbs{display:none}
  .topbar h1{font-size:17px}
  .top-back{width:36px;height:36px}
  /* the back arrow takes the logo's place, so the page title keeps its room */
  .topbar:has(.top-back:not([hidden])) .topbar-logo{display:none}
  .topbar-right{gap:4px}
  .export-bar{gap:4px}
  .export-bar .btn{width:36px;height:36px;padding:0;justify-content:center}
  .lo-btn{width:36px;padding:0;justify-content:center}
  .lo-btn > span:not(.lo-door), .lo-label{display:none}
  .content{padding-left:12px;padding-right:12px}

  /* fields: 16px text so iPhone does not zoom in, and finger-sized */
  .input,.select,textarea,input[type="text"],input[type="email"],input[type="password"],input[type="number"],input[type="date"],input[type="time"],input[type="search"]{font-size:16px}
  .btn{min-height:40px}
  .icon-btn{min-width:36px;min-height:36px}

  /* tab strips scroll sideways instead of pushing the page wider */
  .segmented{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;max-width:100%}
  .segmented::-webkit-scrollbar{display:none}
  .seg{flex:0 0 auto;white-space:nowrap}

  /* rows of buttons wrap */
  .file-row,.row-actions,.hr-actions,.intro{flex-wrap:wrap}
  .intro > *{min-width:0}
  .page svg{max-width:100%}
  .grid-2{grid-template-columns:minmax(0,1fr)}
  /* card grids written with a 300px+ minimum become one column */
  .page [style*="minmax(300px"],.page [style*="minmax(320px"],.page [style*="minmax(340px"],
  .page [style*="minmax(360px"],.page [style*="minmax(380px"]{grid-template-columns:minmax(0,1fr) !important}
  .page [style*="repeat(5,1fr)"],.page [style*="repeat(4,1fr)"],.page [style*="repeat(6,1fr)"]{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .page [style*="repeat(3,1fr)"]{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
  .card,.section{min-width:0}
  .table-wrap{-webkit-overflow-scrolling:touch}

  /* forms open as a sheet from the bottom, full width */
  .scrim-modal{padding:0;place-items:end stretch}
  .modal{max-width:none;border-radius:16px 16px 0 0;max-height:92vh;max-height:92dvh}
  .modal-head{padding:16px 16px 12px}
  .modal-body{padding:16px}
  .modal-foot{padding:12px 16px max(12px, env(safe-area-inset-bottom))}
}

@media (max-width:380px){
  .topbar h1{font-size:16px}
  .tiles{grid-template-columns:minmax(0,1fr)}
}

/* ── Install app ───────────────────────────────── */
.install-btn{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 12px;border-radius:var(--r-md);
  border:1px solid var(--blue);background:var(--blue);color:#fff;font:inherit;font-size:13.5px;font-weight:600;cursor:pointer}
.install-btn[hidden]{display:none}
.install-btn:focus-visible{outline:none;box-shadow:var(--ring)}
.install-side{padding:8px 12px 4px}
.install-side .install-btn{width:100%;justify-content:center}
.install-side:has(.install-btn[hidden]){display:none}
.auth-install{margin-top:18px;width:100%;justify-content:center;height:44px}
.ios-tip{position:fixed;left:12px;right:12px;bottom:max(12px, env(safe-area-inset-bottom));z-index:200;background:#0F172A;color:#E2E8F0;
  border-radius:14px;padding:14px 16px;box-shadow:0 12px 30px rgba(2,6,23,.35);font-size:14px;line-height:1.5;display:flex;gap:12px;align-items:flex-start}
.ios-tip[hidden]{display:none}
.ios-tip b{color:#fff}
.ios-tip button{margin-left:auto;color:#94A3B8;font-size:20px;line-height:1;padding:0 4px}

/* ── Logo on phones (the brand panel and the sidebar are hidden there) ── */
.topbar-logo{display:none}
@media (max-width:900px){
  .topbar-logo{display:block;width:32px;height:32px;flex:0 0 32px;object-fit:contain}
}
.auth-brand-mobile{justify-content:center}
.auth-logo-mobile{display:block;width:100%;max-width:220px;height:auto;margin:0 auto}

/* Phone-attendance button in the top bar: icon only on narrow phones */
.top-punch[hidden]{display:none}
@media (max-width:520px){
  .top-punch{padding:7px 9px}
  .top-punch .top-punch-label{display:none}
}