/* =====================================================
   NextGEN TVETMARA - v13 Phase 2 Layout Cleanup
   Focus: cleaner corporate header + dashboard alignment
   Non-destructive CSS override loaded after phase2-corporate.css
   ===================================================== */
:root{
  --v13-blue:#2563eb;
  --v13-navy:#0f172a;
  --v13-muted:#64748b;
  --v13-line:#e2e8f0;
  --v13-soft:#f8fafc;
}

/* ---------- TOP NAV: clean two-zone layout ---------- */
#navigation{
  padding:18px 28px !important;
  min-height:124px !important;
}
#navigation > .container{
  max-width:1720px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:24px !important;
  width:100% !important;
}
#navigation .flex.items-center.space-x-3{
  flex:1 1 auto !important;
  min-width:280px !important;
  gap:16px !important;
}
#navigation img[alt="NextGEN"]{
  width:60px !important;
  height:60px !important;
  flex:0 0 auto !important;
}
#navigation h1{
  max-width:none !important;
  white-space:nowrap !important;
  overflow:visible !important;
  text-overflow:clip !important;
}
#navigation > .container > .flex.flex-col.items-end.gap-1{
  flex:0 0 auto !important;
  min-width:520px !important;
  max-width:760px !important;
  display:grid !important;
  grid-template-columns:1fr !important;
  justify-items:end !important;
  align-items:center !important;
  gap:8px !important;
  text-align:right !important;
}
#navigation > .container > .flex.flex-col.items-end.gap-1 > .text-sm{
  line-height:1.1 !important;
}
#headerRegName{
  max-width:100% !important;
  overflow:visible !important;
  text-overflow:clip !important;
  white-space:nowrap !important;
  line-height:1.15 !important;
}
#roleButtons,
#counselorQuickButtons{
  display:flex !important;
  flex-wrap:wrap !important;
  justify-content:flex-end !important;
  align-items:center !important;
  gap:10px !important;
  margin-top:8px !important;
  width:100% !important;
}
#roleButtons button,
#counselorQuickButtons button,
#adminPanelBtn,
#adminCvBtn,
#adminPassportBtn,
#counselorPanelBtn,
#counselorQuickCvBtn,
#counselorQuickPassportBtn{
  min-height:42px !important;
  padding:.62rem 1rem !important;
  border-radius:12px !important;
  line-height:1 !important;
  white-space:nowrap !important;
  box-shadow:0 8px 18px rgba(15,23,42,.12) !important;
}
#logoutBtn{
  min-height:42px !important;
  padding:.62rem 1.1rem !important;
  margin-top:4px !important;
  align-self:end !important;
}

/* ---------- DASHBOARD: make card use full width ---------- */
#dashboard > .text-center{
  margin-bottom:22px !important;
}
#dashboardStats{
  display:block !important;
  width:100% !important;
  padding:34px 40px !important;
  overflow:hidden !important;
}
#dashboardStats::before{
  background:linear-gradient(90deg, rgba(37,99,235,.055), transparent 62%) !important;
}
#dashboardStats > .grid{
  position:relative !important;
  z-index:1 !important;
  display:grid !important;
  grid-template-columns:minmax(360px,1.35fr) minmax(130px,.42fr) minmax(130px,.42fr) minmax(240px,.75fr) !important;
  align-items:center !important;
  gap:28px !important;
  width:100% !important;
}
#dashboardStats > .grid > .flex.flex-col.items-center,
#dashboardStats > .grid > div:first-child{
  grid-column:1 !important;
  grid-row:1 !important;
  align-items:center !important;
  justify-content:flex-start !important;
}
#dashboardStats > .grid > .min-w-0{
  grid-column:1 !important;
  grid-row:1 !important;
  padding-left:132px !important;
  min-width:0 !important;
  text-align:left !important;
}
#studentName,
#studentSchool,
#studentGrade{
  max-width:none !important;
  overflow:visible !important;
  text-overflow:clip !important;
  white-space:normal !important;
}
#studentName{
  font-size:clamp(1.65rem,2.2vw,2.25rem) !important;
  line-height:1.1 !important;
}
#studentSchool{
  font-size:clamp(1.05rem,1.4vw,1.45rem) !important;
  line-height:1.15 !important;
}
#studentGrade{
  color:#475569 !important;
}
#dashboardStats > .grid > div:nth-child(3),
#dashboardStats > .grid > div:nth-child(4){
  background:#f8fafc !important;
  border:1px solid #e2e8f0 !important;
  border-radius:18px !important;
  padding:16px 12px !important;
  text-align:center !important;
}
#dashboardStats > .grid > div:nth-child(3){grid-column:2 !important;}
#dashboardStats > .grid > div:nth-child(4){grid-column:3 !important;}
#dashboardStats > .grid > div:nth-child(5){
  grid-column:4 !important;
  text-align:left !important;
  justify-self:end !important;
  width:100% !important;
  max-width:320px !important;
}
#achievementBadges{
  justify-content:flex-start !important;
  max-width:100% !important;
  flex-wrap:wrap !important;
}
.phase2-dashboard-tag{
  top:20px !important;
  right:24px !important;
  z-index:2 !important;
}

