/*
========================================================================
   MIET Visual Theme - Red / Black / White
   Loaded after styles.css so existing functionality and components remain intact.
========================================================================
*/

:root {
    --miet-red: #e21b23;
    --miet-red-dark: #b51219;
    --miet-red-light: #fff0f1;
    --miet-black: #111111;
    --miet-gray-900: #222222;
    --miet-gray-700: #555555;
    --miet-gray-500: #777777;
    --miet-gray-300: #d9d9d9;
    --miet-gray-200: #e9e9e9;
    --miet-gray-100: #f5f5f5;
    --miet-white: #ffffff;

    /* Re-map the existing design tokens */
    --bg-dark: #f6f6f6;
    --bg-card: #ffffff;
    --bg-card-hover: #ffffff;
    --border-color: #e2e2e2;
    --border-color-glow: rgba(226, 27, 35, 0.25);
    --primary: var(--miet-red);
    --primary-glow: rgba(226, 27, 35, 0.18);
    --secondary: var(--miet-red-dark);
    --secondary-glow: rgba(181, 18, 25, 0.15);
    --accent: var(--miet-red);
    --text-primary: var(--miet-black);
    --text-secondary: var(--miet-gray-700);
    --text-muted: var(--miet-gray-500);
}

html {
    background: #f6f6f6 !important;
}

body {
    background: #f6f6f6 !important;
    color: var(--miet-black) !important;
    font-family: 'Plus Jakarta Sans', sans-serif;
    color-scheme: light;
}

/* Remove the old blue/cyan glow background. */
body::before,
body::after {
    display: none !important;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    color: var(--miet-black) !important;
}

.text-gradient {
    background: linear-gradient(90deg, #111111 0%, var(--miet-red) 55%, #111111 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

a {
    color: var(--miet-black);
}

a:hover {
    color: var(--miet-red);
}

/* Navigation */
.navbar {
    background: rgba(255, 255, 255, 0.97) !important;
    border-bottom: 1px solid var(--miet-gray-200) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05) !important;
    backdrop-filter: blur(12px);
}

.nav-logo-icon {
    background: var(--miet-red) !important;
    color: #ffffff !important;
    box-shadow: 0 5px 14px rgba(226, 27, 35, 0.22) !important;
}

.nav-brand,
.nav-link,
.user-badge {
    color: var(--miet-black) !important;
}

.nav-link {
    color: #555555 !important;
}

.nav-link:hover,
.nav-link.active {
    color: var(--miet-red) !important;
}

.user-badge {
    background: #ffffff !important;
    border-color: var(--miet-gray-300) !important;
}

.role-student,
.role-company,
.role-coordinator {
    background: var(--miet-red-light) !important;
    color: var(--miet-red) !important;
}

/* Panels / cards */
.glass-panel {
    background: #ffffff !important;
    border: 1px solid var(--miet-gray-200) !important;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.055) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.glass-panel:hover {
    background: #ffffff !important;
    border-color: rgba(226, 27, 35, 0.28) !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.08) !important;
}

.glass-card-glow::after {
    background: none !important;
    border: 1px solid rgba(226, 27, 35, 0.18) !important;
    padding: 0 !important;
    -webkit-mask: none !important;
    mask: none !important;
}

