/* =========================================================
   AMSN-PH V2.6.1 — Portal UI/UX Polish
   CSS-only overrides. No auth/database behavior is changed.
   ========================================================= */

:root{--portal-soft-shadow:0 10px 30px rgba(1,55,80,.06)}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:3px solid rgba(0,149,215,.25);
  outline-offset:2px;
}

.portal-main{max-width:1600px;width:100%}
.portal-topbar{padding-bottom:4px}
.portal-topbar h1{text-wrap:balance}

.card,
.member-card,
.engagement-card,
.mentor-request,
.ops-stat,
.coverage-row{
  box-shadow:0 1px 0 rgba(0,0,0,.015);
}

.card{transition:border-color .15s ease}
.card:hover{border-color:#cad6da}
.btn{transition:background .15s ease,color .15s ease}
.field input,.field select,.field textarea{border-radius:0}

.user-chip{
  max-width:260px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.portal-list li{line-height:1.45}

/* Authentication screen — Sign In and Create Account remain unchanged functionally. */
.auth-form-panel{background:#fbfcfc}

.auth-box{
  background:#fff;
  padding:32px;
  border:1px solid var(--line);
  box-shadow:var(--portal-soft-shadow);
}

.auth-box-header{margin-bottom:22px}

.auth-tabs{
  background:#f5f8f9;
  padding:4px;
  border-bottom:0;
  gap:4px;
}

.auth-tab{min-height:44px}

.auth-tab.active{
  background:#fff;
  border:1px solid #d7e0e3;
  border-bottom:1px solid #d7e0e3;
  color:var(--blue);
}

.auth-pane-intro{
  margin-bottom:20px;
  padding-bottom:16px;
  border-bottom:1px solid var(--line);
}

.auth-pane-intro h2{margin:6px 0 8px}
.auth-note{border-left:4px solid var(--cyan)}

.member-card-header{align-items:center}
.member-card{min-height:100%}

.feature-link{transition:background .15s ease,border-color .15s ease}
.feature-link:hover{background:#fff;border-color:#bfcdd2}

.officer-table{
  display:block;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

.portal-mobile-menu-toggle{display:none}

/* Proper mobile portal menu instead of a long horizontal nav.
   The nav only collapses after JS successfully adds .has-mobile-toggle,
   so navigation remains available if JS ever fails. */
@media(max-width:1000px){
  .portal-shell{display:block}

  .portal-sidebar{
    position:sticky;
    top:0;
    z-index:900;
    height:auto;
    padding:10px 14px;
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
    gap:8px 12px;
    box-shadow:0 8px 24px rgba(4,49,71,.12);
  }

  .portal-brand{min-width:0;gap:10px}
  .portal-brand img{width:40px;height:40px}
  .portal-brand strong{font-size:.84rem}
  .portal-brand span span{display:none}

  .portal-mobile-menu-toggle{
    min-height:40px;
    padding:7px 10px;
    border:1px solid rgba(255,255,255,.25);
    background:transparent;
    color:#fff;
    display:none;
    align-items:center;
    gap:8px;
    font:inherit;
    font-size:.76rem;
    font-weight:800;
    cursor:pointer;
  }

  .portal-sidebar.has-mobile-toggle .portal-mobile-menu-toggle{
    display:inline-flex;
  }

  .portal-nav{
    grid-column:1/-1;
    margin-top:4px;
  }

  .portal-sidebar.has-mobile-toggle .portal-nav{
    display:none;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:5px;
    padding-top:9px;
    border-top:1px solid rgba(255,255,255,.14);
  }

  .portal-sidebar.has-mobile-toggle.nav-open .portal-nav{
    display:grid;
  }

  .portal-sidebar.has-mobile-toggle .portal-nav a,
  .portal-sidebar.has-mobile-toggle .portal-nav button{
    min-height:42px;
    padding:10px 11px;
    font-size:.76rem;
    border:1px solid rgba(255,255,255,.07);
  }

  .portal-sidebar.has-mobile-toggle .portal-nav a[aria-current="page"]{
    background:#fff;
    color:var(--blue-dark);
  }

  .portal-sidebar-footer{display:none}
  .portal-main{padding:26px 20px 34px}
  .portal-topbar{margin-bottom:22px}

  .auth-brand-panel{padding:34px 28px}
  .auth-logo{width:68px;height:68px;margin-bottom:25px}

  .auth-brand-panel h1{
    max-width:650px;
    font-size:clamp(2.6rem,8vw,4rem);
  }

  .auth-points{
    margin-top:28px;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
  }

  .auth-form-panel{padding:34px 24px 48px}
}

@media(max-width:720px){
  .portal-sidebar{padding:9px 12px}
  .portal-brand span span{display:none}

  .portal-sidebar.has-mobile-toggle .portal-nav{
    grid-template-columns:1fr 1fr;
  }

  .portal-main{padding:20px 14px 30px}
  .portal-topbar{gap:12px}
  .portal-topbar h1{font-size:clamp(2rem,10vw,2.8rem)}
  .user-chip{max-width:100%}
  .card{padding:20px}
  .portal-grid{gap:12px}

  .auth-brand-panel{padding:28px 20px}
  .auth-brand-panel h1{font-size:2.35rem}
  .auth-brand-panel p{font-size:.96rem}

  .auth-points{
    grid-template-columns:1fr;
    gap:8px;
  }

  .auth-points div{padding-top:10px}
  .auth-form-panel{padding:24px 14px 38px}
  .auth-box{padding:22px 18px}
  .auth-box-header h2{font-size:1.65rem}

  .directory-grid,
  .engagement-grid,
  .feature-link-grid,
  .officer-management-grid{gap:11px}

  .digital-member-card{min-height:0}
  .ops-summary{gap:8px}
  .ops-stat{padding:14px}
  .ops-stat strong{font-size:1.45rem}
}

@media(max-width:460px){
  .portal-brand>span{display:none}

  .portal-sidebar.has-mobile-toggle .portal-nav{
    grid-template-columns:1fr;
  }

  .portal-sidebar.has-mobile-toggle .portal-nav a,
  .portal-sidebar.has-mobile-toggle .portal-nav button{
    min-height:40px;
  }

  .auth-box{padding:20px 15px}
  .auth-tab{font-size:.8rem}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    transition:none!important;
    animation:none!important;
  }
}