/* 
 Waheed Anwar
 www.bunyaadacademy.com 
 +923214101285
*/

:root{
  --bg: #f4f7fb;
  --surface: rgba(255,255,255,.88);
  --surface-strong: #ffffff;
  --surface-soft: #f8fafc;
  --text: #1e293b;
  --text-strong: #0f172a;
  --text-muted: #5f7d9c;

  --primary: #1d4ed8;
  --primary-dark: #1e40af;
  --accent: #14b8a6;
  --success: #059669;
  --danger: #dc2626;
  --warning: #d97706;

  --border: rgba(203,213,225,.9);
  --border-strong: #cbd5e1;
  --ring: rgba(29,78,216,.18);

  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-xl: 28px;

  --shadow-sm: 0 1px 2px rgba(15,23,42,.06);
  --shadow-md: 0 10px 30px rgba(15,23,42,.08);
  --shadow-lg: 0 18px 50px rgba(15,23,42,.14);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,.18);

  --trans-fast: .18s ease;
  --trans: .28s ease;
}

*,
*::before,
*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  text-rendering:optimizeLegibility;
}

body{
  margin:0;
  min-height:100vh;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at top left, rgba(29,78,216,.10), transparent 30%),
    radial-gradient(circle at top right, rgba(20,184,166,.08), transparent 26%),
    linear-gradient(180deg, #f8fbff 0%, var(--bg) 100%);
  line-height:1.6;
  padding:24px;
}

a{
  color:var(--primary);
  text-decoration:none;
  transition: color var(--trans-fast), transform var(--trans-fast), opacity var(--trans-fast), background var(--trans-fast);
}
a:hover{ color:var(--primary-dark); }

img{
  max-width:100%;
  display:block;
}

.container{
  width:min(1220px, 100%);
  margin:0 auto;
  padding:28px;
  background:var(--surface);
  border:1px solid rgba(255,255,255,.65);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-lg);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.site-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  padding-bottom:18px;
  margin-bottom:28px;
  border-bottom:1px solid var(--border);
}

.logo-link{
  display:inline-flex;
  align-items:center;
  gap:12px;
}
.logo-image{
  height:72px;
  object-fit:contain;
  border-radius:8px;
  background:#fff;
  padding:6px;
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
}

.profile-dropdown{ position:relative; display:inline-block; }
.profile-trigger{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 14px;
  border:1px solid var(--border);
  border-radius:999px;
  background:#fff;
  box-shadow:var(--shadow-sm);
  cursor:pointer;
  transition:transform var(--trans-fast), box-shadow var(--trans-fast), border-color var(--trans-fast);
}
.profile-trigger:hover{
  transform:translateY(-1px);
  border-color:var(--border-strong);
  box-shadow:var(--shadow-md);
}
.profile-avatar{
  width:38px;
  height:38px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid #fff;
  box-shadow:0 0 0 1px var(--border);
}
.profile-name{
  font-weight:600;
  color:var(--text-strong);
}

.dropdown-menu{
  position:absolute;
  top:calc(100% + 12px);
  right:0;
  min-width:220px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:18px;
  padding:8px;
  box-shadow:var(--shadow-lg);
  opacity:0;
  visibility:hidden;
  transform:translateY(-10px) scale(.98);
  transform-origin:top right;
  transition:all var(--trans-fast);
  z-index:20;
}
.dropdown-menu.show{
  opacity:1;
  visibility:visible;
  transform:translateY(0) scale(1);
}
.dropdown-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 14px;
  border-radius:12px;
  color:var(--text) !important;
  font-weight:500;
}
.dropdown-item:hover{
  background:rgba(29,78,216,.07);
  color:var(--primary-dark) !important;
}

h1, h2, h3, h4{
  font-family: 'Ubuntu', sans-serif;
  margin:0.75rem 0 0.75rem;
  color:var(--text-strong);
  line-height:1.2;
  letter-spacing:-.02em;
}

h1{ font-size:2.05rem; }
h2{ font-size:1.45rem; }
h3{ font-size:1.12rem; }
p{ margin:0 0 12px; }

hr{
  border:0;
  border-top:1px solid var(--border);
  margin:24px 0;
}

/* ========== FLAT BUTTONS ========== */
button,
.button,
input[type="submit"] {
  appearance: none;
  border: none;
  background: var(--primary);
  color: white;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  transition: all 0.2s ease;
  box-shadow: none;
}

