/* ITASwork 1.1 — mobile application shell and PWA safe areas. */
.mobile-nav{display:none}

@media(max-width:720px){
  html{min-height:100%;background:#f5f6f9}
  body{min-height:100dvh;overscroll-behavior-y:none}
  body.mobile-menu-open{overflow:hidden}
  .app{min-height:100dvh}
  .shell{min-height:100dvh;margin-left:0;padding-bottom:calc(74px + env(safe-area-inset-bottom))}

  /* Two real rows: the search participates in layout and never covers the page heading. */
  .topbar{
    position:sticky;
    top:0;
    z-index:45;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    column-gap:8px;
    row-gap:10px;
    height:auto!important;
    min-height:0;
    padding:10px 14px 11px;
    background:#fff;
    box-shadow:0 1px 0 var(--line);
  }
  .topbar .breadcrumbs{grid-column:1;min-width:0;gap:0}
  .breadcrumbs>span,.breadcrumbs .crumb-separator{display:none}
  .breadcrumbs strong{
    display:block;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#263446;
    font-size:1rem;
    font-weight:650;
  }
  .mobile-menu{display:none!important}
  .top-actions{grid-column:2;gap:2px;margin-left:0}
  .top-actions .icon-btn{width:38px;height:38px;min-height:38px}
  .profile-btn{padding:1px 3px}
  .profile-btn .avatar{width:36px;height:36px}

  .global-search{
    grid-column:1 / -1;
    grid-row:2;
    order:initial;
    position:relative;
    width:100%;
    min-width:0;
    max-width:none;
    margin:0;
  }
  .global-search-field{
    min-height:44px;
    padding:9px 12px;
    border-radius:11px;
    background:#f6f7fa;
  }
  .global-search input{font-size:1rem}
  .global-search kbd{display:none}
  .global-results{
    position:static;
    width:100%;
    max-height:min(38dvh,340px);
    margin-top:8px;
    overflow:auto;
    overscroll-behavior:contain;
    border-radius:11px;
    box-shadow:0 10px 28px #152b431c;
  }
  .search-result{min-height:50px}

  .content{
    width:100%;
    padding:18px 16px calc(24px + env(safe-area-inset-bottom));
  }
  .page-head{margin:0 0 20px;gap:10px}
  .page-head h1{font-size:1.55rem;line-height:1.2}
  .page-head p{margin-top:6px;line-height:1.45}
  .page-head .actions{gap:8px}
  .page-head .actions .btn{min-width:0;white-space:normal}
  .project-grid{gap:14px}
  .project-grid .project-card{padding:20px 18px}
  .tabs{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  button,.btn,.nav button{touch-action:manipulation}

  .mobile-nav{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:40;
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    align-items:start;
    min-height:64px;
    padding:6px 7px max(7px,env(safe-area-inset-bottom));
    border-top:1px solid #e1e5eb;
    background:rgba(255,255,255,.96);
    box-shadow:0 -8px 24px #1723350b;
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    transition:transform .18s ease;
  }
  .mobile-nav-item{
    position:relative;
    min-width:0;
    min-height:51px;
    padding:5px 2px 2px;
    border:0;
    border-radius:11px;
    background:transparent;
    color:#778292;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
  }
  .mobile-nav-item>span{
    position:relative;
    z-index:1;
    width:34px;
    height:26px;
    display:grid;
    place-items:center;
    border-radius:13px;
  }
  .mobile-nav-item .icon{width:20px;height:20px}
  .mobile-nav-item b{
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    font-size:.66rem;
    line-height:1.15;
    font-weight:550;
    white-space:nowrap;
  }
  .mobile-nav-item.active{color:#bb3442}
  .mobile-nav-item.active>span{background:#fff0f2}
  .mobile-nav-item:focus-visible{outline:2px solid #df8e98;outline-offset:0}
  body.mobile-input-active .mobile-nav{transform:translateY(calc(100% + env(safe-area-inset-bottom)))}

  .sidebar{z-index:60;padding-bottom:max(18px,env(safe-area-inset-bottom))}
  .sidebar.open+.mobile-backdrop{z-index:59}
  .install-app-btn:not([hidden]){display:flex!important}
  .install-guide{padding:22px 20px;display:grid;gap:14px}
  .install-step{display:grid;grid-template-columns:30px 1fr;gap:11px;align-items:start;font-size:.875rem;line-height:1.55}
  .install-step b:first-child{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#fff0f2;color:#b63241}
  .toast{bottom:calc(78px + env(safe-area-inset-bottom));max-width:calc(100vw - 30px)}
}

@media(max-width:380px){
  .topbar{padding-left:11px;padding-right:11px}
  .content{padding-left:12px;padding-right:12px}
  .mobile-nav{padding-left:3px;padding-right:3px}
  .mobile-nav-item b{font-size:.61rem}
  .dash-projects{grid-template-columns:1fr}
}

@media(max-width:720px) and (display-mode:standalone){
  .topbar{padding-top:max(10px,env(safe-area-inset-top))}
}

@media(max-width:720px) and (prefers-reduced-motion:reduce){
  .mobile-nav{transition:none}
}