/* ===========================================================
   Responsive / mobile overrides for the borrower portal.
   Loaded LAST (after portal.css and any page's own extra_css
   block) so these rules always win inside their media queries.
   =========================================================== */

@media (max-width: 900px){
  /* ---------- app shell: sidebar becomes a top bar ---------- */
  .app-shell{
    display:flex;
    flex-direction:column;
    min-height:0;
  }

  .sidebar{
    padding:16px 18px;
    flex-direction:column;
  }
  .sidebar .veinmark{display:none;}
  .sb-logo{margin-bottom:0;padding:2px 2px 14px;}
  .sb-org{
    padding:0 2px 14px;
    margin-bottom:14px;
    display:flex;
    align-items:baseline;
    gap:6px;
  }
  .sb-org b{display:inline;margin-top:0;}

  .sb-nav{
    flex-direction:row;
    flex-wrap:nowrap;
    overflow-x:auto;
    gap:4px;
    -webkit-overflow-scrolling:touch;
    padding-bottom:2px;
  }
  .sb-link{
    white-space:nowrap;
    padding:9px 12px;
    font-size:12.5px;
  }

  .sb-bottom{
    margin-top:14px;
    padding-top:14px;
    border-top:1px solid var(--line-on-dark);
  }

  /* ---------- top bar ---------- */
  .topbar{
    padding:16px 20px;
    flex-wrap:wrap;
    gap:10px;
  }
  .topbar h1{font-size:17px;}
  .topbar-right{gap:14px;}
  .avatar-name span{display:none;}

  /* ---------- content ---------- */
  .content{padding:20px;}
  .greet h2{font-size:21px;}
  .greet p{margin-bottom:24px;}

  /* ---------- status card / stepper ---------- */
  .status-card{padding:22px 20px;margin-bottom:18px;}
  .status-card-head{margin-bottom:22px;}
  .status-card-head h3{font-size:15.5px;}
  .stepper{justify-content:flex-start;}
  .step-item{min-width:78px;}
  .step-item .slabel{font-size:10px;max-width:78px;}

  /* ---------- two-column panels stack ---------- */
  .row2{grid-template-columns:1fr;gap:18px;}
  .panel{padding:20px 20px;}

  /* ---------- documents ---------- */
  .doc-row{flex-wrap:wrap;padding:12px 0;}
  .doc-right{flex-wrap:wrap;gap:8px;}
  .doc-upload-form{flex-wrap:wrap;}
  .doc-upload-form input[type=file]{max-width:140px;}

  /* ---------- summary lines ---------- */
  .summary-line{font-size:12px;}

  /* ---------- help bar ---------- */
  .helpbar{padding:16px 18px;flex-direction:column;align-items:flex-start;gap:10px;}

  .empty-state{padding:34px 20px;}
}

@media (max-width: 480px){
  .sb-org{flex-direction:column;gap:2px;}
  .status-pill{align-self:flex-start;}
  .doc-left{width:100%;}
  .doc-right{width:100%;justify-content:space-between;}
}

/* ---------- login page ---------- */
@media (max-width: 520px){
  .login-wrap{padding:16px;}
  .login-card{padding:34px 24px;}
  .login-card h1{font-size:19px;}
}