/* =========================================================
   ManaCoding Institute — LMS Dashboard Styles
   Reuses the marketing site's brand tokens (blue → cyan gradient,
   Poppins/Inter) so the LMS feels like the same product.
========================================================= */
:root{
  --white:#FFFFFF;
  --primary:#2563EB;
  --primary-dark:#1D4ED8;
  --secondary:#06B6D4;
  --accent:#F59E0B;
  --success:#10B981;
  --danger:#EF4444;
  --info:#0EA5E9;
  --ink:#0F172A;
  --ink-soft:#475569;
  --muted:#64748B;
  --border:#E2E8F0;
  --soft-bg:#F8FAFC;
  --sidebar-bg:#0F172A;
  --sidebar-ink:#CBD5E1;
  --shadow-sm:0 2px 8px rgba(15,23,42,.05);
  --shadow-md:0 10px 28px rgba(15,23,42,.08);
  --shadow-lg:0 20px 50px rgba(15,23,42,.14);
  --radius:16px;
  --radius-sm:10px;
  --font-display:'Poppins',sans-serif;
  --font-body:'Inter',sans-serif;
  --sidebar-w:260px;
}

*{box-sizing:border-box;}
body.dash-body{
  margin:0;
  font-family:var(--font-body);
  background:var(--soft-bg);
  color:var(--ink);
}
h1,h2,h3,h4,h5,h6{font-family:var(--font-display); font-weight:700; color:var(--ink);}
.text-grad{background:linear-gradient(90deg,var(--primary),var(--secondary)); -webkit-background-clip:text; background-clip:text; color:transparent;}
a{text-decoration:none;}

/* ============== Shell layout ============== */
.dash-shell{display:flex; min-height:100vh;}
.dash-main{flex:1; display:flex; flex-direction:column; min-width:0; margin-left:var(--sidebar-w); transition:margin-left .25s ease;}

