/* ============================================================================
VSCC-BASE.CSS — Canonical VEDA-SAKTHI Design System
============================================================================
This is the canonical CSS for all VEDA-SAKTHI portals. It is built as a
strict superset of the assess portal's working "vs-theme.css" (21 April
2026), enriched with v2.0 canonical palette tokens extracted from
/var/www/vscc/index.html.
Last updated: 6 May 2026 (Phase 3 Session 2)
============================================================================
USAGE (mandatory for all VEDA-SAKTHI portals)
============================================================================
1. Every portal's index.html MUST link this file as the LAST stylesheet
in , AFTER inline
2. This file provides PAINT (palette, colors, component styling), not
ARCHITECTURE (no body display, no sidebar width, no fixed positioning).
Each portal owns its own layout; this file colors what's inside.
3. Verification at session start:
grep -L "vscc-base.css" /var/www/*/index.html /var/www/*/*/index.html
Empty output = all portals compliant.
============================================================================
V2.0 CANONICAL PALETTE — single source of truth
Source: /var/www/vscc/index.html (Education Command Centre v2.0, deployed
Mar 23 2026). New portal code SHOULD use these names; older code uses
the --vs-* bridging names defined further below.
============================================================================ */
:root {
/* ---- Brand core ---- */
--primary: #1e3a5f; /* Sidebar primary navy */
--primary-light: #2c5282; /* Sidebar gradient stop */
--accent: #e67e22; /* Saffron — secondary CTA, hover */
--tamil-gold: #d4a843; /* Tamil script + active state */
/* ---- Semantic state ---- */
--success: #27ae60;
--warning: #f39c12;
--danger: #e74c3c;
--info: #3498db;
--purple: #9b59b6;
/* ---- Text ---- */
--text-light: #ecf0f1; /* on dark backgrounds */
--text-dark: #2c3e50; /* on light backgrounds */
/* ---- Surfaces ---- */
--bg-light: #f8f9fa;
--bg-card: #ffffff;
--border: #e0e0e0;
/* ---- Factory pipeline stages ---- */
--storage-input: #16a085;
--processing: #2980b9;
--storage-output: #8e44ad;
--delivery: #27ae60;
--admin: #c0392b;
}
/* ============================================================================
BELOW: existing working vs-theme.css content (verbatim, unchanged)
This is what produced the 8:55 AM screenshot on assess.veda-sakthi.com.
============================================================================ */
/* ============================================================================
VEDA-SAKTHI Theme — Ivory + VSCC palette
Applied to: /var/www/veda-sakthi-com/assess/index.html
Created: 21 April 2026 (late night session)
Design: Light touch reskin (NAB-073 full sidebar rebuild deferred)
============================================================================ */
:root {
/* ---- Backgrounds ---- */
--vs-bg-page: #FAF9F5; /* Claude ivory — main background */
--vs-bg-card: #FFFFFF; /* Pure white cards on ivory */
--vs-bg-chip-muted: #F3F0EA; /* Muted chip background */
--vs-bg-input: #FFFFFF;
--vs-bg-input-focus: #FAF9F5;
/* ---- Text ---- */
--vs-text-primary: #1A1A1A; /* Main text */
--vs-text-secondary: #4A4A4A; /* Labels, captions */
--vs-text-muted: #6B6B6B; /* Chip codes, meta info */
--vs-text-inverse: #FFFFFF; /* On dark backgrounds */
/* ---- Borders ---- */
--vs-border-soft: #EDE9E0; /* Card edges on ivory */
--vs-border-input: #D9D4C8; /* Input borders */
--vs-border-focus: #1E2A3B; /* Focused input */
/* ---- Brand accents ---- */
--vs-navy: #1E2A3B; /* VSCC sidebar navy */
--vs-gold: #B8860B; /* Tamil script accent */
/* ---- Section header colors (VSCC-matched, ~15% desaturated) ---- */
--vs-hdr-green: #2F9E78; /* Input / Warehouse */
--vs-hdr-blue: #3B7BC5; /* Processing / SME */
--vs-hdr-orange: #E5933F; /* Planning */
--vs-hdr-purple: #7A5BAE; /* Output / Delivery */
--vs-hdr-yellow: #C5993B; /* Accent — Tamil gold (added H.3 14-May-26) */
--vs-hdr-coral: #C56B5A; /* Accent — coral (added H.3 14-May-26) */
/* ---- Status pills ---- */
--vs-pill-live-bg: #D1FAE5;
--vs-pill-live-fg: #065F46;
--vs-pill-plan-bg: #E5E7EB;
--vs-pill-plan-fg: #374151;
--vs-pill-warn-bg: #FEF3C7;
--vs-pill-warn-fg: #92400E;
--vs-pill-err-bg: #FEE2E2;
--vs-pill-err-fg: #991B1B;
/* ---- Buttons ---- */
--vs-btn-primary: #1E2A3B;
--vs-btn-primary-hover: #2A3A52;
--vs-btn-danger: #B91C1C;
/* ---- Spacing + shape ---- */
--vs-radius-sm: 6px;
--vs-radius-md: 10px;
--vs-radius-lg: 14px;
--vs-gap-sm: 8px;
--vs-gap-md: 16px;
--vs-gap-lg: 24px;
--vs-shadow-card: 0 1px 3px rgba(26, 26, 26, 0.04);
--vs-shadow-hover: 0 4px 12px rgba(26, 26, 26, 0.08);
}
/* ============================================================================
BASE
============================================================================ */
body,
body.vs-dark,
body[class*="dark"] {
background: var(--vs-bg-page) !important;
color: var(--vs-text-primary) !important;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif;
}
/* Tamil accent under page title */
.vs-title-block {
display: flex;
flex-direction: column;
gap: 2px;
padding: 12px 0 8px 0;
}
.vs-title-block .vs-title-en {
font-size: 20px;
font-weight: 600;
color: var(--vs-text-primary);
letter-spacing: 0.2px;
}
.vs-title-block .vs-title-ta {
font-size: 14px;
font-weight: 500;
color: var(--vs-gold);
font-family: "Noto Sans Tamil", "Latha", serif;
}
/* ============================================================================
CARDS — everything box-like becomes an ivory card
============================================================================ */
.card, .panel, .box, .section-card,
.diagnose-panel, .extract-panel, .register-panel,
div[class*="card"], div[class*="panel"] {
background: var(--vs-bg-card) !important;
border: 1px solid var(--vs-border-soft) !important;
border-radius: var(--vs-radius-md) !important;
box-shadow: var(--vs-shadow-card);
padding: var(--vs-gap-md);
}
/* ============================================================================
CHIPS — retire loud coloured chips, match VSCC muted style
============================================================================ */
.chip, .badge, .tag, .pill,
span.chip, span.badge,
[class*="chip-"], [class*="badge-"] {
background: var(--vs-bg-chip-muted) !important;
color: var(--vs-text-muted) !important;
border: 1px solid transparent !important;
border-radius: var(--vs-radius-sm) !important;
padding: 2px 8px !important;
font-size: 12px !important;
font-weight: 500 !important;
letter-spacing: 0.2px;
}
/* Status pills (these keep color — they're semantic signals) */
.pill-live, .status-live, [class*="live"] {
background: var(--vs-pill-live-bg) !important;
color: var(--vs-pill-live-fg) !important;
}
.pill-planned, .status-planned, [class*="planned"] {
background: var(--vs-pill-plan-bg) !important;
color: var(--vs-pill-plan-fg) !important;
}
.pill-warning, .status-warning, [class*="warning"] {
background: var(--vs-pill-warn-bg) !important;
color: var(--vs-pill-warn-fg) !important;
}
.pill-error, .status-error, [class*="error"] {
background: var(--vs-pill-err-bg) !important;
color: var(--vs-pill-err-fg) !important;
}
/* ============================================================================
FORMS — inputs, selects, textareas
============================================================================ */
input[type="text"], input[type="number"], input[type="date"],
input[type="email"], input[type="password"], input[type="search"],
select, textarea {
background: var(--vs-bg-input) !important;
color: var(--vs-text-primary) !important;
border: 1px solid var(--vs-border-input) !important;
border-radius: var(--vs-radius-sm) !important;
padding: 8px 12px;
font-size: 14px;
line-height: 1.4;
transition: border-color 0.15s ease, background 0.15s ease;
}
input:focus, select:focus, textarea:focus {
outline: none !important;
border-color: var(--vs-border-focus) !important;
background: var(--vs-bg-input-focus) !important;
box-shadow: 0 0 0 3px rgba(30, 42, 59, 0.08);
}
label, .field-label {
color: var(--vs-text-secondary) !important;
font-weight: 500;
font-size: 13px;
margin-bottom: 4px;
display: block;
}
/* ============================================================================
BUTTONS
============================================================================ */
button, .btn,
button[type="submit"], button[type="button"] {
background: var(--vs-btn-primary) !important;
color: var(--vs-text-inverse) !important;
border: none !important;
border-radius: var(--vs-radius-sm) !important;
padding: 8px 16px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: background 0.15s ease;
}
button:hover, .btn:hover {
background: var(--vs-btn-primary-hover) !important;
}
button:disabled, .btn:disabled {
background: var(--vs-border-input) !important;
color: var(--vs-text-muted) !important;
cursor: not-allowed;
}
button.btn-secondary, .btn-secondary {
background: var(--vs-bg-chip-muted) !important;
color: var(--vs-text-primary) !important;
border: 1px solid var(--vs-border-soft) !important;
}
button.btn-danger, .btn-danger {
background: var(--vs-btn-danger) !important;
}
/* ============================================================================
TABS — the Register/Diagnose/Extract/Prompt bar
============================================================================ */
.tab-bar, [class*="tab-bar"], .tabs {
background: var(--vs-bg-card);
border-bottom: 1px solid var(--vs-border-soft);
padding: 0 var(--vs-gap-md);
}
.tab-btn, [data-tab], .tab {
background: transparent !important;
color: var(--vs-text-secondary) !important;
padding: 10px 16px;
border: none !important;
border-bottom: 2px solid transparent !important;
border-radius: 0 !important;
font-weight: 500;
font-size: 14px;
cursor: pointer;
}
.tab-btn:hover, [data-tab]:hover {
color: var(--vs-text-primary) !important;
background: var(--vs-bg-chip-muted) !important;
}
.tab-btn.active, [data-tab].active, .tab.active {
color: var(--vs-navy) !important;
border-bottom-color: var(--vs-navy) !important;
background: transparent !important;
}
/* ============================================================================
SECTION HEADERS — colored bars (VSCC pattern)
Usage: Title
============================================================================ */
.vs-section-hdr {
color: var(--vs-text-inverse);
padding: 12px var(--vs-gap-md);
border-radius: var(--vs-radius-md) var(--vs-radius-md) 0 0;
font-size: 15px;
font-weight: 600;
letter-spacing: 0.3px;
display: flex;
align-items: center;
gap: 10px;
}
.vs-hdr-green { background: var(--vs-hdr-green); }
.vs-hdr-blue { background: var(--vs-hdr-blue); }
.vs-hdr-orange { background: var(--vs-hdr-orange); }
.vs-hdr-purple { background: var(--vs-hdr-purple); }
/* ============================================================================
TABLES (for future Settings page, safe defaults now)
============================================================================ */
table {
background: var(--vs-bg-card);
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 10px 12px;
border-bottom: 1px solid var(--vs-border-soft);
text-align: left;
font-size: 14px;
}
th {
background: var(--vs-bg-chip-muted);
color: var(--vs-text-secondary);
font-weight: 600;
text-transform: uppercase;
font-size: 12px;
letter-spacing: 0.5px;
}
tr:hover { background: var(--vs-bg-page); }
/* ============================================================================
Toast / alert messages
============================================================================ */
.toast, .alert, .message {
border-radius: var(--vs-radius-md);
padding: 10px 14px;
font-size: 14px;
border-left: 3px solid;
}
.toast.success, .alert.success {
background: var(--vs-pill-live-bg);
color: var(--vs-pill-live-fg);
border-left-color: var(--vs-pill-live-fg);
}
.toast.error, .alert.error {
background: var(--vs-pill-err-bg);
color: var(--vs-pill-err-fg);
border-left-color: var(--vs-pill-err-fg);
}
.toast.warning, .alert.warning {
background: var(--vs-pill-warn-bg);
color: var(--vs-pill-warn-fg);
border-left-color: var(--vs-pill-warn-fg);
}
/* ============================================================================
MOBILE
============================================================================ */
@media (max-width: 768px) {
.card, .panel { padding: var(--vs-gap-sm); }
.vs-title-block .vs-title-en { font-size: 18px; }
button, .btn { padding: 10px 14px; font-size: 14px; }
.tab-btn, [data-tab] { padding: 10px 12px; font-size: 13px; }
}
/* ============================================================================
SIDEBAR OVERRIDES — VSCC navy + Tamil-gold accent
Added: 6 May 2026 (Phase 3 Session 2 Sub-task 2.2 polish)
Approach: redefine --accent-teal at :root level to flip all teal usages
to Tamil-gold in one cascade; then refine sidebar background + active state.
============================================================================ */
:root {
/* Flip the 13 inline-style teal accents to Tamil-gold (lighter shade for dark-bg readability) */
--accent-teal: #d4a843 !important;
}
/* Sidebar surface: deep navy (VSCC) instead of near-black */
.sidebar {
background: var(--vs-navy) !important;
}
/* Brand title — keep gold via the redefined --accent-teal cascade; refine font-weight if needed */
.sidebar-brand h2 {
letter-spacing: 1.5px;
}
/* Footer (profile + sign-out area) sits slightly darker than sidebar body for visual separation */
.sidebar-footer {
background: rgba(0, 0, 0, 0.18) !important;
border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}
/* Active nav item: Tamil-gold left accent stripe */
.nav-item.active {
border-left: 3px solid #d4a843 !important;
background: rgba(212, 168, 67, 0.08) !important;
}
/* Sign-out button on dark sidebar should be subtle, not navy-on-navy */
.logout-btn {
background: rgba(255, 255, 255, 0.06) !important;
color: rgba(255, 255, 255, 0.85) !important;
border: 1px solid rgba(255, 255, 255, 0.12) !important;
}
.logout-btn:hover {
background: rgba(255, 255, 255, 0.12) !important;
}
/* Sidebar nav text contrast on navy */
.nav-item {
color: rgba(255, 255, 255, 0.78) !important;
}
.nav-item:hover {
background: rgba(255, 255, 255, 0.06) !important;
color: #ffffff !important;
}
/* PIPELINE label small caps */
.sidebar-section-label {
color: rgba(255, 255, 255, 0.45) !important;
}
/* ============================================================================
FIX 6 May 2026 — active nav-item text was invisible
The .nav-item.active rule earlier sets a lighter background but inherited
the rgba(255,255,255,0.85) color, which against the lighter active bg
reduced contrast to near-invisible. Force full white + bold for visibility.
============================================================================ */
.nav-item.active {
color: #ffffff !important;
font-weight: 600 !important;
}
.nav-item.active .nav-label,
.nav-item.active .nav-icon {
color: #ffffff !important;
opacity: 1 !important;
}
/* ============================================================================
FIX 6 May 2026 — Ruler bar visibility + Upload-card filename visibility
Two targeted contrast fixes after operator screenshot review.
============================================================================ */
/* --- Diagnose/Sections ruler bar (Observation 3) --- */
#panel-diagnose .diag-ruler-bar,
.diag-ruler-bar {
background: rgba(255, 255, 255, 0.08) !important;
border: 1px solid rgba(255, 255, 255, 0.15) !important;
min-height: 24px !important;
position: relative !important;
}
/* Force segment colors to bright/saturated values (override --accent-* if dark) */
.diag-ruler-seg-prelim { background: #3b82f6 !important; } /* blue */
.diag-ruler-seg-section { background: #10b981 !important; } /* green */
.diag-ruler-seg-section-alt { background: #34d399 !important; } /* lighter green */
.diag-ruler-seg-postlim { background: #f59e0b !important; } /* orange */
/* Boundary indicators */
.diag-ruler-bdry-pre,
.diag-ruler-bdry-post {
background: #d4a843 !important; /* Tamil-gold */
width: 2px !important;
}
/* Current page marker — keep it bright red so it stands out */
.diag-ruler-marker {
background: #ef4444 !important;
width: 3px !important;
z-index: 10 !important;
}
/* Page-number labels under the ruler */
.diag-ruler-labels {
color: rgba(255, 255, 255, 0.85) !important;
font-size: 11px !important;
}
.diag-ruler-labels span {
color: rgba(255, 255, 255, 0.85) !important;
}
/* --- Upload-card filename text (Observation 1 / 2 from earlier screenshots) --- */
#reg-file-name {
color: #ffffff !important;
}
#reg-file-size {
color: rgba(255, 255, 255, 0.7) !important;
}
#reg-file-info {
background: rgba(255, 255, 255, 0.06) !important;
border: 1px solid rgba(255, 255, 255, 0.15) !important;
border-radius: 8px !important;
padding: 12px !important;
}