button:hover,
.button:hover,
input[type="submit"]:hover {
  background: var(--primary-dark);
  transform: translateY(-1px);
}

button:active,
.button:active,
input[type="submit"]:active {
  transform: translateY(1px);
}

/* Secondary buttons */
.button.secondary-btn {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text);
}
.button.secondary-btn:hover {
  background: rgba(0, 0, 0, 0.04);
  border-color: var(--primary);
  color: var(--primary);
  transform: translateY(-1px);
}

/* Danger buttons */
.button.danger-btn,
.danger-btn {
  background: var(--danger);
}
.button.danger-btn:hover,
.danger-btn:hover {
  background: #b91c1c;
}

/* Disabled state */
button:disabled,
.button.disabled {
  background: #cbd5e1;
  color: #64748b;
  cursor: not-allowed;
  transform: none;
}

.alert{
  position:relative;
  overflow:hidden;
  padding:16px 18px 16px 20px;
  margin:0 0 18px;
  border-radius:16px;
  border:1px solid transparent;
  box-shadow:var(--shadow-sm);
  font-weight:500;
}
.alert::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:4px;
}
.alert-success{
  background:#ecfdf5;
  color:#065f46;
  border-color:#a7f3d0;
}
.alert-success::before{ background:var(--success); }
.alert-error{
  background:#fef2f2;
  color:#991b1b;
  border-color:#fecaca;
}
.alert-error::before{ background:var(--danger); }

/* Dashboard Cards */
.card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:18px;
  margin:20px 0;
}
.dashboard-group-title{
  margin:28px 0 12px;
  padding-bottom:8px;
  border-bottom:1px solid var(--border);
  color:var(--text-muted);
  font-size:.92rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.card{
  position:relative;
  background:linear-gradient(180deg, #fff 0%, #fbfdff 100%);
  border:1px solid var(--border);
  border-radius:8px;
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:10px;
  transition:transform var(--trans), box-shadow var(--trans), border-color var(--trans);
}
.card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
  pointer-events:none;
}
.card:hover{
  transform:translateY(-3px);
  border-color:#cfd8e6;
  box-shadow:var(--shadow-lg);
}
.card.clickable-card{ cursor:pointer; }
.card h3{
  font-size:1.08rem;
  margin-bottom:6px;
}
.card--compact{
  padding:16px;
  border-radius:18px;
}

.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:5px 10px;
  border-radius:999px;
  border:1px solid #dbe4f0;
  background:#f8fafc;
  color:var(--text-muted);
  font-size:.74rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
  box-shadow:var(--shadow-sm);
}

