/* ============================================================
   Vision Technology · School ERP · College Management
   Page-specific visual overrides
   Depends on: school-erp.css (shared design system)
   Version: 1
   ============================================================ */

/* ---- Live dashboard card (hero right side) ---- */
.college-dashboard-card {
 background: var(--se-paper);
 border: 1px solid var(--se-line);
 border-radius: 12px;
 padding: 2rem;
}
.college-dashboard-card h5 {
 font-size: 0.88rem;
 font-weight: 700;
 letter-spacing: 0.12em;
 text-transform: uppercase;
 color: var(--se-brand);
 margin-bottom: 1.25rem;
 display: flex;
 align-items: center;
 gap: 0.6rem;
}
.college-dashboard-card hr {
 border: 0;
 border-top: 1px solid var(--se-line);
 margin: 1.25rem 0;
}
.college-dashboard-card .cd-num {
 font-size: 1.8rem;
 font-weight: 700;
 color: var(--se-brand);
 line-height: 1;
 margin-bottom: 0.3rem;
}
.college-dashboard-card .cd-label {
 font-size: 0.78rem;
 color: var(--se-ink-mute);
 font-weight: 500;
 letter-spacing: 0.04em;
}
.college-dashboard-card .cd-note {
 font-size: 0.88rem;
 color: var(--se-ink-soft);
 line-height: 1.55;
 display: flex;
 align-items: flex-start;
 gap: 0.55rem;
 margin-bottom: 0.55rem;
}
.college-dashboard-card .cd-note i {
 color: var(--se-brand);
 font-size: 0.75rem;
 margin-top: 0.35rem;
}

/* ---- Department chips ---- */
.dept-chip {
 display: inline-flex;
 align-items: center;
 gap: 0.5rem;
 background: var(--se-paper);
 border: 1px solid var(--se-blue-200);
 color: var(--se-brand);
 padding: 0.65rem 1.2rem;
 border-radius: 50px;
 font-weight: 600;
 font-size: 0.92rem;
 margin: 0.3rem;
 transition: all 0.2s ease;
}
.dept-chip:hover {
 background: var(--se-blue-50);
 border-color: var(--se-brand);
}
.dept-chip i {
 font-size: 0.82rem;
 color: var(--se-blue-400);
}

/* ---- Semester arrow list ---- */
.semester-arrow {
 position: relative;
 padding: 1.25rem 1.5rem 1.25rem 3rem;
 background: var(--se-paper);
 border: 1px solid var(--se-line);
 border-left: 3px solid var(--se-blue-200);
 border-radius: 8px;
 margin-bottom: 0.85rem;
 transition: border-left-color 0.25s ease;
}
.semester-arrow:hover { border-left-color: var(--se-brand); }
.semester-arrow .sem-num {
 position: absolute;
 left: -14px;
 top: 50%;
 transform: translateY(-50%);
 background: var(--se-brand);
 color: #fff;
 width: 36px;
 height: 36px;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 font-weight: 700;
 border: 3px solid var(--se-paper);
 font-size: 0.9rem;
}
.semester-arrow h5 {
 font-size: 1.2rem;
 font-weight: 600;
 color: var(--se-ink);
 margin-bottom: 0.4rem;
}
.semester-arrow p {
 font-size: 0.98rem;
 line-height: 1.6;
 color: var(--se-ink-soft);
 margin: 0;
}

/* ---- NAAC grade badge + compliance tiles ---- */
.naac-badge {
 display: inline-flex;
 align-items: center;
 gap: 0.6rem;
 background: var(--se-blue-50);
 border: 1px solid var(--se-blue-200);
 color: var(--se-brand);
 font-weight: 800;
 padding: 0.65rem 1.15rem;
 border-radius: 8px;
 font-size: 1rem;
 letter-spacing: 0.08em;
 text-transform: uppercase;
}
.compliance-tile {
 background: var(--se-paper);
 border: 1px solid var(--se-line);
 border-top: 2px solid var(--se-blue-300);
 border-radius: 8px;
 padding: 1.5rem 1.25rem;
 text-align: center;
 height: 100%;
 transition: border-top-color 0.25s ease, transform 0.25s ease;
}
.compliance-tile:hover {
 transform: translateY(-3px);
 border-top-color: var(--se-brand);
}
.compliance-tile h5 {
 font-size: 1rem;
 font-weight: 700;
 color: var(--se-brand);
 margin: 0 0 0.3rem;
 letter-spacing: 0.04em;
}
.compliance-tile small {
 color: var(--se-ink-soft);
 font-size: 0.82rem;
 line-height: 1.5;
 display: block;
}

/* ---- Placement ring chart ---- */
.placement-ring {
 width: 180px;
 height: 180px;
 border-radius: 50%;
 background: conic-gradient(var(--se-brand) 0 87%, var(--se-line) 87% 100%);
 display: flex;
 align-items: center;
 justify-content: center;
 margin: 0 auto;
 position: relative;
}
.placement-ring::after {
 content: '';
 position: absolute;
 width: 140px;
 height: 140px;
 border-radius: 50%;
 background: var(--se-paper);
}
.placement-ring .ring-text {
 position: relative;
 z-index: 1;
 text-align: center;
}
.placement-ring .ring-percent {
 font-size: 2.4rem;
 font-weight: 800;
 color: var(--se-brand);
 line-height: 1;
}
.placement-ring .ring-label {
 font-size: 0.78rem;
 color: var(--se-ink-mute);
 letter-spacing: 0.04em;
 margin-top: 0.3rem;
}