/* ==========================================================================
   NESPL Portal — Suite pages
   Student profile, resume templates, candidate resume view, company profile,
   admin dashboard and user management. All classes use the .sx- prefix.
   ========================================================================== */

@keyframes sxRise { from { opacity:0; transform: translateY(16px); } to { opacity:1; transform:none; } }
.sx-in { animation: sxRise .45s cubic-bezier(.2,.8,.2,1) both; }
.sx-in-1 { animation-delay:.05s } .sx-in-2 { animation-delay:.10s }
.sx-in-3 { animation-delay:.15s } .sx-in-4 { animation-delay:.20s }

/* ==========================================================================
   1. Hero (house pattern)
   ========================================================================== */
.sx-hero {
  position: relative; overflow: hidden; border-radius: var(--radius-lg);
  padding: clamp(1.5rem,3.5vw,2.4rem); margin-bottom: 1.6rem; color: #fff;
  background: linear-gradient(125deg,#1e3a8a 0%,#2563eb 45%,#4f46e5 100%);
}
.sx-hero.plum { background: linear-gradient(125deg,#4c1d95 0%,#6d28d9 45%,#7c3aed 100%); }
.sx-hero::before,.sx-hero::after { content:""; position:absolute; border-radius:50%; pointer-events:none; }
.sx-hero::before { width:330px; height:330px; right:-80px; top:-150px; background:rgba(255,255,255,.13); }
.sx-hero::after  { width:200px; height:200px; right:160px; bottom:-130px; background:rgba(255,255,255,.08); }
.sx-hero__in { position:relative; z-index:2; display:flex; align-items:flex-end; gap:1.5rem; flex-wrap:wrap; }
.sx-hero__text { flex:1; min-width:240px; }
.sx-hero__eyebrow {
  display:inline-flex; align-items:center; gap:.45rem; font-size:.72rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.8);
  background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.21);
  padding:.3rem .7rem; border-radius:999px; margin-bottom:.8rem;
}
.sx-hero h1 { color:#fff; font-size:clamp(1.5rem,3.4vw,2.15rem); margin:0 0 .45rem; letter-spacing:-.02em; }
.sx-hero p { color:rgba(255,255,255,.82); margin:0; font-size:.94rem; max-width:56ch; }
.sx-hero__stats { display:flex; gap:2rem; flex-wrap:wrap; margin-top:1.4rem; }
.sx-hero__stat b { display:block; font-family:var(--font-display); font-size:1.7rem; line-height:1; color:#fff; font-variant-numeric:tabular-nums; }
.sx-hero__stat span { font-size:.76rem; color:rgba(255,255,255,.72); letter-spacing:.04em; }
.sx-hero__cta {
  background:#fff; color:#1e3a8a; border:none; border-radius:14px; padding:.95rem 1.5rem;
  font-family:var(--font-display); font-weight:700; font-size:.95rem; cursor:pointer;
  display:inline-flex; align-items:center; gap:.6rem;
  box-shadow:0 14px 34px rgba(8,18,50,.28); transition:transform .22s, box-shadow .22s;
}
.sx-hero__cta:hover { transform:translateY(-3px); box-shadow:0 20px 44px rgba(8,18,50,.34); }

/* ==========================================================================
   2. Toolbar / panels / tables
   ========================================================================== */
.sx-tools { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; margin-bottom:1.2rem; }
.sx-search { position:relative; flex:1 1 260px; max-width:400px; }
.sx-search input { padding-left:2.7rem; height:48px; border-radius:14px; background:#fff; }
.sx-search i { position:absolute; left:1rem; top:50%; transform:translateY(-50%); color:var(--muted); pointer-events:none; }
.sx-filter {
  height:48px; border-radius:14px; border:1.5px solid var(--line); background:#fff;
  padding:0 2.4rem 0 1rem; font-family:var(--font-display); font-weight:600; font-size:.88rem;
  color:var(--body); cursor:pointer; min-width:150px;
}

.sx-panel { background:#fff; border:1px solid var(--line); border-radius:20px; overflow:hidden; box-shadow:var(--shadow-sm); }
.sx-table { width:100%; border-collapse:collapse; }
.sx-table thead th {
  background:linear-gradient(135deg,#1e3a8a,#2563eb); color:#fff;
  font-family:var(--font-display); font-weight:600; font-size:.78rem; letter-spacing:.07em;
  text-transform:uppercase; text-align:left; padding:.95rem 1.2rem; white-space:nowrap;
}
.sx-table thead th:last-child { text-align:right; }
.sx-table tbody td { padding:1rem 1.2rem; border-bottom:1px solid var(--line); vertical-align:middle; }
.sx-table tbody tr:last-child td { border-bottom:none; }
.sx-table tbody tr { transition:background .18s; }
.sx-table tbody tr:hover { background:var(--surface-2); }
.sx-cell-k { display:none; }

.sx-who { display:flex; align-items:center; gap:.75rem; min-width:0; }
.sx-av {
  width:40px; height:40px; flex:0 0 40px; border-radius:12px; display:grid; place-items:center;
  background:var(--grad-blue); color:#fff; font-family:var(--font-display); font-weight:700; font-size:.8rem;
}
.sx-av.o { background:var(--grad-orange); } .sx-av.g { background:var(--grad-green); }
.sx-av.p { background:linear-gradient(135deg,#7c3aed,#6d28d9); }
.sx-who__n { font-family:var(--font-display); font-weight:600; color:var(--ink); font-size:.92rem; line-height:1.3; }
.sx-who__s { font-size:.79rem; color:var(--muted); word-break:break-word; }

.sx-pill {
  display:inline-flex; align-items:center; gap:.4rem; padding:.3rem .72rem; border-radius:999px;
  font-size:.75rem; font-weight:700; font-family:var(--font-display); white-space:nowrap;
}
.sx-pill::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.sx-pill.ok   { background:var(--green-soft); color:#15803d; border:1px solid #bbf7d0; }
.sx-pill.warn { background:#fff6e5; color:#b45309; border:1px solid #fde3b4; }
.sx-pill.info { background:var(--blue-50); color:var(--blue-700); border:1px solid var(--blue-100); }
.sx-pill.off  { background:#eef1f6; color:#5b6b84; border:1px solid var(--line); }
.sx-pill.bad  { background:#fef2f2; color:#b91c1c; border:1px solid #fecaca; }

.sx-acts { display:flex; gap:.45rem; justify-content:flex-end; flex-wrap:wrap; }
.sx-btn {
  display:inline-flex; align-items:center; gap:.4rem; padding:.5rem .85rem; border-radius:10px;
  font-family:var(--font-display); font-weight:600; font-size:.82rem; cursor:pointer;
  border:1.5px solid var(--line); background:#fff; color:var(--body); transition:.18s; white-space:nowrap;
}
.sx-btn:hover { transform:translateY(-2px); border-color:var(--blue-400); color:var(--blue-700); background:var(--blue-50); }
.sx-btn.solid { background:var(--grad-blue); border-color:transparent; color:#fff; box-shadow:0 8px 18px rgba(37,99,235,.26); }
.sx-btn.solid:hover { color:#fff; filter:brightness(1.05); }
.sx-btn.danger:hover { border-color:#fecaca; color:#dc2626; background:#fef2f2; }
.sx-btn:disabled { opacity:.45; cursor:not-allowed; transform:none; }
.sx-btn:focus-visible { box-shadow:var(--ring); }

.sx-foot { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; padding:1.05rem 1.3rem; border-top:1px solid var(--line); background:var(--surface-2); }
.sx-foot__count { flex:1; text-align:center; font-size:.86rem; color:var(--muted); min-width:150px; }
.sx-pager { display:flex; gap:.3rem; }
.sx-pager button {
  min-width:36px; height:36px; border-radius:10px; border:1.5px solid var(--line); background:#fff;
  color:var(--body); cursor:pointer; font-family:var(--font-display); font-weight:600; font-size:.84rem; transition:.18s;
}
.sx-pager button:hover:not(:disabled) { border-color:var(--blue-400); color:var(--blue-700); }
.sx-pager button.on { background:var(--grad-blue); border-color:transparent; color:#fff; }
.sx-pager button:disabled { opacity:.35; cursor:not-allowed; }

.sx-empty { text-align:center; padding:3.5rem 1rem; }
.sx-empty__ico { width:84px; height:84px; border-radius:25px; margin:0 auto 1.1rem; display:grid; place-items:center; background:var(--blue-50); color:var(--blue-400); font-size:2.1rem; }
.sx-empty p { color:var(--muted); font-size:.92rem; margin:.3rem 0 1.1rem; }

/* ==========================================================================
   3. Stat tiles (admin dashboard)
   ========================================================================== */
.sx-kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:1.1rem; margin-bottom:1.6rem; }
.sx-kpi {
  background:#fff; border:1px solid var(--line); border-radius:20px; padding:1.3rem;
  position:relative; overflow:hidden; box-shadow:var(--shadow-sm);
  transition:transform .25s, box-shadow .25s, border-color .25s;
}
.sx-kpi:hover { transform:translateY(-4px); box-shadow:var(--shadow); border-color:transparent; }
.sx-kpi::after {
  content:""; position:absolute; right:-42px; top:-42px; width:130px; height:130px; border-radius:50%;
  background:linear-gradient(135deg,var(--k1,#2563eb),var(--k2,#4f46e5)); opacity:.08;
}
.sx-kpi__ico {
  width:46px; height:46px; border-radius:14px; display:grid; place-items:center; color:#fff; font-size:1.15rem;
  background:linear-gradient(135deg,var(--k1,#2563eb),var(--k2,#4f46e5)); margin-bottom:.9rem;
  box-shadow:0 8px 20px rgba(37,99,235,.24);
}
.sx-kpi__v { font-family:var(--font-display); font-weight:700; font-size:1.85rem; color:var(--ink); line-height:1; font-variant-numeric:tabular-nums; }
.sx-kpi__l { font-size:.82rem; color:var(--muted); margin-top:.25rem; }
.sx-kpi__d { display:inline-flex; align-items:center; gap:.25rem; font-size:.76rem; font-weight:700; font-family:var(--font-display); margin-top:.6rem; }
.sx-kpi__d.up { color:#15803d; } .sx-kpi__d.down { color:#b91c1c; }

/* simple CSS bar chart */
.sx-chart { display:flex; align-items:flex-end; gap:.6rem; height:190px; padding-top:1rem; }
.sx-bar { flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:.5rem; height:100%; min-width:0; }
.sx-bar__v { width:100%; border-radius:9px 9px 4px 4px; background:var(--grad-blue); position:relative; transition:height .6s cubic-bezier(.2,.8,.2,1); }
.sx-bar__v.sx-alt { background:linear-gradient(135deg,#7c3aed,#6d28d9); }
.sx-bar__n { font-size:.72rem; color:var(--muted); font-family:var(--font-display); font-weight:600; white-space:nowrap; }
.sx-bar__t { font-size:.72rem; font-weight:700; color:var(--ink); font-family:var(--font-display); }

/* ==========================================================================
   4. Resume templates
   ========================================================================== */
.sx-rgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); gap:1.3rem; }
.sx-rcard {
  background:#fff; border:1.5px solid var(--line); border-radius:20px; overflow:hidden; cursor:pointer;
  transition:transform .25s, box-shadow .25s, border-color .25s; position:relative;
}
.sx-rcard:hover { transform:translateY(-5px); box-shadow:var(--shadow); border-color:var(--blue-200); }
.sx-rcard.on { border-color:var(--blue-500); box-shadow:0 0 0 3px rgba(37,99,235,.14), var(--shadow); }
.sx-rcard__tick {
  position:absolute; top:.8rem; right:.8rem; z-index:3; width:28px; height:28px; border-radius:50%;
  background:var(--grad-blue); color:#fff; display:none; place-items:center; font-size:.75rem;
  box-shadow:0 6px 14px rgba(37,99,235,.34);
}
.sx-rcard.on .sx-rcard__tick { display:grid; }
/* miniature page preview built from divs */
.sx-prev { height:210px; padding:1rem; background:var(--surface-2); border-bottom:1px solid var(--line); overflow:hidden; }
.sx-page { background:#fff; height:100%; border-radius:6px; box-shadow:var(--shadow-xs); padding:.7rem; font-size:0; }
.sx-page i { display:block; background:#e2e8f0; border-radius:2px; height:4px; margin-bottom:4px; }
.sx-page i.t  { height:9px; width:52%; background:#1e3a8a; margin-bottom:5px; }
.sx-page i.s  { width:34%; background:#94a3b8; margin-bottom:8px; }
.sx-page i.h  { height:5px; width:24%; background:#2563eb; margin:9px 0 5px; }
.sx-page i.w70{ width:70% } .sx-page i.w85{ width:85% } .sx-page i.w45{ width:45% }
.sx-page.two { display:flex; gap:.5rem; }
.sx-page.two .col-l { width:34%; background:#eef4ff; border-radius:4px; padding:.5rem; }
.sx-page.two .col-r { flex:1; }
.sx-page.hdr .band { background:var(--grad-blue); border-radius:4px; height:32px; margin:-.7rem -.7rem .6rem; }
.sx-rcard__b { padding:1rem 1.1rem 1.2rem; }
.sx-rcard__t { font-family:var(--font-display); font-weight:700; color:var(--ink); font-size:.98rem; margin:0 0 .2rem; }
.sx-rcard__s { font-size:.8rem; color:var(--muted); line-height:1.45; }
.sx-tags { display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.7rem; }
.sx-tag { padding:.22rem .6rem; border-radius:999px; font-size:.71rem; font-weight:600; font-family:var(--font-display); background:var(--blue-50); color:var(--blue-700); border:1px solid var(--blue-100); }

/* ==========================================================================
   5. Resume / profile document view
   ========================================================================== */
.sx-doc { background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); }
.sx-doc__band { background:linear-gradient(125deg,#1e3a8a,#2563eb 55%,#4f46e5); padding:1.8rem 1.7rem; color:#fff; position:relative; overflow:hidden; }
.sx-doc__band::after { content:""; position:absolute; right:-70px; top:-90px; width:250px; height:250px; border-radius:50%; background:rgba(255,255,255,.12); }
.sx-doc__row { display:flex; gap:1.1rem; align-items:center; position:relative; z-index:2; flex-wrap:wrap; }
.sx-doc__av {
  width:76px; height:76px; flex:0 0 76px; border-radius:22px; display:grid; place-items:center;
  background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.3); color:#fff;
  font-family:var(--font-display); font-weight:700; font-size:1.5rem; backdrop-filter:blur(6px);
}
.sx-doc__id { flex:1; min-width:200px; }
.sx-doc__id h2 { color:#fff; margin:0 0 .2rem; font-size:1.45rem; letter-spacing:-.01em; }
.sx-doc__id .role { color:rgba(255,255,255,.86); font-size:.94rem; font-weight:500; }
.sx-doc__meta { display:flex; flex-wrap:wrap; gap:.45rem; margin-top:1rem; position:relative; z-index:2; }
.sx-chip {
  display:inline-flex; align-items:center; gap:.4rem; padding:.35rem .78rem; border-radius:9px;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.24); color:#fff;
  font-size:.81rem; font-weight:600; font-family:var(--font-display);
}
.sx-doc__body { padding:1.6rem; }

.sx-sec { margin-bottom:1.7rem; }
.sx-sec:last-child { margin-bottom:0; }
.sx-sec__h {
  display:flex; align-items:center; gap:.55rem; margin:0 0 .9rem; padding-bottom:.5rem;
  border-bottom:2px solid var(--blue-100);
  font-family:var(--font-display); font-weight:700; font-size:.78rem; letter-spacing:.09em;
  text-transform:uppercase; color:var(--blue-700);
}
.sx-sec__h i { font-size:.92rem; }
.sx-sec p { margin:0; color:var(--body); font-size:.93rem; line-height:1.7; }

.sx-tl { list-style:none; margin:0; padding:0 0 0 1.5rem; position:relative; }
.sx-tl::before { content:""; position:absolute; left:5px; top:6px; bottom:6px; width:2px; background:var(--line); }
.sx-tl > li { position:relative; padding-bottom:1.3rem; }
.sx-tl > li:last-child { padding-bottom:0; }
.sx-tl > li::before { content:""; position:absolute; left:-1.5rem; top:5px; width:12px; height:12px; border-radius:50%; background:#fff; border:2.5px solid var(--blue-500); }
.sx-tl h6 { margin:0 0 .12rem; font-size:.95rem; }
.sx-tl .org { color:var(--blue-600); font-weight:600; font-size:.87rem; font-family:var(--font-display); }
.sx-tl .when { font-size:.79rem; color:var(--muted); margin-top:.12rem; }
.sx-tl p { margin:.45rem 0 0; font-size:.88rem; }

.sx-kv { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:.7rem; }
.sx-kvi { padding:.8rem .9rem; border-radius:13px; background:var(--surface-2); border:1px solid var(--line); }
.sx-kvi__k { display:block; font-size:.68rem; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); font-weight:700; margin-bottom:.18rem; }
.sx-kvi__v { font-family:var(--font-display); font-weight:600; color:var(--ink); font-size:.9rem; line-height:1.4; word-break:break-word; }

.sx-skills { display:flex; flex-wrap:wrap; gap:.5rem; }
.sx-skill {
  display:inline-flex; align-items:center; gap:.45rem; padding:.42rem .55rem .42rem .85rem; border-radius:999px;
  background:var(--blue-50); border:1px solid var(--blue-100); color:var(--blue-700);
  font-family:var(--font-display); font-weight:600; font-size:.84rem;
}
.sx-skill small { background:#fff; border-radius:999px; padding:.1rem .45rem; font-size:.69rem; color:var(--muted); border:1px solid var(--blue-100); }

/* score ring for assessments */
.sx-ring {
  width:74px; height:74px; border-radius:50%; display:grid; place-items:center; flex:0 0 74px;
  background:conic-gradient(var(--rc,#16a34a) calc(var(--p,0)*1%), var(--line) 0); position:relative;
}
.sx-ring::before { content:""; position:absolute; inset:7px; background:#fff; border-radius:50%; }
.sx-ring b { position:relative; font-family:var(--font-display); font-size:.95rem; color:var(--ink); }

/* ==========================================================================
   6. Tabs
   ========================================================================== */
.sx-tabs { display:flex; gap:.4rem; background:var(--surface-2); border:1.5px solid var(--line); border-radius:14px; padding:5px; margin-bottom:1.4rem; flex-wrap:wrap; }
.sx-tab {
  flex:1; min-width:120px; border:none; background:transparent; border-radius:10px; padding:.7rem 1rem; cursor:pointer;
  font-family:var(--font-display); font-weight:600; font-size:.88rem; color:var(--muted); transition:.2s;
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
}
.sx-tab:hover { color:var(--blue-700); }
.sx-tab.on { background:#fff; color:var(--blue-700); box-shadow:var(--shadow-xs); }

/* ==========================================================================
   7. Email preview
   ========================================================================== */
.sx-mailgrid { display:grid; grid-template-columns:320px 1fr; gap:1.3rem; align-items:start; }
.sx-maillist { display:flex; flex-direction:column; gap:.55rem; }
.sx-mailitem {
  display:flex; gap:.8rem; align-items:flex-start; padding:.9rem 1rem; border-radius:14px; cursor:pointer;
  border:1.5px solid var(--line); background:#fff; transition:.18s; text-align:left; width:100%;
}
.sx-mailitem:hover { border-color:var(--blue-400); background:var(--blue-50); }
.sx-mailitem.on { border-color:var(--blue-500); background:var(--blue-50); box-shadow:0 0 0 3px rgba(37,99,235,.1); }
.sx-mailitem__ico { width:36px; height:36px; flex:0 0 36px; border-radius:11px; display:grid; place-items:center; background:var(--grad-blue); color:#fff; font-size:.9rem; }
.sx-mailitem__t { font-family:var(--font-display); font-weight:600; color:var(--ink); font-size:.88rem; line-height:1.3; }
.sx-mailitem__s { font-size:.76rem; color:var(--muted); margin-top:.12rem; }

.sx-mailview { background:#fff; border:1px solid var(--line); border-radius:20px; overflow:hidden; box-shadow:var(--shadow-sm); }
.sx-mailhead { padding:1.1rem 1.3rem; border-bottom:1px solid var(--line); background:var(--surface-2); }
.sx-mailhead__k { font-size:.7rem; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); font-weight:700; }
.sx-mailhead__v { font-family:var(--font-display); font-weight:600; color:var(--ink); font-size:.93rem; word-break:break-word; }
.sx-mailframe { width:100%; height:660px; border:none; display:block; background:#f4f6fb; }

/* ==========================================================================
   8. Responsive
   ========================================================================== */
@media (max-width: 980px) {
  .sx-mailgrid { grid-template-columns:1fr; }
  .sx-mailframe { height:560px; }
}
@media (max-width: 860px) {
  .sx-table, .sx-table tbody, .sx-table tr, .sx-table td { display:block; }
  .sx-table, .sx-table tbody, .sx-table td { width:100%; }
  .sx-table thead { display:none; }
  .sx-table tbody { padding:.8rem; }
  .sx-table tbody tr { width:auto; border:1px solid var(--line); border-radius:16px; margin:0 0 .8rem; padding:.3rem 0; background:#fff; }
  .sx-table tbody tr:last-child { margin-bottom:0; }
  .sx-table tbody tr:hover { background:#fff; }
  .sx-table tbody td { border-bottom:1px dashed var(--line); padding:.7rem 1rem; }
  .sx-table tbody td:last-child { border-bottom:none; }
  .sx-cell-k { display:block; font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:700; margin-bottom:.35rem; }
  .sx-acts { justify-content:flex-start; }
}
@media (max-width: 700px) {
  .sx-hero__in { flex-direction:column; align-items:stretch; }
  .sx-hero__cta { width:100%; justify-content:center; }
  .sx-hero__stats { gap:1.4rem; }
  .sx-hero__stat b { font-size:1.4rem; }
  .sx-search { max-width:none; }
  .sx-foot__count { order:3; flex:1 1 100%; text-align:left; }
  .sx-doc__body { padding:1.1rem; }
  .sx-chart { height:150px; gap:.35rem; }
  .sx-bar__n { font-size:.62rem; }
}
@media (prefers-reduced-motion: reduce) {
  .sx-in { animation:none; }
  .sx-kpi, .sx-rcard, .sx-btn, .sx-hero__cta, .sx-bar__v { transition:none; }
  .sx-kpi:hover, .sx-rcard:hover, .sx-btn:hover, .sx-hero__cta:hover { transform:none; }
}