@media screen and (max-width: 760px) {
  body.signed-in #app header {
    display:flex!important; flex-flow:row nowrap!important; gap:clamp(4px,1vw,8px)!important;
    align-items:center!important; justify-content:space-between!important;
    padding:14px 12px!important; max-width:100%; overflow-x:auto;
  }
  body.signed-in #app header > button.header-home-button,
  body.signed-in #app header > a.header-fruitsys-button {
    flex:0 0 auto!important; width:clamp(40px,11vw,52px)!important;
    min-width:44px!important; height:clamp(40px,11vw,52px)!important;
    min-height:44px!important; margin:0!important;
  }
  body.signed-in #app header > button { min-height:44px!important; flex-shrink:0!important; }
  body.signed-in #app header > .brand,
  body.signed-in #app header > #menu-toggle { display:none!important; }
  body.signed-in #app header > a.header-fruitsys-button { width:56px!important; min-width:56px!important; }
  body.signed-in #app header > .brand { flex:0 0 auto!important; }
  body.signed-in #app header > .brand small { display:none; }
  .mobile-button-row:not([hidden]) {
    display:flex!important; flex-flow:row nowrap!important; align-items:center;
    gap:10px!important; overflow-x:auto!important; max-width:100%;
    overscroll-behavior-x:contain; padding-bottom:8px; scrollbar-width:thin;
    touch-action:pan-x pan-y;
  }
  .mobile-button-row > button,.mobile-button-row > a,
  .mobile-button-row > label,.mobile-button-row > .btn {
    flex:0 0 auto!important; width:auto!important; max-width:none!important;
    white-space:nowrap!important; min-height:44px!important;
  }
}

/* Keep the original login keypad usable on short phone screens. */
@media screen and (max-width:760px) and (max-height:850px){
 body.login-screen .loginbox .pin-keypad{gap:8px;margin:12px 0}
 body.login-screen .loginbox .pin-keypad button{padding:8px;min-height:44px;font-size:20px}
}

@media screen and (max-width:760px) and (max-height:850px){
 body.login-screen .loginbox .loginbrand{margin-bottom:12px}
 body.login-screen .loginbox #profile-login{margin-top:12px}
 body.login-screen .loginbox .pin-keypad{gap:4px;margin:8px 0}
}

/* Planner people are a vertical sidebar, never a mobile action strip.
   Also protects an already classified/cached DOM before the next scan. */
body.signed-in #app .schedule-planner-names,
body.signed-in #app .schedule-planner-teams{display:flex!important;flex-flow:column nowrap!important;align-items:stretch!important;overflow-x:visible!important;max-width:100%;gap:9px!important}
body.signed-in #app .schedule-planner-names>button,
body.signed-in #app .schedule-planner-teams>button{flex:0 0 auto!important;width:100%!important;min-width:0!important;max-width:100%!important;white-space:normal!important;box-sizing:border-box}

body.signed-in #app .leave-request-layout .leave-people,
body.signed-in #app .leave-request-layout .leave-people-groups{display:flex!important;flex-flow:column nowrap!important;align-items:stretch!important;overflow-x:visible!important;max-width:100%}
body.signed-in #app .leave-request-layout .leave-people>button{width:100%!important;max-width:100%!important;min-width:0!important;white-space:normal!important;box-sizing:border-box}

/* The own-profile action is always visible, including the initial phone viewport. */
body.signed-in #app header > button.header-profile-button{display:inline-flex!important;align-items:center;justify-content:center;width:44px!important;min-width:44px!important;height:44px!important;padding:4px!important;flex:0 0 44px!important;box-sizing:border-box;border-radius:50%!important;font-size:0!important}
body.signed-in #app header > .header-profile-button [data-haccp-profile-label]{display:none!important}
body.signed-in #app header > .header-profile-button .repohar-header-avatar{margin:0!important;width:34px;height:34px;min-width:34px;flex:0 0 34px}
body.signed-in #app header > .header-profile-button:has(.repohar-header-avatar) .header-profile-fallback{display:none}
@media screen and (max-width:760px){body.signed-in #app header > .header-profile-button{order:-1!important;margin:0!important}}

/* Logo replaces the separate Home action; mobile logo occupies its own first row. */
body.signed-in #app header .brand.kupak-home-brand{cursor:pointer}
body.signed-in #app header .brand.kupak-home-brand:focus-visible{outline:2px solid currentColor;outline-offset:4px}
@media(max-width:760px){
 body.signed-in #app header.kupak-responsive-header>.brand.kupak-home-brand{display:flex!important;grid-column:1 / -1;grid-row:1;order:-1!important;justify-content:center;align-items:center;width:100%;min-height:52px;margin:0;padding:4px 0;box-sizing:border-box}
}