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

/* ---- Hero enterprise stat ribbon ---- */
.scale-ribbon {
 background: var(--se-paper);
 border: 1px solid var(--se-line);
 border-top: 3px solid var(--se-brand);
 border-radius: 10px;
 padding: 2rem 1.5rem;
 text-align: center;
}
.scale-ribbon .scale-num {
 font-size: clamp(2.2rem, 4vw, 3rem);
 font-weight: 800;
 line-height: 1;
 color: var(--se-brand);
 letter-spacing: -0.02em;
}
.scale-ribbon small {
 display: block;
 font-size: 0.78rem;
 font-weight: 600;
 letter-spacing: 0.1em;
 text-transform: uppercase;
 color: var(--se-ink-mute);
 margin-top: 0.6rem;
}

.built-for-card {
 background: var(--se-paper);
 border: 1px solid var(--se-line);
 border-radius: 10px;
 padding: 1.5rem;
}
.built-for-card .bf-label {
 font-size: 0.7rem;
 font-weight: 700;
 letter-spacing: 0.12em;
 text-transform: uppercase;
 color: var(--se-ink-mute);
 margin-bottom: 0.45rem;
}
.built-for-card .bf-value {
 font-size: 1.15rem;
 font-weight: 600;
 color: var(--se-ink);
 line-height: 1.35;
}

/* ---- Multi-faculty architecture diagram ---- */
.arch-crown {
 display: inline-block;
 padding: 1.25rem 2rem;
 background: var(--se-brand);
 color: #fff;
 border-radius: 10px;
 text-align: center;
 min-width: 280px;
}
.arch-crown i {
 font-size: 1.6rem;
 margin-bottom: 0.5rem;
 color: var(--se-blue-200);
}
.arch-crown h5 {
 font-size: 1.05rem;
 font-weight: 700;
 color: #fff;
 margin: 0;
}
.arch-crown small {
 opacity: 0.75;
 font-size: 0.82rem;
 letter-spacing: 0.02em;
}

.arch-node {
 background: var(--se-paper);
 border: 1px solid var(--se-line);
 border-top: 2px solid var(--se-blue-300);
 border-radius: 10px;
 padding: 1.25rem 1rem 1.1rem;
 text-align: center;
 height: 100%;
 transition: border-top-color 0.25s ease, transform 0.25s ease;
}
.arch-node:hover {
 transform: translateY(-3px);
 border-top-color: var(--se-brand);
}
.arch-node .node-icon {
 width: 48px;
 height: 48px;
 margin: 0 auto 0.6rem;
 background: var(--se-blue-50);
 border: 1px solid var(--se-blue-200);
 color: var(--se-brand);
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 1.1rem;
}
.arch-node h6 {
 font-size: 0.92rem;
 font-weight: 700;
 color: var(--se-ink);
 margin: 0 0 0.2rem;
}
.arch-node p {
 font-size: 0.78rem;
 color: var(--se-ink-mute);
 margin: 0;
 line-height: 1.4;
}

/* ---- Credit table (CBCS) ---- */
.credit-table {
 background: var(--se-paper);
 border: 1px solid var(--se-line);
 border-radius: 10px;
 overflow: hidden;
 width: 100%;
 border-collapse: collapse;
}
.credit-table th {
 background: var(--se-blue-50);
 color: var(--se-brand);
 padding: 1rem 1.1rem;
 font-size: 0.78rem;
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: 0.08em;
 text-align: left;
 border-bottom: 1px solid var(--se-line);
}
.credit-table th:nth-child(2),
.credit-table th:nth-child(4) { text-align: center; }
.credit-table td {
 padding: 1rem 1.1rem;
 border-bottom: 1px solid var(--se-line);
 font-size: 0.98rem;
 color: var(--se-ink-soft);
}
.credit-table td:nth-child(2),
.credit-table td:nth-child(4) { text-align: center; font-weight: 600; color: var(--se-brand); }
.credit-table td strong { color: var(--se-ink); font-weight: 600; }
.credit-table tr:last-child td { border-bottom: none; }
.credit-table tr:hover td { background: var(--se-blue-50); }

/* ---- Single-ID touchpoint grid ---- */
.id-touchpoint {
 background: var(--se-paper);
 border: 1px solid var(--se-line);
 border-radius: 8px;
 padding: 1.25rem 1rem;
 text-align: center;
 transition: border-color 0.25s ease;
 height: 100%;
}
.id-touchpoint:hover {
 border-color: var(--se-brand);
}
.id-touchpoint i {
 color: var(--se-brand);
 font-size: 1.5rem;
 margin-bottom: 0.6rem;
 display: block;
}
.id-touchpoint strong {
 display: block;
 font-size: 0.98rem;
 font-weight: 600;
 color: var(--se-ink);
 margin-bottom: 0.15rem;
}
.id-touchpoint small {
 color: var(--se-ink-mute);
 font-size: 0.8rem;
 line-height: 1.4;
}