/* 
   VPS Admissions — Enterprise Functional Design System
   Owner: Antigravity UI Engineer
   Version: 3.0.0
*/

:root {
    /* COLOR — Enterprise Navy/Charcoal Palette */
    --color-sidebar: #1e293b;            /* Deep navy sidebar */
    --color-sidebar-hover: #334155;      /* Sidebar link hover */
    --color-sidebar-active: #4f46e5;     /* Professional violet active state */
    
    --color-primary: #6366f1;            /* Professional Indigo/Violet */
    --color-primary-dark: #4f46e5;
    --color-primary-light: #eef2ff;
    
    --color-accent: #f472b6;             /* Muted brand pink for UI small touches */
    
    /* Surfaces */
    --color-surface: #ffffff;
    --color-background: #f8fafc;         /* Light enterprise blue-grey */
    --color-border: #e2e8f0;             /* Clean grey border */
    --color-border-strong: #cbd5e1;

    /* Text */
    --color-text-main: #1e293b;          /* High contrast text */
    --color-text-muted: #64748b;         /* Muted text/labels */
    --color-text-inverse: #ffffff;

    /* Semantic */
    --color-success: #15803d;
    --color-success-bg: #f0fdf4;
    --color-warning: #b45309;
    --color-warning-bg: #fffbeb;
    --color-error: #b91c1c;
    --color-error-bg: #fef2f2;
    --color-info: #0369a1;
    --color-info-bg: #f0f9ff;

    /* TYPOGRAPHY — Refined Montserrat */
    --font-primary: 'Montserrat', -apple-system, system-ui, sans-serif;
    --font-size-xs: 0.70rem;
    --font-size-sm: 0.85rem;
    --font-size-base: 0.95rem;
    --font-size-lg: 1.1rem;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;

    /* COMPACT SPACING — High Density */
    --space-1: 0.2rem;
    --space-2: 0.4rem;
    --space-3: 0.6rem;
    --space-4: 0.75rem;
    --space-5: 1rem;
    --space-6: 1.25rem;
    --space-8: 1.75rem;

    /* SHAPE */
    --radius-sm: 4px;
    --radius-md: 6px;              /* Enterprise standard radius */
    --radius-lg: 8px;

    /* ELEVATION — Subdued Shadowing */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
    --shadow-card: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px 0 rgba(0,0,0,0.06);

    /* TRANSITIONS */
    --transition-fast: 100ms ease;
    --transition-base: 200ms ease;
}

/* Base Adjustments */
body {
    font-family: var(--font-primary);
    background-color: var(--color-background);
    color: var(--color-text-main);
    font-size: var(--font-size-base);
    -webkit-font-smoothing: antialiased;
}

/* Sidebar Overhaul — Solid Professional Surface */
.vps-sidebar {
    width: 240px;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    background-color: var(--color-sidebar);
    color: var(--color-text-inverse);
    z-index: 1030;
    display: flex;
    flex-direction: column;
}

.vps-sidebar .nav-link {
    font-size: var(--font-size-sm);
    color: rgba(255,255,255,0.7) !important;
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-sm);
    margin: 0 var(--space-2);
    display: flex;
    align-items: center;
    transition: all var(--transition-fast);
}

.vps-sidebar .nav-link:hover {
    background-color: var(--color-sidebar-hover);
    color: white !important;
}

.vps-sidebar .nav-link.vps-nav-active {
    background-color: var(--color-sidebar-active);
    color: white !important;
    font-weight: var(--font-weight-bold);
}

.vps-sidebar .nav-link i {
    font-size: 1.1rem;
    opacity: 0.8;
}

