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

/* ---- Hero metric tile (4 tiles in a grid) ---- */
.inst-metric {
 background: var(--se-paper);
 border: 1px solid var(--se-line);
 border-radius: 10px;
 padding: 1.5rem 1.25rem;
 text-align: center;
 transition: border-color 0.25s ease;
}
.inst-metric:hover { border-color: var(--se-brand); }
.inst-metric .metric-val {
 font-size: clamp(1.8rem, 3vw, 2.4rem);
 font-weight: 800;
 color: var(--se-brand);
 line-height: 1;
 margin-bottom: 0.4rem;
}
.inst-metric .metric-label {
 font-size: 0.78rem;
 font-weight: 600;
 letter-spacing: 0.06em;
 color: var(--se-ink-mute);
 text-transform: uppercase;
}

/* ---- Institute type cards · 2px top + bottom-left accent corner ---- */
.inst-type-card {
 padding: 1.75rem 1.35rem;
 background: var(--se-paper);
 border: 1px solid var(--se-line);
 border-radius: 12px;
 height: 100%;
 position: relative;
 overflow: hidden;
 transition: all 0.3s ease;
}
.inst-type-card::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 height: 3px;
 background: var(--se-blue-200);
 transform: scaleX(0);
 transform-origin: left;
 transition: transform 0.3s ease, background 0.3s ease;
}
.inst-type-card:hover {
 border-color: var(--se-brand);
 transform: translateY(-5px);
}
.inst-type-card:hover::before {
 transform: scaleX(1);
 background: var(--se-brand);
}
.inst-type-card > i {
 font-size: 1.8rem;
 color: var(--se-brand);
 margin-bottom: 1rem;
 display: block;
}
.inst-type-card h5 {
 font-size: 1.1rem;
 font-weight: 600;
 color: var(--se-ink);
 margin-bottom: 0.5rem;
}
.inst-type-card p {
 font-size: 0.88rem;
 color: var(--se-ink-soft);
 margin: 0;
 line-height: 1.55;
}

/* ---- Certification workflow stages · horizontal stepper ---- */
.workflow-stage {
 display: flex;
 align-items: center;
 gap: 1rem;
 padding: 1.25rem 1.5rem;
 background: var(--se-paper);
 border: 1px solid var(--se-line);
 border-radius: 10px;
 margin-bottom: 0.85rem;
 border-left: 3px solid var(--se-blue-200);
 transition: border-left-color 0.3s ease;
}
.workflow-stage:hover { border-left-color: var(--se-brand); }
.workflow-stage .stage-icon {
 width: 56px;
 height: 56px;
 border-radius: 10px;
 background: var(--se-blue-50);
 color: var(--se-brand);
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 1.35rem;
 flex-shrink: 0;
}
.workflow-stage h6 {
 font-size: 1.1rem;
 font-weight: 600;
 color: var(--se-ink);
 margin: 0 0 0.25rem;
}
.workflow-stage small {
 display: block;
 color: var(--se-ink-soft);
 font-size: 0.95rem;
 line-height: 1.55;
}
.workflow-stage small a {
 color: var(--se-brand);
 font-weight: 600;
}

/* ---- Trainer profile card ---- */
.trainer-card {
 background: var(--se-paper);
 border: 1px solid var(--se-line);
 border-radius: 12px;
 padding: 2rem;
}
.trainer-card .tc-head {
 display: flex;
 align-items: center;
 gap: 1rem;
 margin-bottom: 1.25rem;
}
.trainer-card .tc-avatar {
 width: 60px;
 height: 60px;
 border-radius: 50%;
 background: var(--se-blue-50);
 border: 1px solid var(--se-blue-200);
 color: var(--se-brand);
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 1.4rem;
 flex-shrink: 0;
}
.trainer-card h5 {
 margin: 0;
 font-size: 1.2rem;
 font-weight: 600;
 color: var(--se-ink);
}
.trainer-card .tc-sub {
 color: var(--se-ink-mute);
 font-size: 0.88rem;
}
.trainer-card hr {
 border: 0;
 border-top: 1px solid var(--se-line);
 margin: 1rem 0;
}
.trainer-card .tc-stat {
 font-size: 1.35rem;
 font-weight: 700;
 color: var(--se-brand);
 line-height: 1;
}
.trainer-card .tc-stat-label {
 font-size: 0.78rem;
 color: var(--se-ink-mute);
 letter-spacing: 0.03em;
}
.trainer-card .tc-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.4rem;
}
.trainer-card .tc-note i { color: var(--se-brand); font-size: 0.8rem; margin-top: 0.35rem; }

/* ---- Compliance badges (NSDC / PMKVY / DGT / NSQF) ---- */
.compliance-badge {
 background: var(--se-paper);
 border: 1px solid var(--se-line);
 border-top: 2px solid var(--se-blue-300);
 border-radius: 10px;
 padding: 1.75rem 1.25rem;
 text-align: center;
 height: 100%;
 transition: border-top-color 0.25s ease, transform 0.25s ease;
}
.compliance-badge:hover {
 transform: translateY(-3px);
 border-top-color: var(--se-brand);
}
.compliance-badge h5 {
 font-size: 1.25rem;
 font-weight: 800;
 color: var(--se-brand);
 margin: 0 0 0.4rem;
 letter-spacing: 0.04em;
}
.compliance-badge small {
 color: var(--se-ink-soft);
 font-size: 0.85rem;
 line-height: 1.5;
 display: block;
}