/* =====================================================
   NextGEN TVETMARA - v14 Dashboard + Header Fix
   Purpose: fix dashboard photo/name overlap, clean header tools,
   keep all existing functions untouched.
   Loaded after v13 CSS as final override.
   ===================================================== */

:root{
  --v14-blue:#2563eb;
  --v14-navy:#0f172a;
  --v14-muted:#64748b;
  --v14-line:#e2e8f0;
  --v14-soft:#f8fafc;
  --v14-card:#ffffff;
}

/* =========================
   HEADER / TOP NAV
   ========================= */
#navigation{
  padding:20px 34px !important;
  min-height:118px !important;
}

#navigation > .container{
  max-width:1760px !important;
  width:100% !important;
  display:grid !important;
  grid-template-columns:minmax(420px, 1fr) minmax(520px, auto) !important;
  align-items:center !important;
  gap:28px !important;
}

#navigation .flex.items-center.space-x-3{
  min-width:0 !important;
  width:100% !important;
  display:flex !important;
  align-items:center !important;
  gap:18px !important;
}

#hamburgerBtn{
  flex:0 0 auto !important;
}

#navigation img[alt="NextGEN"]{
  width:62px !important;
  height:62px !important;
  flex:0 0 auto !important;
  object-fit:contain !important;
}

#navigation h1{
  margin:0 !important;
  line-height:1.05 !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  font-size:clamp(2rem, 2.4vw, 2.7rem) !important;
  letter-spacing:-.04em !important;
}

#navigation h1::after{
  margin-top:6px !important;
}

#navigation > .container > .flex.flex-col.items-end.gap-1{
  min-width:0 !important;
  max-width:none !important;
  width:auto !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.05 !important;
  opacity:.95 !important;
}

#headerRegName{
  max-width:360px !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  line-height:1.15 !important;
}

/* Put all role/action buttons into one neat row */
#roleButtons,
#counselorQuickButtons{
  display:flex !important;
  flex-wrap:wrap !important;
  justify-content:flex-end !important;
  align-items:center !important;
  gap:10px !important;
  width:auto !important;
  margin-top:6px !important;
}

#roleButtons button,
#counselorQuickButtons button,
#adminPanelBtn,
#adminCvBtn,
#adminPassportBtn,
#counselorPanelBtn,
#counselorQuickCvBtn,
#counselorQuickPassportBtn{
  min-height:42px !important;
  padding:.62rem 1.05rem !important;
  border-radius:14px !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.2rem !important;
  margin-top:6px !important;
  align-self:end !important;
  justify-self:end !important;
  border-radius:14px !important;
}

/* =========================
   DASHBOARD SUMMARY CARD
   Fix: photo/name overlap by using 5 real columns.
   ========================= */
#dashboardStats{
  position:relative !important;
  width:100% !important;
  padding:32px 38px !important;
  overflow:hidden !important;
  border-radius:26px !important;
  background:#fff !important;
}

#dashboardStats::before{
  content:"" !important;
  position:absolute !important;
  inset:0 auto 0 0 !important;
  width:36% !important;
  background:linear-gradient(90deg, rgba(37,99,235,.07), rgba(255,255,255,0)) !important;
  pointer-events:none !important;
}

#dashboardStats > .grid{
  position:relative !important;
  z-index:1 !important;
  display:grid !important;
  grid-template-columns:126px minmax(280px, 1.3fr) minmax(150px, .45fr) minmax(150px, .45fr) minmax(260px, .85fr) !important;
  grid-auto-rows:auto !important;
  align-items:center !important;
  gap:22px !important;
  width:100% !important;
  text-align:left !important;
}

/* Column 1: photo + badge */
#dashboardStats > .grid > .flex.flex-col.items-center,
#dashboardStats > .grid > div:first-child{
  grid-column:1 !important;
  grid-row:1 !important;
  width:126px !important;
  min-width:126px !important;
  max-width:126px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  margin:0 !important;
  text-align:center !important;
}