/* Main Layout Positioning */
.vps-main {
    margin-left: 240px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

@media (max-width: 767.98px) {
    .vps-sidebar { width: 240px; transform: translateX(-100%); transition: transform var(--transition-base); }
    .vps-sidebar.show { transform: translateX(0); }
    .vps-main { margin-left: 0; }
}

/* Content Container Density */
.vps-content-wrapper {
    width: 100%;
    padding: var(--space-5) var(--space-8);
}

/* Top Bar — Functional & Clean */
.vps-topbar {
    height: 60px;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    padding: 0 var(--space-8);
    position: sticky;
    top: 0;
    z-index: 1020;
}

/* Functional Component Blocks */

/* Tables — High Density & Professional */
.vps-table-card {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.vps-table {
    width: 100%;
    border-collapse: collapse;
}

.vps-table th {
    background: #f1f5f9;
    padding: var(--space-3) var(--space-4);
    font-size: 0.75rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 2px solid var(--color-border);
    text-align: left;
}

.vps-table td {
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-sm);
    color: var(--color-text-main);
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}

.vps-table tr:hover td {
    background-color: #f8fafc;
}

/* Buttons — Solid & Functional */
.btn-primary {
    background-color: var(--color-primary) !important;
    border: 1px solid var(--color-primary-dark) !important;
    color: white !important;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    padding: var(--space-2) var(--space-6);
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-fast);
}

.btn-primary:hover {
    background-color: var(--color-primary-dark) !important;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* KPI Cards — Data Focus */
.vps-kpi-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    box-shadow: var(--shadow-sm);
}

.vps-kpi-card .kpi-label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-muted);
    text-transform: uppercase;
    margin-bottom: var(--space-2);
}

.vps-kpi-card .kpi-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text-main);
}

.vps-icon-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

