/* =====================================================
   NextGEN TVETMARA - Phase 2 Express Corporate UI
   Purpose: professional/corporate look without changing core logic
   ===================================================== */
:root{
  --ng-primary:#1d4ed8;
  --ng-primary-2:#2563eb;
  --ng-navy:#0f172a;
  --ng-slate:#334155;
  --ng-muted:#64748b;
  --ng-border:#e2e8f0;
  --ng-bg:#f6f8fc;
  --ng-card:#ffffff;
  --ng-success:#16a34a;
  --ng-warning:#d97706;
  --ng-purple:#7c3aed;
  --ng-shadow:0 12px 34px rgba(15,23,42,.08);
  --ng-radius:22px;
}

html{scroll-behavior:smooth;}
body{
  background:
    radial-gradient(circle at 8% 0%, rgba(37,99,235,.10), transparent 30%),
    radial-gradient(circle at 95% 10%, rgba(124,58,237,.08), transparent 28%),
    var(--ng-bg) !important;
  color:var(--ng-navy);
  letter-spacing:-.01em;
}

/* ===== Corporate Navigation ===== */
#navigation{
  background:linear-gradient(120deg,#173ea5 0%,#2563eb 55%,#1d4ed8 100%) !important;
  box-shadow:0 14px 36px rgba(29,78,216,.24);
  padding:22px 28px !important;
  position:sticky;
  top:0;
  z-index:50;
}
#navigation > .container{
  max-width:1720px !important;
  display:grid !important;
  grid-template-columns: minmax(300px,1fr) auto minmax(320px,1fr);
  align-items:center !important;
  gap:22px;
}
#navigation .flex.items-center.space-x-3{
  min-width:0;
  gap:18px !important;
}
#hamburgerBtn{
  width:46px;height:46px;
  display:grid;place-items:center;
  border-radius:14px !important;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
}
#hamburgerBtn:hover{background:rgba(255,255,255,.20) !important;}
#navigation img[alt="NextGEN"]{
  width:58px !important;height:58px !important;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.18));
}
#navigation h1{
  font-size:clamp(1.65rem,2.4vw,2.45rem) !important;
  line-height:1.05;
  letter-spacing:-.04em;
  white-space:nowrap;
}
#navigation h1::after{
  content:"Entering NextGen TVETMARA World";
  display:block;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,.76);
  margin-top:7px;
}
#navigation > .container > div:last-child{
  justify-self:end;
  align-items:flex-end !important;
  gap:10px !important;
}
#headerRegName{
  font-size:1.05rem !important;
  font-weight:800 !important;
}
#logoutBtn{
  background:#ef4444 !important;
  border-radius:14px !important;
  padding:.65rem 1.1rem !important;
  font-weight:800;
  box-shadow:0 10px 20px rgba(239,68,68,.22);
}

/* Buttons added by admin/counselor patches */
#navigation button,
#navigation .ng-role-btn,
#navigation [data-admin-shortcut],
#navigation [data-counselor-shortcut]{
  border-radius:14px !important;
  font-weight:800 !important;
}

/* ===== Global Layout ===== */
.container.mx-auto.p-4{
  max-width:1720px !important;
  padding:28px 28px 96px !important;
}
.screen > h2,
#dashboard h2,
#learning h2,
#profile h2,
#fields h2,
#pathway h2,
#goals h2,
#cvbuilder h2,
#passport h2{
  color:var(--ng-primary) !important;
  letter-spacing:-.04em;
}
.bg-white.rounded-lg.shadow-lg,
.card,
#dashboardStats,
#learning > .bg-white,
#profile > .max-w-2xl,
#goals .bg-white,
#cvbuilder .bg-white,
#passport .bg-white{
  border-radius:var(--ng-radius) !important;
  border:1px solid rgba(226,232,240,.85) !important;
  box-shadow:var(--ng-shadow) !important;
}

/* ===== Login / Cover ===== */
#cover .max-w-md{
  border-radius:28px !important;
  border:1px solid rgba(226,232,240,.9);
  box-shadow:0 28px 70px rgba(15,23,42,.12) !important;
}
#cover h2 .text-3xl{
  letter-spacing:-.04em;
}
#loginForm input,#registerForm input,
#profile input,#profile select,#profile textarea,
#goals textarea,#cvbuilder input,#cvbuilder textarea,#cvbuilder select{
  border-radius:14px !important;
  border-color:#cbd5e1 !important;
  min-height:48px;
}
#loginForm input:focus,#registerForm input:focus,#profile input:focus,#profile select:focus,#goals textarea:focus,#cvbuilder input:focus,#cvbuilder textarea:focus{
  outline:3px solid rgba(37,99,235,.15) !important;
  border-color:#2563eb !important;
}

/* ===== Dashboard ===== */
#dashboard > .text-center,
#dashboard h2.text-4xl{
  margin-top:2px !important;
  margin-bottom:24px !important;
}
#dashboardStats{
  position:relative;
  overflow:hidden;
  padding:34px !important;
  display:grid !important;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap:30px;
  align-items:center;
}
#dashboardStats::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(37,99,235,.07), transparent 48%);
  pointer-events:none;
}
#dashboardProfilePicture{
  width:104px !important;height:104px !important;
  border:5px solid #bfdbfe !important;
  box-shadow:0 14px 30px rgba(37,99,235,.18);
}
#dashboardStats h3,
#dashboardName{
  font-size:clamp(1.55rem,2vw,2.25rem) !important;
  color:var(--ng-primary) !important;
  letter-spacing:-.04em;
}
#dashboardSchool,
#dashboardGrade,
#dashboardField{
  color:var(--ng-success) !important;
  font-weight:800 !important;
}
#dashboardStats .text-3xl,
#dashboardStats .text-2xl{
  color:var(--ng-primary) !important;
  letter-spacing:-.04em;
}
#dashboardStats .text-yellow-600{color:#b45309 !important;}