#dashboardProfilePicture{
  width:108px !important;
  height:108px !important;
  min-width:108px !important;
  min-height:108px !important;
  max-width:108px !important;
  max-height:108px !important;
  flex:0 0 auto !important;
  border-radius:9999px !important;
  overflow:hidden !important;
  border:6px solid #dbeafe !important;
  background:#f1f5f9 !important;
  box-shadow:0 12px 28px rgba(37,99,235,.14) !important;
  margin:0 auto !important;
}

#dashboardProfilePicture img,
#dashboardProfilePicture canvas,
#dashboardProfilePicture picture{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
}

#studentLevel{
  display:inline-flex !important;
  justify-content:center !important;
  align-items:center !important;
  margin-top:10px !important;
  max-width:118px !important;
  white-space:nowrap !important;
}

/* Column 2: name/school/grade */
#dashboardStats > .grid > .min-w-0,
#dashboardStats > .grid > div:nth-child(2){
  grid-column:2 !important;
  grid-row:1 !important;
  min-width:0 !important;
  width:100% !important;
  padding-left:0 !important;
  padding-right:0 !important;
  margin:0 !important;
  text-align:left !important;
  align-self:center !important;
}

#studentName,
#studentSchool,
#studentGrade{
  display:block !important;
  max-width:100% !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  text-align:left !important;
}

#studentName{
  font-size:clamp(1.65rem, 2vw, 2.25rem) !important;
  line-height:1.08 !important;
  letter-spacing:-.035em !important;
  color:#2563eb !important;
}

#studentSchool{
  font-size:clamp(1.08rem, 1.3vw, 1.45rem) !important;
  line-height:1.12 !important;
  color:#16a34a !important;
  margin-top:4px !important;
}

#studentGrade{
  color:#475569 !important;
  margin-top:6px !important;
  font-size:.95rem !important;
}

/* Columns 3 and 4: stat cards */
#dashboardStats > .grid > div:nth-child(3),
#dashboardStats > .grid > div:nth-child(4){
  width:100% !important;
  min-width:130px !important;
  background:#f8fafc !important;
  border:1px solid #e2e8f0 !important;
  border-radius:18px !important;
  padding:16px 14px !important;
  text-align:center !important;
  justify-self:stretch !important;
}

#dashboardStats > .grid > div:nth-child(3){
  grid-column:3 !important;
  grid-row:1 !important;
}

#dashboardStats > .grid > div:nth-child(4){
  grid-column:4 !important;
  grid-row:1 !important;
}

/* Column 5: achievement */
#dashboardStats > .grid > div:nth-child(5){
  grid-column:5 !important;
  grid-row:1 !important;
  width:100% !important;
  max-width:none !important;
  justify-self:stretch !important;
  text-align:left !important;
  padding:0 !important;
}

#dashboardStats > .grid > div:nth-child(5) .text-sm,
#dashboardStats > .grid > div:nth-child(5) > div:first-child{
  text-align:left !important;
}

#achievementBadges{
  display:flex !important;
  justify-content:flex-start !important;
  align-items:center !important;
  flex-wrap:wrap !important;
  gap:8px !important;
  max-width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
}

/* Digital Talent Passport tag */
.phase2-dashboard-tag{
  top:20px !important;
  right:24px !important;
  z-index:2 !important;
  pointer-events:none !important;
}

/* Keep dashboard action cards aligned */
#dashboard .grid.md\:grid-cols-3{
  align-items:stretch !important;
}