/* Landing hero */
.hero {
    background: linear-gradient(135deg, #ffffff 0%, #fafafa 68%, #fff2f2 100%) !important;
}

.hero-title {
    color: #111111 !important;
}

.hero-subtitle {
    color: #5c5c5c !important;
}

/* Buttons */
.btn-primary,
.btn-accent {
    background: linear-gradient(135deg, var(--miet-red), #c9161d) !important;
    color: #ffffff !important;
    border-color: var(--miet-red) !important;
    box-shadow: 0 5px 15px rgba(226, 27, 35, 0.18) !important;
}

.btn-primary:hover,
.btn-accent:hover {
    background: linear-gradient(135deg, #c9161d, var(--miet-red-dark)) !important;
    box-shadow: 0 8px 20px rgba(226, 27, 35, 0.25) !important;
}

.btn-secondary {
    background: #ffffff !important;
    border: 1px solid var(--miet-red) !important;
    color: var(--miet-red) !important;
}

.btn-secondary:hover {
    background: var(--miet-red-light) !important;
    color: var(--miet-red-dark) !important;
}

/* Statistics */
.stat-val {
    background: linear-gradient(135deg, #111111 35%, var(--miet-red) 85%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

.stat-label {
    color: #666666 !important;
}

/* Forms */
.form-group label {
    color: #222222 !important;
}

.form-group input,
.form-group textarea,
.form-group select {
    background: #ffffff !important;
    color: #222222 !important;
    border: 1px solid #d6d6d6 !important;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #999999 !important;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: var(--miet-red) !important;
    box-shadow: 0 0 0 3px rgba(226, 27, 35, 0.09) !important;
    background: #ffffff !important;
}

select option {
    background: #ffffff !important;
    color: #222222 !important;
}

/* Job cards / listings */
.job-card,
.job-feed .glass-panel {
    background: #ffffff !important;
}

.job-title,
.job-card h3 {
    color: #151515 !important;
}

.job-company-name {
    color: var(--miet-red) !important;
}

.job-meta-item {
    color: #666666 !important;
}

/* Common badges */
.badge-shortlisted,
.badge-applied {
    background: var(--miet-red-light) !important;
    color: var(--miet-red-dark) !important;
    border-color: rgba(226, 27, 35, 0.14) !important;
}

/* Pipeline tracker */
.pipeline-container {
    background: #fafafa !important;
    border-color: #e4e4e4 !important;
}

.pipeline-progress {
    background: var(--miet-red) !important;
}

.step-bubble {
    background: #ffffff !important;
    border-color: #cfcfcf !important;
    color: #666666 !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08) !important;
}

.pipeline-step.active .step-bubble {
    background: var(--miet-red-light) !important;
    border-color: var(--miet-red) !important;
    color: var(--miet-red) !important;
    box-shadow: 0 0 0 4px rgba(226, 27, 35, 0.08) !important;
}

.pipeline-step.active .step-label {
    color: var(--miet-red) !important;
}

.pipeline-step.completed .step-bubble {
    background: #edf8f0 !important;
    border-color: #29934a !important;
    color: #21863e !important;
    box-shadow: none !important;
}

.pipeline-step.completed .step-label {
    color: #21863e !important;
}

/* Tables */
table {
    background: #ffffff !important;
    color: #222222 !important;
    border-color: #e3e3e3 !important;
}

thead {
    background: #f7f7f7 !important;
}

th {
    color: #333333 !important;
}

td {
    color: #555555 !important;
    border-color: #eeeeee !important;
}

tr:hover td {
    background: #fff8f8 !important;
}

/* Common dashboard surfaces */
.dashboard-card,
.card,
.panel,
.profile-card,
.resume-card,
.application-card,
.interview-card,
.job-detail-card {
    background: #ffffff !important;
    color: #222222 !important;
    border-color: #e2e2e2 !important;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.055) !important;
}

/* Inline dark backgrounds used by a few existing templates */
[style*="rgba(255,255,255,0.01)"],
[style*="rgba(255, 255, 255, 0.01)"] {
    background: #ffffff !important;
}

/* Footer */
footer {
    background: #ffffff !important;
    border-top: 1px solid #e5e5e5 !important;
}

footer p {
    color: #666666 !important;
}

/* Alerts */
.alert {
    border-radius: 8px;
}

.alert-success {
    background: #edf8f0 !important;
    color: #237a3e !important;
    border: 1px solid #ccebd3 !important;
}

.alert-error,
.alert-danger {
    background: #fff0f1 !important;
    color: #b51219 !important;
    border: 1px solid #f5c9cc !important;
}

.alert-warning {
    background: #fff8e8 !important;
    color: #936d00 !important;
    border: 1px solid #f2dfab !important;
}

/* Keep the red accent available for inline CSS that uses the existing token names. */
[style*="var(--primary)"] {
    --primary: var(--miet-red);
}

@media (max-width: 900px) {
    .navbar {
        padding: 14px 20px !important;
    }
}