:root{
  --educya-orange:#EC6607;
  --educya-blue:#16203C;
  --educya-green:#0C8468;
  --educya-grey:#4C4B4D;

  --bg:#F5F7FA;
  --surface:#FFFFFF;
  --surface-soft:#F8FAFC;
  --border:#E4E7EC;
  --text:#172033;
  --muted:#667085;
  --sidebar-width:278px;
  --header-height:68px;

  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:18px;
  --shadow:0 4px 18px rgba(16,24,40,.06);
}

*{box-sizing:border-box}

html,body{
  margin:0;
  min-height:100%;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}

a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}

.app-shell{min-height:100vh}

/* SIDEBAR */
.sidebar{
  position:fixed;
  inset:0 auto 0 0;
  width:var(--sidebar-width);
  background:var(--educya-blue);
  color:#fff;
  display:flex;
  flex-direction:column;
  z-index:50;
  overflow-y:auto;
}

.brand{
  min-height:86px;
  padding:22px 22px 18px;
  border-bottom:1px solid rgba(255,255,255,.1);
}

.brand-title{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:1.14rem;
  font-weight:800;
  letter-spacing:.01em;
}

.brand-mark{
  width:34px;
  height:34px;
  border-radius:10px;
  background:var(--educya-orange);
  display:grid;
  place-items:center;
  font-weight:900;
}

.brand-subtitle{
  margin-top:6px;
  font-size:.78rem;
  color:rgba(255,255,255,.64);
}

.nav{
  padding:18px 12px 28px;
  flex:1;
}

.nav-section{margin:0 0 19px}
.nav-label{
  padding:0 11px 7px;
  color:rgba(255,255,255,.45);
  font-size:.69rem;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.nav-link{
  display:flex;
  align-items:center;
  gap:11px;
  min-height:42px;
  margin:2px 0;
  padding:9px 11px;
  border-radius:10px;
  color:rgba(255,255,255,.78);
  font-size:.9rem;
  font-weight:550;
  transition:.15s ease;
}

.nav-link:hover{
  background:rgba(255,255,255,.08);
  color:#fff;
}

.nav-link.active{
  background:rgba(236,102,7,.18);
  color:#fff;
  box-shadow:inset 3px 0 0 var(--educya-orange);
}

.nav-icon{
  width:21px;
  text-align:center;
  font-size:1rem;
  opacity:.9;
}

.sidebar-footer{
  padding:14px 18px 20px;
  border-top:1px solid rgba(255,255,255,.1);
  font-size:.76rem;
  color:rgba(255,255,255,.5);
}

/* HEADER */
.main-shell{
  margin-left:var(--sidebar-width);
  min-height:100vh;
}

.topbar{
  position:sticky;
  top:0;
  z-index:40;
  height:var(--header-height);
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 28px;
}

.topbar-left{
  display:flex;
  align-items:center;
  gap:18px;
  min-width:0;
}

.mobile-menu{
  display:none;
  border:0;
  background:transparent;
  font-size:1.4rem;
  cursor:pointer;
}

.context{
  min-width:0;
}
.context-company{
  font-weight:750;
  color:var(--educya-blue);
  white-space:nowrap;
}
.context-meta{
  margin-top:2px;
  font-size:.76rem;
  color:var(--muted);
}

.topbar-right{
  display:flex;
  align-items:center;
  gap:10px;
}

.user-chip{
  border:1px solid var(--border);
  border-radius:999px;
  padding:7px 11px;
  display:flex;
  align-items:center;
  gap:9px;
  background:#fff;
  font-size:.84rem;
}

.user-avatar{
  width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--educya-blue);
  color:#fff;
  font-size:.76rem;
  font-weight:800;
}

/* CONTENT */
.page{
  padding:28px;
  max-width:1600px;
  margin:0 auto;
}

.page-heading{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
  margin-bottom:24px;
}

.eyebrow{
  color:var(--educya-orange);
  font-size:.74rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:7px;
}

h1{
  font-size:1.8rem;
  line-height:1.15;
  margin:0 0 7px;
  color:var(--educya-blue);
}

h2,h3{color:var(--educya-blue)}

.page-description{
  margin:0;
  color:var(--muted);
  line-height:1.55;
  max-width:850px;
}

.actions{
  display:flex;
  gap:9px;
  flex-wrap:wrap;
}

.btn{
  min-height:40px;
  border-radius:10px;
  border:1px solid var(--border);
  padding:9px 14px;
  background:#fff;
  color:var(--educya-blue);
  font-weight:700;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
}

.btn-primary{
  background:var(--educya-blue);
  color:#fff;
  border-color:var(--educya-blue);
}
.btn-orange{
  background:var(--educya-orange);
  color:#fff;
  border-color:var(--educya-orange);
}
.btn:hover{filter:brightness(.97)}

.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  padding:22px;
}

.grid{display:grid;gap:18px}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}

.kpi-label{
  color:var(--muted);
  font-size:.79rem;
  font-weight:700;
}
.kpi-value{
  margin-top:10px;
  font-size:1.75rem;
  font-weight:850;
  color:var(--educya-blue);
}
.kpi-note{
  margin-top:6px;
  color:var(--muted);
  font-size:.76rem;
}

.module-card{
  display:flex;
  flex-direction:column;
  gap:9px;
  min-height:170px;
}
.module-icon{
  width:42px;height:42px;border-radius:12px;
  display:grid;place-items:center;
  background:#F2F4F7;
  font-size:1.15rem;
}
.module-title{
  font-size:1rem;
  font-weight:800;
  color:var(--educya-blue);
}
.module-description{
  color:var(--muted);
  line-height:1.45;
  font-size:.86rem;
  flex:1;
}
.module-link{
  font-size:.84rem;
  font-weight:800;
  color:var(--educya-orange);
}

.notice{
  padding:15px 17px;
  border-radius:12px;
  background:#FFF8F2;
  border:1px solid #FCDDC7;
  color:#7A3E10;
  line-height:1.5;
}

.status-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border-radius:999px;
  padding:5px 9px;
  font-size:.75rem;
  font-weight:700;
  background:#ECFDF3;
  color:#027A48;
}

.status-dot{
  width:7px;height:7px;border-radius:50%;background:#12B76A;
}

table{
  width:100%;
  border-collapse:collapse;
}
th{
  text-align:left;
  padding:11px 10px;
  color:var(--muted);
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  border-bottom:1px solid var(--border);
}
td{
  padding:12px 10px;
  border-bottom:1px solid #F0F2F5;
  font-size:.88rem;
}

.empty-state{
  text-align:center;
  padding:48px 20px;
  color:var(--muted);
}

.mobile-overlay{display:none}

@media(max-width:1180px){
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:860px){
  .sidebar{
    transform:translateX(-100%);
    transition:transform .2s ease;
  }
  body.nav-open .sidebar{transform:translateX(0)}
  body.nav-open .mobile-overlay{
    display:block;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.35);
    z-index:45;
  }
  .main-shell{margin-left:0}
  .mobile-menu{display:block}
  .topbar{padding:0 16px}
  .page{padding:20px 16px}
  .page-heading{flex-direction:column}
  .grid-4,.grid-3,.grid-2{grid-template-columns:1fr}
  .context-meta{display:none}
}

@media(max-width:520px){
  .user-chip span:last-child{display:none}
  h1{font-size:1.5rem}
}