#dashboard .grid.md\:grid-cols-3 > div{
  min-height:232px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:space-between !important;
  align-items:center !important;
  gap:14px !important;
}

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width:1350px){
  #navigation > .container{
    grid-template-columns:minmax(360px, 1fr) minmax(420px, auto) !important;
  }

  #dashboardStats > .grid{
    grid-template-columns:118px minmax(250px, 1fr) minmax(135px, .45fr) minmax(135px, .45fr) !important;
    gap:18px !important;
  }

  #dashboardStats > .grid > div:nth-child(5){
    grid-column:1 / -1 !important;
    grid-row:2 !important;
    text-align:center !important;
    border-top:1px solid var(--v14-line) !important;
    padding-top:18px !important;
  }

  #dashboardStats > .grid > div:nth-child(5) .text-sm,
  #dashboardStats > .grid > div:nth-child(5) > div:first-child{
    text-align:center !important;
  }

  #achievementBadges{
    justify-content:center !important;
  }
}

@media (max-width:1050px){
  #navigation{
    padding:16px 18px !important;
    min-height:auto !important;
  }

  #navigation > .container{
    grid-template-columns:1fr !important;
    gap:14px !important;
  }

  #navigation > .container > .flex.flex-col.items-end.gap-1{
    justify-items:start !important;
    text-align:left !important;
    width:100% !important;
    background:rgba(255,255,255,.10) !important;
    border:1px solid rgba(255,255,255,.16) !important;
    border-radius:18px !important;
    padding:12px !important;
  }

  #headerRegName{
    max-width:100% !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 !important;
  }

  #roleButtons::-webkit-scrollbar,
  #counselorQuickButtons::-webkit-scrollbar{
    display:none !important;
  }

  #logoutBtn{
    align-self:start !important;
    justify-self:start !important;
  }

  #dashboardStats{
    padding:26px 22px !important;
  }

  #dashboardStats > .grid{
    grid-template-columns:112px minmax(0, 1fr) repeat(2, minmax(120px, .42fr)) !important;
    gap:16px !important;
  }

  #dashboardStats > .grid > div:nth-child(5){
    grid-column:1 / -1 !important;
    grid-row:2 !important;
  }
}

@media (max-width:820px){
  #navigation .flex.items-center.space-x-3{
    gap:12px !important;
  }

  #navigation img[alt="NextGEN"]{
    width:48px !important;
    height:48px !important;
  }

  #navigation h1{
    font-size:clamp(1.45rem, 6vw, 2rem) !important;
    white-space:normal !important;
  }

  #navigation h1::after{
    font-size:.62rem !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(2),
  #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;
    min-width:0 !important;
    justify-self:center !important;
    text-align:center !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }

  #dashboardStats > .grid > div:first-child{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
  }

  #dashboardStats > .grid > div:nth-child(2){
    text-align:center !important;
  }

  #studentName,
  #studentSchool,
  #studentGrade{
    text-align:center !important;
    white-space:normal !important;
  }

  #dashboardStats > .grid > div:nth-child(3),
  #dashboardStats > .grid > div:nth-child(4){
    max-width:260px !important;
    margin:0 auto !important;
  }

  #dashboardStats > .grid > div:nth-child(5){
    border-top:1px solid var(--v14-line) !important;
    padding-top:16px !important;
  }

  #dashboardStats > .grid > div:nth-child(5) .text-sm,
  #dashboardStats > .grid > div:nth-child(5) > div:first-child{
    text-align:center !important;
  }

  #achievementBadges{
    justify-content:center !important;
  }

  .phase2-dashboard-tag{
    position:static !important;
    display:inline-flex !important;
    margin:0 auto 16px !important;
  }
}

@media (max-width:520px){
  #navigation{
    padding:12px !important;
  }

  #hamburgerBtn{
    width:42px !important;
    height:42px !important;
    border-radius:12px !important;
  }

  #navigation img[alt="NextGEN"]{
    width:42px !important;
    height:42px !important;
  }

  #navigation h1{
    font-size:1.5rem !important;
  }

  #dashboardStats{
    padding:22px 16px !important;
    border-radius:20px !important;
  }

  #dashboardProfilePicture{
    width:94px !important;
    height:94px !important;
    min-width:94px !important;
    min-height:94px !important;
  }

  #studentName{
    font-size:1.55rem !important;
  }

  #studentSchool{
    font-size:1.1rem !important;
  }
}