/* Forms */
form{ margin:0; }
form div{ margin-bottom:14px; }
label{
  display:inline-block;
  margin-bottom:8px;
  color:var(--text-strong);
  font-size:.92rem;
  font-weight:700;
}
input,
select,
textarea{
  width:100%;
  max-width:560px;
  padding:12px 14px;
  border:1px solid var(--border-strong);
  border-radius:8px;
  background:#fff;
  color:var(--text);
  font:inherit;
  box-shadow:0 1px 2px rgba(15,23,42,.03);
  transition:border-color var(--trans-fast), box-shadow var(--trans-fast), background var(--trans-fast);
}
input::placeholder,
textarea::placeholder{ color:#94a3b8; }
input:hover,
select:hover,
textarea:hover{ border-color:#b7c4d6; }
input:focus,
select:focus,
textarea:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 4px var(--ring);
}
textarea{
  min-height:120px;
  resize:vertical;
}
fieldset{
  margin:0 0 22px;
  padding:18px;
  border:1px solid var(--border);
  border-radius:22px;
  background:rgba(248,250,252,.72);
}
legend{
  padding:4px 12px;
  border-radius:999px;
  border:1px solid var(--border);
  background:#fff;
  color:var(--primary-dark);
  font-size:.92rem;
  font-weight:800;
  box-shadow:var(--shadow-sm);
}

/* Tables */
.table-wrapper{
  margin-top:18px;
  overflow-x:auto;
  border:1px solid var(--border);
  border-radius:18px;
  background:#fff;
  box-shadow:var(--shadow-sm);
}
table{
  width:100%;
  border-collapse:collapse;
  text-align:left;
}
th{
  background:#f8fafc;
  color:var(--text-muted);
  font-size:.78rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
  padding:10px 12px;
  border-bottom:1px solid rgba(203,213,225,0.5);
}
td{
  padding:10px 12px;
  border-bottom:1px solid rgba(203,213,225,0.35);
  vertical-align:middle;
  color:var(--text);
}
tbody tr:nth-child(even) td{ background:#fbfdff; }
tbody tr:hover td{ background:#f3f7fc; }
tr:last-child td{ border-bottom:none; }
td a{ margin-right:12px; font-weight:700; }

/* Tabs & Messaging */
.tabs{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:22px 0 18px;
  padding-bottom:14px;
  border-bottom:1px solid var(--border);
}
.tab-btn{
  background:#fff;
  color:var(--text);
  border:1px solid var(--border);
  border-radius:999px;
  padding:10px 16px;
  font-weight:700;
  box-shadow:var(--shadow-sm);
}
.tab-btn:hover{ background:#f8fafc; }
.tab-btn.active{
  background:linear-gradient(180deg, var(--primary) 0%, var(--primary-dark) 100%);
  color:#fff;
  border-color:transparent;
}
.tab-content{ display:none; }
.tab-content.active{ display:block; }

.filter-form{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:end;
  margin-bottom:18px;
}
.filter-form > div,
.filter-form label{
  margin-bottom:0;
}

.thread-container{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-bottom:18px;
}
.message{
  max-width:78%;
  padding:15px 16px;
  border-radius:18px;
  box-shadow:var(--shadow-sm);
}
.message.teacher{
  align-self:flex-end;
  background:#e8f1ff;
  color:var(--text);
  border-bottom-right-radius:6px;
}
.message.student{
  align-self:flex-start;
  background:#f4f7fb;
  color:var(--text);
  border-bottom-left-radius:6px;
}
.message-header{
  display:flex;
  justify-content:space-between;
  gap:14px;
  font-size:.82rem;
  color:var(--text-muted);
  margin-bottom:6px;
}
.message-body{ line-height:1.65; }
.message-status{
  margin-top:8px;
  font-size:.85rem;
  font-weight:700;
  color:var(--warning);
}

.student-list{
  width:min(320px, 100%);
  min-width:260px;
  border:1px solid var(--border);
  border-radius:18px;
  overflow:hidden;
  background:#fff;
}
.student-list h3{
  margin:0;
  padding:16px 18px;
  border-bottom:1px solid var(--border);
}
.student-list ul{
  list-style:none;
  margin:0;
  padding:10px;
}
.student-item{
  padding:12px 14px;
  border-radius:12px;
  cursor:pointer;
  transition:background var(--trans-fast), transform var(--trans-fast);
}
.student-item:hover{
  background:#eef4ff;
  transform:translateX(2px);
}
.student-thread-container{
  flex:1;
  border:1px solid var(--border);
  border-radius:18px;
  background:#fff;
  min-height:420px;
  padding:18px;
}

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

/* Misc */
.msg{
  margin-top:1.5rem;
  padding:0.8rem 1rem;
  border-radius:12px;
  font-size:.92rem;
  animation:fadeIn .4s ease-out;
}
.msg.success{
  background:rgba(5,150,105,.10);
  color:#047857;
  border:1px solid rgba(5,150,105,.18);
}
.msg.error{
  background:rgba(220,38,38,.10);
  color:#b91c1c;
  border:1px solid rgba(220,38,38,.18);
}

.notify-form{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
}
.notify-form input[type="email"]{
  flex:1 1 260px;
}

#croppie-container{
  margin-top:15px;
  border:1px dashed var(--border-strong);
  border-radius:16px;
  padding:12px;
  background:#fff;
}

footer{
  margin-top:34px;
  padding-top:18px;
  border-top:1px solid var(--border);
  text-align:center;
  color:var(--text-muted);
  font-size:.86rem;
}

.table-wrapper td,
.table-wrapper th{
  word-break:break-word;
  white-space:normal;
}

/* Legacy pages */
p > a:not(.button):not(.dropdown-item){
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-weight:700;
}
table[border="1"]{
  border:1px solid var(--border);
  border-radius:18px;
  overflow:hidden;
}
table[border="1"] th,
table[border="1"] td{
  border-color:var(--border);
}
div[style*="color:green"],
div[style*="color:red"]{
  padding:14px 16px;
  border-radius:14px;
  margin-bottom:16px;
  box-shadow:var(--shadow-sm);
  border:1px solid var(--border);
  background:#fff;
}

@keyframes fadeIn{
  from{ opacity:0; transform:translateY(16px); }
  to{ opacity:1; transform:translateY(0); }
}

/* Responsive */
@media (max-width: 900px){
  body{ padding:14px; }
  .container{ padding:18px; border-radius:24px; }
  .site-header{ padding-bottom:14px; margin-bottom:22px; }
  h1{ font-size:1.7rem; }
  .message{ max-width:92%; }
}

@media (max-width: 768px){
  .profile-name{ display:none; }
  .dropdown-menu{ right:0; left:auto; }
  .table-wrapper{
    margin-left:-18px;
    margin-right:-18px;
    border-radius:0;
    border-left:none;
    border-right:none;
  }
  td, th{ padding:12px 14px; }
  .filter-form{ align-items:stretch; }
  .filter-form > *{ width:100%; }
  .notify-form{ flex-direction:column; align-items:stretch; }
}

@media (max-width: 640px){
  .card-grid{ grid-template-columns:1fr; }
  .tabs{ gap:8px; }
  .tab-btn{ width:100%; }
  .student-list,
  .student-thread-container{ width:100%; }
  .student-thread-container{ min-height:300px; }
}

/* =============================================
   GLOBAL ACTION LINK STYLES (for tables & cards)
   ============================================= */
td.actions {
    white-space: nowrap;
}
.action-link {
    display: inline-block;
    padding: 4px 10px;
    margin: 0 4px;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: 20px;
    transition: all 0.2s ease;
    background: transparent;
    border: none;
    cursor: pointer;
}
.action-link.edit {
    color: var(--primary);
}
.action-link.edit:hover {
    background: rgba(29, 78, 216, 0.08);
    transform: translateY(-1px);
}
.action-link.delete {
    color: var(--danger);
}
.action-link.delete:hover {
    background: rgba(220, 38, 38, 0.08);
    transform: translateY(-1px);
}

/* Make button.action-link look like text links */
button.action-link {
  background: transparent;
  border: none;
  padding: 4px 12px;
  margin: 0;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  display: inline-block;
  border-radius: 20px;
  transition: all 0.2s ease;
  color: inherit;
}
button.action-link.delete {
  color: var(--danger);
}
button.action-link.delete:hover {
  background: rgba(220, 38, 38, 0.08);
  transform: translateY(-1px);
}

/* =============================================
   STUDENT SUBJECT CARDS (dashboard)
   ============================================= */
.subject-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.subject-card {
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 16px;
    transition: var(--trans-fast);
}
.subject-card:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-sm);
}
.subject-card h4 {
    margin: 0 0 12px 0;
    font-size: 1.1rem;
}
.subject-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.button.small {
    padding: 6px 12px;
    font-size: 0.8rem;
}
.tests-record-container {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}
.tests-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}
.tests-list li {
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.85rem;
}
.tests-list li:last-child {
    border-bottom: none;
}