/* ---------- Dashboard action cards ---------- */
#dashboard .grid.md\:grid-cols-3{
  align-items:stretch !important;
}
#dashboard .grid.md\:grid-cols-3 > div{
  min-height:230px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:space-between !important;
  align-items:center !important;
  border:1px solid rgba(226,232,240,.92) !important;
  border-radius:24px !important;
}
#dashboard .grid.md\:grid-cols-3 > div h3{
  color:#0f172a !important;
  letter-spacing:-.03em !important;
}
#dashboard .grid.md\:grid-cols-3 > div button{
  border-radius:14px !important;
  font-weight:850 !important;
  min-width:170px !important;
}

/* ---------- Tablet ---------- */
@media (max-width:1280px){
  #navigation > .container{
    align-items:flex-start !important;
  }
  #navigation > .container > .flex.flex-col.items-end.gap-1{
    min-width:420px !important;
  }
  #dashboardStats > .grid{
    grid-template-columns:minmax(300px,1fr) repeat(2, minmax(120px,.35fr)) !important;
    gap:20px !important;
  }
  #dashboardStats > .grid > div:nth-child(5){
    grid-column:1 / -1 !important;
    max-width:none !important;
    justify-self:stretch !important;
    text-align:center !important;
    border-top:1px solid #e2e8f0;
    padding-top:18px;
  }
  #achievementBadges{justify-content:center !important;}
}

/* ---------- Mobile ---------- */
@media (max-width:900px){
  #navigation{
    padding:14px !important;
    min-height:auto !important;
  }
  #navigation > .container{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:14px !important;
  }
  #navigation .flex.items-center.space-x-3{
    width:100% !important;
    min-width:0 !important;
    gap:12px !important;
  }
  #navigation h1{
    font-size:clamp(1.35rem,6vw,1.9rem) !important;
    white-space:normal !important;
  }
  #navigation h1::after{
    font-size:.62rem !important;
    letter-spacing:.09em !important;
  }
  #navigation img[alt="NextGEN"]{
    width:44px !important;
    height:44px !important;
  }
  #hamburgerBtn{
    width:42px !important;
    height:42px !important;
    border-radius:12px !important;
  }
  #navigation > .container > .flex.flex-col.items-end.gap-1{
    min-width:0 !important;
    max-width:none !important;
    width:100% !important;
    justify-items:start !important;
    text-align:left !important;
    background:rgba(255,255,255,.10) !important;
    border:1px solid rgba(255,255,255,.16) !important;
    border-radius:18px !important;
    padding:12px !important;
  }
  #roleButtons,
  #counselorQuickButtons{
    justify-content:flex-start !important;
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    width:100% !important;
    padding-bottom:4px !important;
    scrollbar-width:none;
  }
  #roleButtons::-webkit-scrollbar,
  #counselorQuickButtons::-webkit-scrollbar{display:none;}
  #roleButtons button,
  #counselorQuickButtons button{
    flex:0 0 auto !important;
    min-height:38px !important;
    padding:.55rem .8rem !important;
    font-size:.88rem !important;
  }
  #logoutBtn{
    align-self:start !important;
    min-height:38px !important;
    padding:.55rem .85rem !important;
  }

  #dashboardStats{
    padding:24px 18px !important;
  }
  #dashboardStats > .grid{
    grid-template-columns:1fr !important;
    gap:16px !important;
    text-align:center !important;
  }
  #dashboardStats > .grid > .flex.flex-col.items-center,
  #dashboardStats > .grid > div:first-child,
  #dashboardStats > .grid > .min-w-0,
  #dashboardStats > .grid > div:nth-child(3),
  #dashboardStats > .grid > div:nth-child(4),
  #dashboardStats > .grid > div:nth-child(5){
    grid-column:1 !important;
    grid-row:auto !important;
    width:100% !important;
    max-width:none !important;
    justify-self:center !important;
    text-align:center !important;
    padding-left:0 !important;
  }
  #dashboardStats > .grid > .flex.flex-col.items-center,
  #dashboardStats > .grid > div:first-child{
    align-items:center !important;
  }
  #studentName,#studentSchool,#studentGrade{text-align:center !important;}
  #dashboardStats > .grid > div:nth-child(3),
  #dashboardStats > .grid > div:nth-child(4){
    max-width:260px !important;
    margin:0 auto !important;
  }
  #achievementBadges{justify-content:center !important;}
  .phase2-dashboard-tag{
    position:static !important;
    display:inline-block !important;
    margin:0 auto 16px !important;
  }

  #dashboard .grid.md\:grid-cols-3 > div{
    min-height:200px !important;
  }
}

@media (max-width:520px){
  #dashboardProfilePicture{
    width:92px !important;
    height:92px !important;
  }
  #studentName{font-size:1.45rem !important;}
  #studentSchool{font-size:1.1rem !important;}
  #dashboardStats > .grid > div:nth-child(3),
  #dashboardStats > .grid > div:nth-child(4){
    max-width:220px !important;
  }
}