/* Text Gradient — Use sparingly for high impact titles */
.text-gradient {
    background: linear-gradient(45deg, var(--color-primary), var(--color-accent));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

/* Badge System — Subdued Semantics */
.vps-badge {
    padding: 2px 8px;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: var(--radius-pill);
    text-transform: uppercase;
}

.vps-badge--success { background: var(--color-success-bg); color: var(--color-success); border: 1px solid #bbf7d0; }
.vps-badge--warning { background: var(--color-warning-bg); color: var(--color-warning); border: 1px solid #fde68a; }
.vps-badge--error   { background: var(--color-error-bg);   color: var(--color-error);   border: 1px solid #fecaca; }

/* Alert System — High Density Semantics */
.vps-alert-success { background: var(--color-success-bg) !important; border-left: 4px solid var(--color-success) !important; color: var(--color-success) !important; }
.vps-alert-warning { background: var(--color-warning-bg) !important; border-left: 4px solid var(--color-warning) !important; color: var(--color-warning) !important; }
.vps-alert-danger  { background: var(--color-error-bg) !important;   border-left: 4px solid var(--color-error) !important;   color: var(--color-error) !important;   }
.vps-alert-error   { background: var(--color-error-bg) !important;   border-left: 4px solid var(--color-error) !important;   color: var(--color-error) !important;   }
.vps-alert-info    { background: var(--color-info-bg) !important;    border-left: 4px solid var(--color-info) !important;    color: var(--color-info) !important;    }


/* Dashboard Quick Links */
.vps-quick-card {
    background: white;
    border: 1px solid var(--color-border);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    gap: var(--space-4);
    text-decoration: none;
    color: var(--color-text-main);
    transition: all var(--transition-fast);
}

.vps-quick-card:hover { border-color: var(--color-primary); background: var(--color-primary-light); }

/* Login Overhaul */
body.body-login .vps-sidebar, body.body-login .vps-topbar, body.body-login footer { display: none !important; }
body.body-login .vps-main { margin-left: 0 !important; height: 100vh; display: flex; align-items: center; justify-content: center; background: #f1f5f9; }
body.body-login .vps-content-wrapper { padding: 0 !important; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; }

#flash-container { width: 100%; max-width: 420px; }
body.body-login #flash-container { display: none !important; }

.animate-up { transform: translateY(0); transition: transform 0.3s ease-out; }
.animate-up:hover { transform: translateY(-5px); }

.shadow-soft { box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.075) !important; }

/* --- PREMIUM LANDING SYSTEM (V2) --- */
:root {
    --vps-gradient-main: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #db2777 100%);
    --vps-gradient-subtle: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    --vps-shadow-deep: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.bg-vps-gradient { 
    background-color: #4f46e5;
    background-image: var(--vps-gradient-main);
}

.bg-vps-gradient-dots {
    background-color: #4f46e5;
    background-image: radial-gradient(rgba(255,255,255,0.15) 1px, transparent 1px), var(--vps-gradient-main);
    background-size: 24px 24px, auto;
}

.text-vps-gradient {
    background: var(--vps-gradient-main);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.vps-hero-card {
    background: white;
    border-radius: 24px;
    box-shadow: var(--vps-shadow-deep);
    border: 1px solid rgba(0,0,0,0.05);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.vps-hero-card:hover { transform: translateY(-12px); }

.bg-pattern-light {
    background-color: #f8fafc;
    background-image: radial-gradient(#e2e8f0 1px, transparent 1px);
    background-size: 24px 24px;
}


@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
    100% { transform: translateY(0px); }
}
.vps-float { animation: float 6s ease-in-out infinite; }

@keyframes reveal-up {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}
.vps-reveal { animation: reveal-up 0.8s cubic-bezier(0.23, 1, 0.32, 1) forwards; }

.login-card { width: 100%; max-width: 420px; padding: var(--space-8); background: white; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); border: 1px solid var(--color-border); }

.login-logo { font-size: 1.75rem; font-weight: 800; text-align: center; margin-bottom: var(--space-4); letter-spacing: -0.025em; }

/* Form System — Enterprise Functional */
.vps-form-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    box-shadow: var(--shadow-sm);
}

.form-label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.025em;
    margin-bottom: var(--space-1);
}

.form-control, .form-select {
    font-size: var(--font-size-sm) !important;
    border-color: var(--color-border-strong);
    border-radius: var(--radius-sm) !important;
    padding: var(--space-2) var(--space-3);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-control:focus, .form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.form-text {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.vps-section-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--space-2);
    margin-bottom: var(--space-4);
}

/* --- Added Refinements --- */

/* Standardized Modal Headers */
.vps-modal-header {
    background-color: var(--color-sidebar);
    color: white;
    border-bottom: 0;
}

.vps-modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Compact Floating Labels */
.vps-floating.form-floating > label {
    padding: 0.85rem 1rem;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    transition: transform 0.1s ease-in-out, opacity 0.1s ease-in-out;
}

.vps-floating.form-floating > .form-control:focus ~ label,
.vps-floating.form-floating > .form-control:not(:placeholder-shown) ~ label {
    transform: scale(0.85) translateY(-0.75rem) translateX(0.15rem);
    color: var(--color-primary);
    background-color: transparent;
    font-weight: 600;
}

.vps-floating.form-floating > .form-control {
    padding-top: 1.625rem;
    padding-bottom: 0.625rem;
}

/* Switch Alignment Fix */
.vps-switch-group {
    display: flex;
    align-items: center;
    padding: var(--space-4);
    background-color: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.vps-switch-group .form-check-input {
    margin-top: 0;
    width: 2.5em;
    height: 1.25em;
    cursor: pointer;
}

.vps-switch-group .form-check-label {
    margin-bottom: 0;
    margin-left: 0.5rem;
    cursor: pointer;
    font-weight: 600;
}

/* Dynamic Progress Bars */
.progress-bar-dynamic {
    width: var(--progress-width, 0%);
    transition: width 0.3s ease;
}

/* Sidebar Dropup Refinements */
.after-none::after {
    display: none !important;
}

.vps-sidebar .dropdown-toggle {
    transition: background-color var(--transition-fast);
}

.vps-sidebar .dropdown-toggle:hover {
    background-color: rgba(255, 255, 255, 0.15) !important;
}

.vps-sidebar .dropdown-menu {
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    min-width: calc(240px - var(--space-4) * 2);
}

.vps-sidebar .dropdown-item {
    font-size: var(--font-size-xs);
    transition: all var(--transition-fast);
}

.vps-sidebar .dropdown-item:hover {
    background-color: var(--color-primary);
    color: white !important;
}

.dropdown-header {
    letter-spacing: 0.05em;
    font-size: 10px;
}