/* ============== Sidebar ============== */
.dash-sidebar{
  width:var(--sidebar-w); background:var(--sidebar-bg); color:var(--sidebar-ink);
  position:fixed; top:0; left:0; bottom:0; overflow-y:auto; z-index:1040;
  display:flex; flex-direction:column; transition:transform .25s ease;
}
.sidebar-brand{padding:1.4rem 1.3rem; border-bottom:1px solid rgba(255,255,255,.08);}
.brand-mark{
  width:36px;height:36px;border-radius:9px; background:linear-gradient(135deg,var(--primary),var(--secondary));
  color:#fff; display:inline-flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; box-shadow:var(--shadow-sm);
}
.brand-text-side{display:inline-flex; flex-direction:column; line-height:1.1; font-family:var(--font-display); font-weight:700; color:#fff; font-size:1rem; vertical-align:middle;}
.brand-text-side small{font-size:.55rem; letter-spacing:.14em; color:#94A3B8; font-weight:600;}
.sidebar-nav{padding:.8rem; flex:1; display:flex; flex-direction:column; gap:.15rem;}
.sidebar-link{
  display:flex; align-items:center; gap:.7rem; padding:.6rem .8rem; border-radius:10px;
  color:var(--sidebar-ink); font-size:.88rem; font-weight:500; transition:.15s ease;
}
.sidebar-link i{font-size:1rem; width:18px; text-align:center;}
.sidebar-link:hover{background:rgba(255,255,255,.06); color:#fff;}
.sidebar-link.active{background:linear-gradient(90deg,var(--primary),var(--secondary)); color:#fff; box-shadow:var(--shadow-sm);}
.sidebar-logout{margin-top:.5rem; border-top:1px solid rgba(255,255,255,.08); padding-top:.9rem; color:#FCA5A5;}
.sidebar-backdrop{display:none; position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:1035;}

@media (max-width: 991px){
  .dash-sidebar{transform:translateX(-100%);}
  .dash-sidebar.open{transform:translateX(0);}
  .dash-main{margin-left:0;}
  .sidebar-backdrop.show{display:block;}
}

/* ============== Topbar ============== */
.dash-topbar{
  height:68px; background:var(--white); border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:1rem; padding:0 1.4rem; position:sticky; top:0; z-index:1020;
}
.sidebar-toggle{
  display:none; background:none; border:1px solid var(--border); border-radius:8px; width:38px; height:38px; color:var(--ink);
}
@media (max-width:991px){ .sidebar-toggle{display:inline-flex; align-items:center; justify-content:center;} }
.topbar-title{font-size:1.15rem; margin:0; flex:1;}
.topbar-right{display:flex; align-items:center; gap:.6rem;}
.topbar-icon-btn{
  width:40px;height:40px;border-radius:50%; border:1px solid var(--border); background:var(--white);
  display:flex; align-items:center; justify-content:center; color:var(--ink-soft); position:relative;
}
.notif-dot{position:absolute; top:8px; right:9px; width:8px; height:8px; border-radius:50%; background:var(--danger);}
.notif-dropdown{width:320px; max-height:360px; overflow-y:auto; padding:.4rem;}
.user-chip{
  display:flex; align-items:center; gap:.5rem; background:var(--white); border:1px solid var(--border);
  border-radius:30px; padding:.3rem .8rem .3rem .3rem; font-size:.88rem; font-weight:600; color:var(--ink);
}
.avatar-sm{width:32px;height:32px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;}
.avatar-md{width:52px;height:52px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.1rem;font-weight:700;}
.avatar-lg{width:88px;height:88px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.8rem;font-weight:700;}

/* ============== Content ============== */
.dash-content{padding:1.6rem; flex:1;}

/* ============== Cards ============== */
.stat-tile{
  background:var(--white); border:1px solid var(--border); border-radius:var(--radius);
  padding:1.3rem; display:flex; align-items:center; gap:1rem; height:100%; box-shadow:var(--shadow-sm); transition:.2s ease;
}
.stat-tile:hover{box-shadow:var(--shadow-md); transform:translateY(-3px);}
.stat-icon{
  width:52px;height:52px;border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:1.4rem; color:#fff; flex-shrink:0;
}
.stat-value{font-family:var(--font-display); font-size:1.6rem; font-weight:800; line-height:1;}
.stat-label{color:var(--muted); font-size:.82rem; font-weight:500; margin-top:.15rem;}

.panel{background:var(--white); border:1px solid var(--border); border-radius:var(--radius); padding:1.4rem; box-shadow:var(--shadow-sm);}
.panel-title{font-size:1rem; font-weight:700; margin-bottom:1rem; display:flex; align-items:center; justify-content:space-between;}

/* ============== Tables ============== */
.table-clean thead th{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:700;
  border-bottom:1px solid var(--border); padding:.7rem .9rem; white-space:nowrap;
}
.table-clean tbody td{padding:.75rem .9rem; vertical-align:middle; border-bottom:1px solid var(--border); font-size:.88rem;}
.table-clean tbody tr:last-child td{border-bottom:none;}
.table-clean tbody tr:hover{background:var(--soft-bg);}

/* ============== Badges ============== */
.badge-soft{
  display:inline-flex; align-items:center; gap:.3rem; padding:.28rem .65rem; border-radius:20px; font-size:.72rem; font-weight:700;
}
.badge-soft-success{background:#DCFCE7; color:#15803D;}
.badge-soft-warning{background:#FEF3C7; color:#B45309;}
.badge-soft-danger{background:#FEE2E2; color:#B91C1C;}
.badge-soft-info{background:#DBEAFE; color:#1D4ED8;}
.badge-soft-secondary{background:#F1F5F9; color:#475569;}

/* ============== Progress bars ============== */
.progress-thin{height:8px; border-radius:20px; background:var(--border); overflow:hidden;}
.progress-thin .bar{height:100%; border-radius:20px; background:linear-gradient(90deg,var(--primary),var(--secondary));}

/* ============== Buttons ============== */
.btn-grad{background:linear-gradient(90deg,var(--primary),var(--secondary)); border:none; color:#fff; font-weight:600; border-radius:10px;}
.btn-grad:hover{color:#fff; opacity:.92;}
.btn-soft-danger{background:#FEE2E2; color:#B91C1C; border:none; font-weight:600; border-radius:10px;}
.btn-soft-success{background:#DCFCE7; color:#15803D; border:none; font-weight:600; border-radius:10px;}

/* ============== Forms ============== */
.form-control, .form-select{border-radius:10px; border:1px solid var(--border);}
.form-control:focus, .form-select:focus{border-color:var(--primary); box-shadow:0 0 0 .2rem rgba(37,99,235,.12);}
.form-label{font-size:.85rem; font-weight:600; color:var(--ink-soft);}

/* ============== Login page ============== */
.login-shell{min-height:100vh; display:flex;}
.login-visual{
  flex:1; background:linear-gradient(160deg,var(--primary),var(--secondary)); color:#fff;
  display:flex; flex-direction:column; justify-content:center; padding:4rem; position:relative; overflow:hidden;
}
.login-visual::before{
  content:''; position:absolute; width:400px; height:400px; border-radius:50%; background:rgba(255,255,255,.08);
  top:-120px; right:-120px;
}
.login-visual::after{
  content:''; position:absolute; width:300px; height:300px; border-radius:50%; background:rgba(255,255,255,.06);
  bottom:-100px; left:-80px;
}
.login-form-side{flex:1; display:flex; align-items:center; justify-content:center; padding:2rem; background:var(--white);}
.login-card{width:100%; max-width:420px;}
.login-illustration{max-width:340px; margin-top:2rem; filter:drop-shadow(0 20px 40px rgba(0,0,0,.2));}
@media (max-width:900px){ .login-visual{display:none;} }
.pass-toggle{cursor:pointer;}

/* ============== Empty states ============== */
.empty-state{text-align:center; padding:3rem 1rem; color:var(--muted);}
.empty-state i{font-size:2.4rem; color:var(--border); margin-bottom:.8rem; display:block;}

/* ============== Attendance Calendar ============== */
.att-cal{display:grid; grid-template-columns:repeat(7,1fr); gap:6px;}
.att-cal .cell{aspect-ratio:1; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:.78rem; font-weight:600;}
.att-cal .cell.present{background:#DCFCE7; color:#15803D;}
.att-cal .cell.late{background:#DBEAFE; color:#1D4ED8;}
.att-cal .cell.absent{background:#FEE2E2; color:#B91C1C;}
.att-cal .cell.leave{background:#FEF3C7; color:#B45309;}
.att-cal .cell.empty{background:transparent;}

/* ============== Big touch buttons (mobile check-in/out) ============== */
.touch-btn{border-radius:16px; padding:1.2rem; font-size:1.05rem; font-weight:700; border:none; width:100%;}
@media (max-width:576px){ .touch-btn{padding:1.4rem; font-size:1.15rem;} }

/* Certificate preview */
.certificate-preview{
  border:10px solid var(--primary); border-radius:12px; padding:2.5rem; text-align:center; background:linear-gradient(180deg,#fff,#F8FBFF);
  position:relative;
}
.certificate-preview .cert-seal{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--primary));display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.8rem;margin:0 auto 1rem;}