/* ===== Learning / Mission UI ===== */
#learning .grid.md\:grid-cols-4 > div{
  background:#f8fafc;
  border:1px solid #e2e8f0;
  border-radius:18px;
  padding:18px 12px;
}
#learning .mission-card{
  background:#fff !important;
  border:1px solid #e2e8f0;
  border-radius:22px !important;
  box-shadow:0 12px 30px rgba(15,23,42,.07);
  min-height:268px;
  position:relative;
  overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
#learning .mission-card::before{
  content:attr(data-step);
  position:absolute;
  top:14px;left:14px;
  width:34px;height:34px;
  border-radius:12px;
  background:#eff6ff;
  color:#1d4ed8;
  display:grid;place-items:center;
  font-size:.8rem;
  font-weight:900;
}
#learning .mission-card::after{
  content:"+5 XP";
  position:absolute;
  top:14px;right:14px;
  border-radius:999px;
  background:#fef3c7;
  color:#92400e;
  padding:6px 10px;
  font-size:.72rem;
  font-weight:900;
}
#learning .mission-card:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 42px rgba(15,23,42,.11);
  border-color:#bfdbfe;
}
#learning .mission-card .text-3xl{font-size:2.5rem !important;margin-top:16px;}
#learning .mission-card h4{font-size:1.05rem;line-height:1.25;color:#0f172a;}
#learning .mission-complete,
#learning .mission-card.mission-complete{
  background:linear-gradient(180deg,#ecfdf5 0%,#fff 62%) !important;
  border-color:#86efac !important;
}
#learning .mission-incomplete{
  background:#fff !important;
}
#learning .mission-card button{
  border-radius:14px !important;
  font-weight:850;
  box-shadow:0 10px 20px rgba(37,99,235,.18);
}
#learning .mission-card button:disabled{
  box-shadow:none;
  background:#cbd5e1 !important;
  color:#64748b !important;
}

/* ===== Fields / Pathway Cards ===== */
#fields .grid > div,
#pathway .grid > div,
#skills .grid > div{
  border-radius:22px !important;
  border:1px solid #e2e8f0;
  box-shadow:var(--ng-shadow);
  transition:transform .18s ease, border-color .18s ease;
}
#fields .grid > div:hover,
#pathway .grid > div:hover,
#skills .grid > div:hover{
  transform:translateY(-3px);
  border-color:#bfdbfe;
}

/* ===== Passport ===== */
#passport .bg-gradient-to-r,
#passportCard{
  border-radius:28px !important;
  box-shadow:0 18px 42px rgba(29,78,216,.20);
}
#passportPhoto{
  background:rgba(255,255,255,.20) !important;
  border:2px solid rgba(255,255,255,.55) !important;
}

/* ===== Admin/Counselor general polish ===== */
#adminPanel, #counselorPanel,
[id*="admin" i] .bg-white,
[id*="counselor" i] .bg-white{
  border-radius:22px !important;
}
table{
  border-collapse:separate !important;
  border-spacing:0 !important;
}
thead th{
  background:#f1f5f9 !important;
  color:#334155 !important;
  font-weight:900 !important;
  text-transform:uppercase;
  font-size:.72rem;
  letter-spacing:.06em;
}
tbody tr:hover{background:#f8fafc;}

/* ===== Footer Nav ===== */
#footerNav{
  border-top:1px solid #e2e8f0 !important;
  box-shadow:0 -12px 30px rgba(15,23,42,.08) !important;
}
#footerNav button{
  font-weight:800;
}
#footerNav button[aria-current="page"],
#footerNav .active{
  color:#1d4ed8 !important;
}

/* ===== Mobile ===== */
@media (max-width: 900px){
  #navigation{padding:14px 14px 16px !important;}
  #navigation > .container{
    grid-template-columns:1fr !important;
    gap:12px !important;
    text-align:left;
  }
  #navigation .flex.items-center.space-x-3{
    width:100%;
  }
  #navigation img[alt="NextGEN"]{width:44px !important;height:44px !important;}
  #navigation h1{font-size:1.55rem !important;white-space:normal;}
  #navigation h1::after{font-size:.62rem;margin-top:4px;}
  #navigation > .container > div:last-child{
    justify-self:stretch !important;
    align-items:flex-start !important;
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:wrap;
    gap:8px !important;
    background:rgba(255,255,255,.09);
    border:1px solid rgba(255,255,255,.14);
    border-radius:18px;
    padding:10px;
  }
  #headerRegName{max-width:100% !important;}
  #logoutBtn{padding:.55rem .85rem !important;}
  .container.mx-auto.p-4{padding:20px 14px 92px !important;}
  #dashboardStats{
    grid-template-columns:1fr !important;
    text-align:center;
    padding:24px 18px !important;
  }
  #dashboardProfilePicture{margin-inline:auto;}
  #learning .mission-card{min-height:240px;}
  #footerNav .max-w-4xl{grid-template-columns:repeat(5,1fr) !important;}
  #footerNav span{font-size:.65rem;}
}

@media (min-width: 901px) and (max-width: 1280px){
  #navigation > .container{grid-template-columns:1fr auto 1fr;}
  #navigation h1{font-size:1.95rem !important;}
  #dashboardStats{grid-template-columns:1fr 1fr;}
}

@media print{
  #navigation,#footerNav,.no-print{display:none !important;}
  body{background:#fff !important;}
}