/* =============================================
   GLOBAL LIST CARD COMPONENT (Light header – no blue)
   ============================================= */
.list-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.list-card {
    background: var(--surface-strong, #ffffff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 0.75rem;
    padding: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.list-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.03);
}

.list-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0 0.5rem 0;
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    font-size: 0.95rem;
}

.list-card__badge {
    background: var(--surface-soft);
    color: var(--text-muted);
    border: 1px solid var(--border);
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.list-card__content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0.5rem 0;
}

.list-card__row {
    font-size: 0.9rem;
    color: #475569;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
}

.list-card__row .label {
    font-weight: 600;
    color: #1e293b;
    width: 70px;
    display: inline-block;
}

.list-card__actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    border-top: 1px solid var(--border, #f1f5f9);
    padding-top: 0.75rem;
    margin-top: auto;
}

@media (max-width: 640px) {
    .list-card-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

.progress-bar {
    background: #e2e8f0;
    border-radius: 10px;
    height: 8px;
    width: 100%;
    overflow: hidden;
}
.progress-bar-fill {
    height: 100%;
    border-radius: 10px;
    transition: width 0.3s ease;
}

/* Attendance row highlighting */
.attendance-row.present { background-color: #e6f9e6; }
.attendance-row.absent { background-color: #ffe6e6; }
.attendance-row.late { background-color: #fff0e0; }
.attendance-row.excused { background-color: #e0f0ff; }

/* Dropdown option colors (optional) */
select.status-dropdown option[value="present"] { background-color: #e6f9e6; }
select.status-dropdown option[value="absent"] { background-color: #ffe6e6; }
select.status-dropdown option[value="late"] { background-color: #fff0e0; }
select.status-dropdown option[value="excused"] { background-color: #e0f0ff; }

/* ============================================
   NEW PERFORMANCE DASHBOARD STYLES
   ============================================ */

/* Student Hero */
.student-hero {
    background: var(--surface-strong);
    border: 1px solid var(--border);
    border-radius: 28px;
    padding: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
    box-shadow: var(--shadow-md);
}
.student-info {
    display: flex;
    gap: 18px;
    align-items: center;
}
.student-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #dbeafe, #ffffff);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 800;
    color: var(--primary);
    border: 1px solid var(--border);
}
.student-name {
    font-size: 1.3rem;
    font-weight: 800;
}
.student-meta {
    color: var(--text-muted);
    margin-top: 6px;
    line-height: 1.6;
}
.overall-badge {
    text-align: right;
}
.overall-score {
    font-size: 3rem;
    font-weight: 800;
    color: var(--primary);
}
.overall-label {
    display: inline-block;
    margin-top: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: #dcfce7;
    color: #16a34a;
    font-weight: 700;
}

/* Metrics */
.metrics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-bottom: 30px;
}
.metric-card {
    background: var(--surface-strong);
    border-radius: 24px;
    padding: 24px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    transition: .25s;
}
.metric-card:hover {
    transform: translateY(-4px);
}
.metric-label {
    color: var(--text-muted);
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 700;
}
.metric-value {
    font-size: 2.4rem;
    font-weight: 800;
    margin-top: 12px;
}
.metric-hint {
    color: var(--text-muted);
    margin-top: 8px;
    font-size: .9rem;
}

/* Subject Cards */
.subject-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
}
.subject-card {
    background: var(--surface-strong);
    border: 1px solid var(--border);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: .25s;
}
.subject-card:hover {
    transform: translateY(-4px);
}
.subject-header {
    padding: 18px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border);
    background: #f8fbff;
}
.subject-name {
    font-weight: 700;
}
.subject-pill {
    padding: 6px 12px;
    border-radius: 999px;
    font-weight: 700;
    font-size: .8rem;
}
.subject-pill.good { background: #dcfce7; color: #16a34a; }
.subject-pill.warning { background: #fef3c7; color: #d97706; }
.subject-pill.danger { background: #fee2e2; color: #dc2626; }
.subject-pill.primary { background: #dbeafe; color: #1d4ed8; }

.subject-body {
    padding: 20px;
}
.big-score {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 12px;
}
.progress {
    height: 12px;
    background: #e2e8f0;
    border-radius: 999px;
    overflow: hidden;
}
.progress-fill {
    height: 100%;
    border-radius: 999px;
}
.progress-fill.green { background: #16a34a; }
.progress-fill.blue { background: #1d4ed8; }
.progress-fill.orange { background: #d97706; }
.progress-fill.red { background: #dc2626; }

.compare {
    margin-top: 12px;
    display: flex;
    justify-content: space-between;
    color: var(--text-muted);
    font-size: .9rem;
}
.breakdown-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 18px;
}
.breakdown-item {
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 10px;
}
.breakdown-label {
    color: var(--text-muted);
    font-size: .75rem;
    text-transform: uppercase;
    font-weight: 700;
}
.breakdown-value {
    font-size: 1rem;
    font-weight: 800;
    margin-top: 4px;
}

.card-footer {
    margin-top: 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.btn-details {
    border: none;
    background: #eff6ff;
    color: var(--primary);
    padding: 8px 14px;
    border-radius: 999px;
    font-weight: 600;
    cursor: pointer;
}
.empty-card {
    min-height: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--text-muted);
}
.empty-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #eff6ff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    color: var(--primary);
    font-size: 1.3rem;
}

/* Alerts */
.performance-alert {
    margin-top: 28px;
    background: #dcfce7;
    border: 1px solid #86efac;
    color: #166534;
    border-radius: 20px;
    padding: 18px;
}
.performance-alert.error {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #991b1b;
}

@media (max-width: 900px) {
    .metrics-grid {
        grid-template-columns: 1fr;
    }
    .student-hero {
        flex-direction: column;
        align-items: flex-start;
    }
    .overall-badge {
        text-align: left;
    }
}

/* ============================================
   ACADEMIC PERFORMANCE INDEX – GRADE CARDS
   ============================================ */
.grade-card {
    margin-bottom: 2rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    background: var(--surface-strong);
    box-shadow: var(--shadow-sm);
}

.grade-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1.25rem;
    background: #f8fafc;
    border-bottom: 1px solid var(--border);
}

.grade-card-header h2 {
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0;
}

.grade-card-stats {
    display: flex;
    gap: 2rem;
    padding: 0.75rem 1.25rem;
    background: #ffffff;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.grade-card-stats strong {
    color: var(--text);
}

/* Section Grid (used in performance index) */
.section-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
    padding: 1.25rem;
}

.section-card {
    display: block;
    text-decoration: none;
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-strong);
    padding: 0.75rem 1rem;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.section-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
    border-color: var(--primary);
}

.section-card-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.section-name {
    font-weight: 600;
    font-size: 1rem;
}

.section-badges {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.section-badges .badge {
    font-size: 0.7rem;
    padding: 0.2rem 0.6rem;
    background: #f1f5f9;
    color: var(--text-muted);
    border: 1px solid #e2e8f0;
}

.section-stats {
    display: flex;
    gap: 1rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
    font-size: 0.8rem;
    color: var(--text-muted);
}

.section-stats span {
    display: inline-block;
}

.section-stats strong {
    color: var(--text);
}

.no-data {
    grid-column: 1 / -1;
    color: var(--text-muted);
    font-style: italic;
    padding: 1rem 0;
}

/* Stats Grid (used in principal dashboard) */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}
.stat-card {
    background: var(--surface-strong);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.25rem 1rem;
    text-align: center;
    box-shadow: var(--shadow-sm);
}
.stat-label {
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
}
.stat-value {
    font-size: 2rem;
    font-weight: 800;
    margin: 0.5rem 0;
    color: var(--primary);
}
@media (max-width: 640px) {
    .stats-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.subject-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}
.subject-card-compact {
    background: var(--surface-strong);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1rem;
    text-align: center;
    box-shadow: var(--shadow-sm);
}
.subject-card-compact .subject-name {
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}
.subject-card-compact .subject-value {
    font-size: 1.5rem;
    font-weight: 800;
}
.subject-card-compact .subject-progress {
    height: 4px;
    background: #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    margin-top: 0.5rem;
}
.subject-card-compact .subject-progress-fill {
    height: 100%;
    border-radius: 10px;
}

/* ============================================
   SYLLABUS MODULE STYLES
   ============================================ */

.syllabus-tabs {
    display: flex;
    gap: 0.5rem;
    border-bottom: 2px solid var(--border);
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
}

.syllabus-tab {
    padding: 0.5rem 1.2rem;
    border-radius: 8px 8px 0 0;
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: none;
    transition: all 0.2s;
}

.syllabus-tab:hover {
    background: var(--surface-soft);
    color: var(--text-strong);
}

.syllabus-tab.active {
    background: var(--primary);
    color: #fff;
}

.syllabus-tab-content {
    display: none;
}

.syllabus-tab-content.active {
    display: block;
}

.syllabus-add-section {
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1rem 1.5rem;
    margin-bottom: 1.5rem;
}

.syllabus-add-section h3 {
    margin-top: 0;
    margin-bottom: 0.75rem;
}

.syllabus-form-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
}

.syllabus-form-inline .form-group {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.syllabus-form-inline .form-group label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
}

.syllabus-form-inline .form-group input,
.syllabus-form-inline .form-group select {
    width: auto;
    max-width: 200px;
    padding: 0.4rem 0.6rem;
}

.syllabus-chapter-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.syllabus-chapter-item {
    background: var(--surface-strong);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.75rem 1rem;
}

.syllabus-chapter-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.syllabus-chapter-header strong {
    font-size: 1rem;
    margin-right: 0.5rem;
}

.syllabus-actions {
    display: flex;
    gap: 0.3rem;
    margin-left: auto;
}

.syllabus-select-chapter {
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-bottom: 1.5rem;
}

.syllabus-topic-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.syllabus-topic-card {
    background: var(--surface-strong);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.syllabus-topic-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.syllabus-topic-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.topic-number {
    font-weight: 600;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.topic-status {
    display: inline-block;
    padding: 0.1rem 0.6rem;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.topic-status.status-not_started {
    background: #f1f5f9;
    color: #64748b;
}

.topic-status.status-in_progress {
    background: #fef3c7;
    color: #d97706;
}

.topic-status.status-completed {
    background: #dcfce7;
    color: #16a34a;
}

.syllabus-topic-actions-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding-top: 0.3rem;
    border-top: 1px solid var(--border-light);
}

.syllabus-topic-actions-row form {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin: 0;
}

.syllabus-topic-actions-row .button.small {
    padding: 0.2rem 0.6rem;
    font-size: 0.75rem;
}

.topic-status-select {
    padding: 0.15rem 0.4rem;
    font-size: 0.8rem;
    border-radius: 4px;
    border: 1px solid var(--border);
    background: #fff;
}

.topic-file-input {
    display: inline-block;
    width: auto;
    max-width: 130px;
    padding: 0.1rem 0.2rem;
    font-size: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: #fff;
}

@media (max-width: 640px) {
    .syllabus-tabs {
        flex-direction: column;
        border-bottom: none;
    }
    .syllabus-tab {
        border-radius: 8px;
        text-align: center;
    }
    .syllabus-form-inline {
        flex-direction: column;
        align-items: stretch;
    }
    .syllabus-form-inline .form-group input,
    .syllabus-form-inline .form-group select {
        max-width: 100%;
    }
    .syllabus-chapter-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .syllabus-actions {
        margin-left: 0;
        width: 100%;
        justify-content: flex-start;
    }
    .syllabus-topic-actions-row {
        flex-direction: column;
        align-items: stretch;
        gap: 0.3rem;
    }
    .syllabus-topic-actions-row form {
        flex-wrap: wrap;
    }
    .topic-file-input {
        max-width: 100%;
    }
}



/* ============================================
   SIDEBAR & LAYOUT
   ============================================ */

.app-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.site-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 12px 24px;
    background: var(--surface-strong);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow-sm);
}

.header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.sidebar-toggle {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-strong);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 8px;
    transition: background 0.2s;
}
.sidebar-toggle:hover {
    background: var(--surface-soft);
}
@media (min-width: 769px) {
    .sidebar-toggle {
        display: none;
    }
}

.header-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.logo-image {
    height: 50px;
    object-fit: contain;
    border-radius: 8px;
    padding: 4px;
    background: #fff;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

.layout-wrapper {
    display: flex;
    flex: 1;
}

.sidebar {
    width: 280px;
    background: var(--surface-strong);
    border-right: 1px solid var(--border);
    padding: 20px 0;
    flex-shrink: 0;
    overflow-y: auto;
    height: calc(100vh - 80px);
    position: sticky;
    top: 80px;
    transition: transform 0.3s ease;
}

.sidebar-group {
    padding: 0 16px;
    margin-bottom: 20px;
}

.sidebar-group-title {
    font-size: 0.7rem;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.08em;
    padding: 8px 12px 4px 12px;
}

.sidebar-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-menu-item {
    margin: 2px 0;
    border-radius: 8px;
    transition: background 0.2s;
}

.sidebar-menu-item a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    color: var(--text);
    text-decoration: none;
    font-weight: 500;
    border-radius: 8px;
    transition: background 0.2s, color 0.2s;
}

.sidebar-menu-item a i {
    width: 20px;
    text-align: center;
    color: var(--text-muted);
    transition: color 0.2s;
}

.sidebar-menu-item:hover {
    background: var(--surface-soft);
}
.sidebar-menu-item:hover a i {
    color: var(--primary);
}

.sidebar-menu-item.active {
    background: rgba(29, 78, 216, 0.10);
}
.sidebar-menu-item.active a {
    color: var(--primary-dark);
    font-weight: 600;
}
.sidebar-menu-item.active a i {
    color: var(--primary);
}

/* Main Content */
.main-content {
    flex: 1;
    padding: 24px 32px;
    background: var(--bg);
    min-height: calc(100vh - 80px);
    overflow-x: auto;
}

/* Responsive: Mobile sidebar */
@media (max-width: 768px) {
    .sidebar {
        position: fixed;
        top: 70px;
        left: 0;
        bottom: 0;
        width: 280px;
        transform: translateX(-100%);
        z-index: 99;
        background: var(--surface-strong);
        border-right: 1px solid var(--border);
        height: calc(100vh - 70px);
        box-shadow: var(--shadow-lg);
    }
    .sidebar.open {
        transform: translateX(0);
    }
    .main-content {
        padding: 16px;
    }
    .site-header {
        padding: 10px 16px;
    }
}