/* Brittany Chiang Inspired Portfolio */

/* CSS Custom Properties */
:root {
    --navy: #0a192f;
    --light-navy: #112240;
    --lightest-navy: #233554;
    --slate: #8892b0;
    --light-slate: #a8b2d1;
    --lightest-slate: #ccd6f6;
    --white: #e6f1ff;
    --green: #64ffda;
    --green-tint: rgba(100, 255, 218, 0.1);

    --font-sans: 'Inter', 'San Francisco', 'SF Pro Text', -apple-system, system-ui, sans-serif;
    --font-mono: 'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace;

    --fz-xxs: 12px;
    --fz-xs: 13px;
    --fz-sm: 14px;
    --fz-md: 16px;
    --fz-lg: 18px;
    --fz-xl: 20px;
    --fz-xxl: 22px;
    --fz-heading: 32px;

    --border-radius: 4px;
    --nav-height: 100px;
    --nav-scroll-height: 70px;

    --tab-height: 42px;
    --tab-width: 120px;

    --easing: cubic-bezier(0.645, 0.045, 0.355, 1);
    --transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);

    --hamburger-width: 30px;

    --ham-before: top 0.1s ease-in 0.25s, opacity 0.1s ease-in;
    --ham-before-active: top 0.1s ease-out, opacity 0.1s ease-out 0.12s;
    --ham-after: bottom 0.1s ease-in 0.25s, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
    --ham-after-active: bottom 0.1s ease-out, transform 0.22s cubic-bezier(0.215, 0.61, 0.355, 1) 0.12s;
}

/* Global Styles */
* {
    box-sizing: border-box;
}

html {
    box-sizing: border-box;
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

*, *::before, *::after {
    box-sizing: border-box;
}

/* Modern Animations & Keyframes */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes typewriter {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

/* Hero Section Animations */
@keyframes float {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-20px) rotate(5deg);
    }
}

@keyframes floatReverse {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(20px) rotate(-5deg);
    }
}

@keyframes codeFloat {
    0%, 100% {
        transform: translateY(0px) scale(1);
        opacity: 0.7;
    }
    50% {
        transform: translateY(-15px) scale(1.1);
        opacity: 1;
    }
}

@keyframes gisFloat {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
        opacity: 0.6;
    }
    50% {
        transform: translateY(-25px) rotate(10deg);
        opacity: 1;
    }
}

@keyframes particleFloat {
    0% {
        transform: translateY(100vh) translateX(0px);
        opacity: 0;
    }
    10% {
        opacity: 0.8;
    }
    90% {
        opacity: 0.8;
    }
    100% {
        transform: translateY(-100px) translateX(50px);
        opacity: 0;
    }
}

@keyframes gridPulse {
    0%, 100% {
        opacity: 0.3;
        transform: scaleX(1) scaleY(1);
    }
    50% {
        opacity: 0.7;
        transform: scaleX(1.02) scaleY(1.02);
    }
}

@keyframes ripple {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    100% {
        transform: scale(4);
        opacity: 0;
    }
}

@keyframes blink {
    0%, 50% {
        border-color: var(--green);
    }
    51%, 100% {
        border-color: transparent;
    }
}

@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 5px var(--green), 0 0 10px var(--green), 0 0 15px var(--green);
    }
    50% {
        box-shadow: 0 0 10px var(--green), 0 0 20px var(--green), 0 0 30px var(--green);
    }
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* Animation Classes */
.animate-fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
}

.animate-fade-in-left {
    animation: fadeInLeft 0.8s ease-out forwards;
}

.animate-fade-in-right {
    animation: fadeInRight 0.8s ease-out forwards;
}

.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }

body {
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100vw;
    min-height: 100%;
    overflow-x: hidden;
    background: linear-gradient(135deg, var(--navy) 0%, #0a1428 50%, var(--navy) 100%);
    color: var(--slate);
    font-family: var(--font-sans);
    font-size: var(--fz-lg);
    line-height: 1.5;
    font-weight: 400;
    position: relative;
    box-sizing: border-box;
}

/* Modern Background Effects */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 20% 80%, rgba(100, 255, 218, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(100, 255, 218, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(100, 255, 218, 0.02) 0%, transparent 50%);
    pointer-events: none;
    z-index: -1;
}

/* Portfolio Container */
.portfolio-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Navigation */
.navbar {
    position: fixed;
    top: 0;
    z-index: 11;
    padding: 0 50px;
    width: 100%;
    height: var(--nav-height);
    background: linear-gradient(135deg, rgba(10, 25, 47, 0.95) 0%, rgba(17, 34, 64, 0.95) 100%);
    backdrop-filter: blur(20px);
    transition: var(--transition);
    filter: none !important;
    pointer-events: auto !important;
    user-select: auto !important;
    border-bottom: 1px solid rgba(100, 255, 218, 0.15);
    box-shadow: 0 4px 20px rgba(2, 12, 27, 0.7);
}

.navbar::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--green), transparent);
    opacity: 0.5;
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    width: 100%;
    color: var(--lightest-slate);
    font-family: var(--font-mono);
    counter-reset: item 0;
    z-index: 12;
    height: 100%;
}

.nav-logo {
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo-link {
    color: var(--green);
    width: 62px;
    height: 62px;
    transition: var(--transition);
    text-decoration: none;
}

.logo-link:hover {
    color: var(--green);
}

.nav-links {
    display: flex;
    align-items: center;
}

.nav-links ol {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    margin: 0;
    list-style: none;
}

.nav-links li {
    margin: 0 8px;
    position: relative;
    counter-increment: item 1;
    font-size: var(--fz-xs);
}

.nav-link {
    padding: 12px 8px;
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
    font-weight: 400;
}

.nav-link:hover {
    color: var(--green);
}

.nav-number {
    margin-right: 5px;
    color: var(--green);
    font-size: var(--fz-xxs);
    text-align: right;
}

.admin-link {
    margin-left: 15px;
    padding-left: 15px;
    border-left: 1px solid var(--lightest-navy);
}

.resume-button {
    margin-left: 15px;
}

.btn-outline {
    color: var(--green);
    background-color: transparent;
    border: 1px solid var(--green);
    border-radius: var(--border-radius);
    padding: 0.75rem 1rem;
    font-size: var(--fz-xs);
    font-family: var(--font-mono);
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition);
    display: inline-block;
}

.btn-outline:hover {
    background-color: var(--green-tint);
    outline: none;
    box-shadow: 3px 3px 0 0 var(--green);
    transform: translate(-4px, -4px);
}

/* Mobile Menu */
.mobile-menu-button {
    display: none;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 10;
    margin-right: -15px;
    padding: 15px;
    border: 0;
    background-color: transparent;
    color: inherit;
    text-transform: none;
    transition-timing-function: linear;
    transition-duration: 0.15s;
    transition-property: opacity, filter;
    cursor: pointer;
}

/* Mobile Navigation - Show hamburger on tablets and mobile */
@media (max-width: 768px) {
    .desktop-nav {
        display: none !important;
    }

    .mobile-menu-button {
        display: flex !important;
    }

    .navbar {
        padding: 0 20px;
        height: 70px;
    }

    .nav-container {
        height: 100%;
    }

    .nav-logo .logo-link svg {
        width: 50px;
        height: 50px;
    }
}

.hamburger {
    display: inline-block;
    position: relative;
    width: var(--hamburger-width);
    height: 24px;
}

.hamburger span {
    display: block;
    position: absolute;
    top: 50%;
    right: 0;
    width: var(--hamburger-width);
    height: 2px;
    background-color: var(--green);
    border-radius: var(--border-radius);
    transform: rotate(0deg);
    transition: var(--transition);
}

.hamburger span:nth-child(1) {
    top: 20%;
    transition: var(--ham-before);
}

.hamburger span:nth-child(2) {
    opacity: 1;
}

.hamburger span:nth-child(3) {
    top: 80%;
    transition: var(--ham-after);
}

.hamburger.open span:nth-child(1) {
    top: 50%;
    transform: rotate(45deg);
    transition: var(--ham-before-active);
}

.hamburger.open span:nth-child(2) {
    opacity: 0;
}

.hamburger.open span:nth-child(3) {
    top: 50%;
    transform: rotate(-45deg);
    transition: var(--ham-after-active);
}

.mobile-menu {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    z-index: 9;
    outline: 0;
    background-color: var(--light-navy);
    transform: translateX(50vw);
    visibility: hidden;
    transition: var(--transition);
}

.mobile-menu.open {
    transform: translateX(0vw);
    visibility: visible;
}

.mobile-menu-content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100vh;
    position: relative;
}

.mobile-nav ol {
    padding: 0;
    margin: 0;
    list-style: none;
    width: 100%;
}

.mobile-nav li {
    position: relative;
    margin: 0 auto 20px;
    text-align: center;
    counter-increment: item 1;
}

.mobile-nav-link {
    display: inline-block;
    text-decoration: none;
    color: inherit;
    font-weight: 600;
    font-size: clamp(var(--fz-sm), 4vw, var(--fz-lg));
    padding: 3px 20px 20px;
    transition: var(--transition);
}

.mobile-nav-link:hover {
    color: var(--green);
}

.mobile-resume {
    margin-top: 25px;
}

/* Main Content */
.main-content {
    padding: 0;
    flex: 1;
}

/* Sections */
.section {
    margin: 0 auto;
    padding: 120px 0;
    max-width: 1000px;
}

.section-content {
    display: flex;
    flex-direction: column;
}

.section-header {
    display: flex;
    align-items: center;
    position: relative;
    margin: 10px 0 40px;
    width: 100%;
    white-space: nowrap;
}

.section-title {
    position: relative;
    margin: 0 0 10px 0;
    color: var(--lightest-slate);
    font-size: clamp(24px, 5vw, var(--fz-heading));
    font-weight: 600;
    line-height: 1.1;
    font-family: var(--font-mono);
}

.section-number {
    margin-right: 10px;
    color: var(--green);
    font-family: var(--font-mono);
    font-size: clamp(var(--fz-md), 3vw, var(--fz-xl));
    font-weight: 400;
}

.section-title::after {
    content: '';
    display: block;
    position: relative;
    top: -5px;
    width: 300px;
    height: 1px;
    margin-left: 20px;
    background-color: var(--lightest-navy);
}

/* Empty Section Hint */
.section-empty-hint {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 24px 28px;
    border: 1px dashed var(--lightest-navy);
    border-radius: var(--border-radius);
    background-color: var(--light-navy);
    color: var(--slate);
    font-size: var(--fz-md);
    line-height: 1.6;
    max-width: 600px;
}

.section-empty-hint-icon {
    color: var(--green);
    font-family: var(--font-mono);
    font-size: var(--fz-lg);
    flex-shrink: 0;
}

/* Intro Section */
.intro-section {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    min-height: 25vh;
    padding: 0;
    margin-top: 10px !important;
}

.intro-greeting {
    margin: 0 0 30px 4px;
    color: var(--green);
    font-family: var(--font-mono);
    font-size: clamp(var(--fz-sm), 5vw, var(--fz-md));
    font-weight: 400;
}

.intro-name {
    margin: 0;
    font-size: clamp(40px, 8vw, 80px);
    font-weight: 600;
    color: var(--lightest-slate);
    line-height: 0.9;
    position: relative;
    opacity: 0;
    animation: fadeInUp 1s ease-out 0.3s forwards;
}

.intro-title {
    margin: 0;
    margin-top: 5px;
    color: var(--slate);
    line-height: 0.9;
    font-size: clamp(40px, 8vw, 80px);
    font-weight: 600;
    position: relative;
    opacity: 0;
    animation: fadeInUp 1s ease-out 0.5s forwards;
}

.intro-title::after {
    content: '|';
    color: var(--green);
    animation: blink 1s infinite;
    margin-left: 5px;
}

.intro-description {
    margin: 20px 0 0;
    max-width: 540px;
    color: var(--slate);
    font-size: var(--fz-xl);
    line-height: 1.6;
}

.intro-actions {
    margin-top: 50px;
}

.btn-primary {
    color: var(--green);
    background-color: transparent;
    border: 1px solid var(--green);
    border-radius: var(--border-radius);
    padding: 1.25rem 1.75rem;
    font-size: var(--fz-sm);
    font-family: var(--font-mono);
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-block;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(100, 255, 218, 0.1), transparent);
    transition: left 0.5s;
    z-index: -1;
}

.btn-primary:hover::before {
    left: 100%;
}

.btn-primary:hover {
    background-color: var(--green-tint);
    outline: none;
    box-shadow: 0 0 20px rgba(100, 255, 218, 0.3), 4px 4px 0 0 var(--green);
    transform: translate(-5px, -5px);
    color: var(--lightest-slate);
}

/* About Section */
.about-text p {
    margin: 0 0 15px 0;
    line-height: 1.6;
}

.skills-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(140px, 200px));
    gap: 0 10px;
    padding: 0;
    margin: 20px 0 0 0;
    overflow: hidden;
    list-style: none;
}

.skills-list li {
    position: relative;
    margin-bottom: 10px;
    padding-left: 20px;
    font-family: var(--font-mono);
    font-size: var(--fz-xs);
}

.skills-list li::before {
    content: '▹';
    position: absolute;
    left: 0;
    color: var(--green);
    font-size: var(--fz-sm);
    line-height: 12px;
}

.about-image {
    position: relative;
    max-width: 300px;
}

.image-wrapper {
    position: relative;
    width: 100%;
    border-radius: var(--border-radius);
    background-color: var(--green);
}

.profile-image {
    position: relative;
    border-radius: var(--border-radius);
    
    width: 100%;
    height: auto;
}

.image-wrapper:hover .profile-image {
    filter: none;
    mix-blend-mode: normal;
}

/* Experience Section
   Tab labels are real job titles (often full German sentences, not short
   company names), so this is a full-width vertical list with natural text
   wrapping on every breakpoint - a wrapped horizontal row of pills, or
   forcing a single line, both break down on long text and were the source
   of a manual mid-word line-break hack that produced garbled labels like
   "Datensch-utzbeauftragter" (see git history). */
.experience-tabs {
    position: relative;
    z-index: 3;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tab-button {
    text-decoration: none;
    text-decoration-skip-ink: auto;
    position: relative;
    transition: var(--transition);
    display: flex;
    align-items: center;
    width: 100%;
    min-height: var(--tab-height);
    padding: 10px 20px;
    border: none;
    border-left: 2px solid var(--lightest-navy);
    background-color: transparent;
    color: var(--slate);
    font-family: var(--font-mono);
    font-size: var(--fz-xs);
    line-height: 1.4;
    text-align: left;
    white-space: normal;
    overflow-wrap: break-word;
    cursor: pointer;
}

.tab-button:hover,
.tab-button:focus,
.tab-button.active {
    color: var(--green);
    background-color: var(--light-navy);
    border-left-color: var(--green);
}

.experience-panel {
    position: relative;
    width: 100%;
    margin-left: 20px;
    padding-left: 30px;
    padding-top: 10px;
}

.job-title {
    color: var(--lightest-slate);
    font-size: var(--fz-xxl);
    font-weight: 500;
    line-height: 1.3;
    margin: 0 0 5px;
}

.job-period {
    color: var(--light-slate);
    font-family: var(--font-mono);
    font-size: var(--fz-xs);
    margin: 0 0 30px 2px;
}

.job-details {
    padding: 2px;
    margin: 0;
    list-style: none;
    font-size: var(--fz-lg);
}

.job-details li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 10px;
}

.job-details li::before {
    content: '▹';
    position: absolute;
    left: 0;
    color: var(--green);
    font-size: var(--fz-sm);
    line-height: 18px;
}

/* Projects Section */
.projects-grid {
    list-style: none;
    padding: 0;
    margin: 0;
}

.project-card {
    position: relative;
    display: grid;
    gap: 20px;
    padding: 20px;
    grid-template-columns: 1fr;
    align-items: center;
    margin-bottom: 120px;
}

.project-card.featured {
    grid-template-columns: repeat(12, 1fr);
    align-items: center;
}

.project-content {
    position: relative;
    grid-area: 1 / 1 / -1 / 7;
}

.featured .project-content {
    grid-area: 1 / 1 / -1 / 7;
}

.project-overline {
    margin: 10px 0 5px;
    color: var(--green);
    font-family: var(--font-mono);
    font-size: var(--fz-xs);
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.project-title {
    color: var(--lightest-slate);
    font-size: clamp(24px, 5vw, 28px);
    font-weight: 600;
    margin: 0 0 20px;
    line-height: 1.1;
}

.project-description {
    position: relative;
    z-index: 2;
    margin: 0px;
    padding: 25px;
    border-radius: var(--border-radius);
    background: rgba(17, 34, 64, 0.8);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(100, 255, 218, 0.1);
    color: var(--light-slate);
    font-size: var(--fz-lg);
    line-height: 1.6;
    box-shadow:
        0 10px 30px -15px rgba(2, 12, 27, 0.7),
        0 0 0 1px rgba(100, 255, 218, 0.05);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.project-description:hover {
    box-shadow:
        0 20px 40px -15px rgba(2, 12, 27, 0.9),
        0 0 0 1px rgba(100, 255, 218, 0.2),
        0 0 20px rgba(100, 255, 218, 0.1);
    transform: translateY(-5px);
    background: rgba(17, 34, 64, 0.9);
}

.project-tech {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
    margin: 25px 0px 10px;
    padding: 0;
    list-style: none;
}

.project-tech li {
    margin: 0 20px 5px 0;
    color: var(--light-slate);
    font-family: var(--font-mono);
    font-size: var(--fz-xs);
    white-space: nowrap;
    padding: 4px 8px;
    border-radius: 3px;
    background: rgba(100, 255, 218, 0.05);
    border: 1px solid rgba(100, 255, 218, 0.1);
    transition: all 0.3s ease;
    cursor: default;
}

.project-tech li:hover {
    background: rgba(100, 255, 218, 0.1);
    border-color: rgba(100, 255, 218, 0.3);
    color: var(--green);
    transform: translateY(-2px);
}

.project-links {
    display: flex;
    align-items: center;
    position: relative;
    margin-top: 10px;
    margin-left: -10px;
    color: var(--lightest-slate);
}

.project-link {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

.project-link:hover {
    color: var(--green);
}

.project-image {
    position: relative;
    grid-area: 1 / 6 / -1 / -1;
    box-shadow: 0 10px 30px -15px rgba(2, 12, 27, 0.7);
    transition: var(--transition);
}

.featured .project-image {
    grid-area: 1 / 6 / -1 / -1;
}

.project-image img {
    width: 100%;
    height: auto;
    border-radius: var(--border-radius);
    filter: grayscale(100%) contrast(1) brightness(90%);
    transition: var(--transition);
}

.project-image:hover img {
    filter: none;
}

/* Project "read in dialog" expand button - hidden until the card is
   hovered/focused, opens ProjectDetailDialog.razor for easier reading */
.project-content-paper,
.cv-project-card-paper {
    position: relative;
}

.project-expand-btn {
    position: absolute !important;
    top: 12px;
    right: 12px;
    z-index: 3;
    opacity: 0;
    transform: translateY(-4px);
    background: rgba(100, 255, 218, 0.1) !important;
    color: var(--green) !important;
    border: 1px solid rgba(100, 255, 218, 0.3);
    transition: opacity 0.25s ease, transform 0.25s ease, background 0.2s ease;
}

.project-content-paper:hover .project-expand-btn,
.project-content-paper:focus-within .project-expand-btn,
.cv-project-card-paper:hover .project-expand-btn,
.cv-project-card-paper:focus-within .project-expand-btn {
    opacity: 1;
    transform: translateY(0);
}

.project-expand-btn:hover {
    background: rgba(100, 255, 218, 0.2) !important;
}

/* Project Detail Dialog */
.project-dialog {
    background: linear-gradient(135deg, var(--navy) 0%, var(--light-navy) 100%) !important;
    border: 1px solid rgba(100, 255, 218, 0.2);
    color: var(--lightest-slate) !important;
}

.project-dialog-header {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.project-dialog-header .project-title {
    margin: 0;
}

.project-dialog-image {
    margin: 0 0 1.5rem;
    border-radius: var(--border-radius);
    overflow: hidden;
}

.project-dialog-image img {
    width: 100%;
    display: block;
}

.project-dialog-description {
    background: transparent;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    padding: 0;
}

.project-dialog .project-tech {
    margin: 25px 0 0;
}

.project-dialog-close-btn {
    color: var(--slate) !important;
}

.project-dialog-close-btn:hover {
    color: var(--green) !important;
}

/* Contact Section */
.contact-content {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

/* Blog Section - Allow full width for carousel */
.blog-section .contact-content {
    max-width: 100%;
    width: 100%;
}

.contact-title {
    margin: 0 0 20px;
    color: var(--lightest-slate);
    font-size: clamp(40px, 5vw, 60px);
    font-weight: 600;
}

.contact-description {
    color: var(--slate);
    margin: 0 0 50px;
}

.blog-carousel {
    height: auto;
    min-height: 450px;
    width: 100%;
    max-width: 100%;
}
.blog-carousel-item {
    width: 100%;
    max-width: 100%;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
}
.blog-carousel-card {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

/* Tablet carousel sizing */
@media (min-width: 600px) {
    .blog-carousel {
        min-height: 550px;
    }
    .blog-carousel-item {
        padding: 20px;
    }
}

/* Desktop carousel sizing */
@media (min-width: 960px) {
    .blog-carousel {
        min-height: 600px;
    }
    .blog-carousel-item {
        padding: 30px 60px;
    }
}

/* Large Desktop carousel sizing */
@media (min-width: 1280px) {
    .blog-carousel {
        min-height: 650px;
    }
    .blog-carousel-item {
        padding: 40px 80px;
    }
}

/* Side Navigation */
.side-nav {
    width: 40px;
    position: fixed;
    bottom: 0;
    left: 40px;
    right: auto;
    z-index: 10;
    color: var(--light-slate);
}

.side-nav.right {
    left: auto;
    right: 40px;
    text-orientation: mixed;
    writing-mode: vertical-rl;
}

.social-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.social-links li {
    margin: 0 0 20px;
}

.social-links a {
    padding: 10px;
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

.social-links a:hover {
    color: var(--green);
    transform: translateY(-3px);
}

.social-links::after {
    content: '';
    display: block;
    width: 1px;
    height: 90px;
    margin: 0 auto;
    background-color: var(--light-slate);
}

.email-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.email-link a {
    margin: 20px auto;
    padding: 10px;
    font-family: var(--font-mono);
    font-size: var(--fz-xxs);
    line-height: var(--fz-lg);
    letter-spacing: 0.1em;
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

.email-link a:hover {
    color: var(--green);
    transform: translateY(-3px);
}

.email-link::after {
    content: '';
    display: block;
    width: 1px;
    height: 90px;
    margin: 0 auto;
    background-color: var(--light-slate);
}

@media (max-width: 360px) {

    .main-content {
        width: 100%;
        max-width: 100vw;
        padding: 0 10px;
        box-sizing: border-box;
    }
    .particles {
        width: 100%;
        max-width: 100vw;
    }
    .portfolio-layout {
        width: 100%;
        max-width: 100vw;
    }
    .grid-1,
    .grid-3,
    .grid-5 {
        width: 100%;
        max-width: 100vw;
    }
    .floating-elements {
        width: 100%;
        max-width: 100vw;
    }
    .navbar {
        width: 100%;
        max-width: 100vw;
        padding: 0 15px;
        box-sizing: border-box;
    }
    .nav-container {
        width: 100%;
        max-width: 100%;
    }
    .global-animated-background {
        width: 100%;
        max-width: 100vw;
    }
    .desktop-nav {
        display: none;
    }

    .mobile-menu-button {
        display: flex;
    }

    .side-nav {
        display: none;
    }

    .section {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        max-width: 100%;
        padding: 40px 15px;
        box-sizing: border-box;
    }
    .cv-header-section,
    .cv-section {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        max-width: 100%;
        padding: 40px 15px;
        box-sizing: border-box;
    }
    .section-title {
        width: 100%;
    }
    .mud-carousel {
        width: 100%;
        min-width: 100% !important;
    }
    .mud-carousel-item {
        width: 100%;
    }
    .blog-carousel,
    .blog-carousel-item,
    .blog-carousel-card {
        width: 100%;
        max-width: 100%;
        min-width: unset;
    }

    .contact-content {
        width: 100%;
    }

    .section-title::after {
        display: none;
    }

    .experience-panel {
        margin-left: 0;
        padding-left: 0;
    }

    .project-card {
        margin-bottom: 40px;
    }

    .project-card.featured {
        grid-template-columns: 1fr;
    }

    .project-content {
        grid-area: 1 / 1 / -1 / -1;
        padding: 15px;
        z-index: 5;
    }

    .project-image {
        grid-area: 1 / 1 / -1 / -1;
        opacity: 0.25;
    }
}

@media (max-width: 480px) {
    .navbar {
        padding: 0 15px;
    }

    .side-nav {
        display: none;
    }

    .intro-actions {
        margin-top: 30px;
    }

    .section {
        padding: 60px 0;
    }

    .section-title::after {
        margin-left: 10px;
        width: 100px;
    }

    .experience-tabs {
        margin-bottom: 20px;
    }

    .project-content {
        padding: 25px 20px;
    }

    .project-card {
        margin-bottom: 60px;
    }

    .intro-description {
        font-size: var(--fz-lg);
    }
}

/* Enhanced Mobile Responsive Styles for MudGrid */
@media (max-width: 599px) {
    /* Global MudGrid overflow fix for mobile */
    .mud-grid {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .mud-grid-item {
        max-width: 100% !important;
    }

    .main-content {
        padding: 0 10px;
        overflow-x: hidden;
    }

    .section {
        padding: 40px 0;
        max-width: 100%;
        overflow-x: hidden;
    }

    .section-content {
        width: 100%;
        overflow-x: hidden;
    }

    .section-header {
        flex-wrap: wrap;
    }

    .section-title {
        font-size: clamp(20px, 5vw, 28px);
        white-space: normal;
    }

    .section-title::after {
        display: none;
    }

    .intro-name {
        font-size: clamp(32px, 10vw, 50px);
    }

    .intro-title {
        font-size: clamp(24px, 8vw, 40px);
    }

    .intro-greeting {
        font-size: var(--fz-sm);
    }

    .intro-description {
        font-size: var(--fz-md);
        max-width: 100%;
    }

    .intro-actions {
        margin-top: 25px;
    }

    .btn-primary {
        padding: 1rem 1.25rem;
        font-size: var(--fz-xs);
        width: 100%;
        text-align: center;
    }

    /* About Section Mobile: MudGrid stacks the photo full-width above the
       text by default, pushing the intro heading far down the page.
       Switch the grid to a normal block flow and float the (smaller)
       photo to the side instead, so it sits level with the start of the
       intro text and the text wraps beside it, like the rest of the
       intro on desktop. */
    .about-grid {
        display: block !important;
        width: 100%;
        margin: 0;
    }

    .about-image-item,
    .about-text-item {
        max-width: 100% !important;
        padding: 0 !important;
    }

    .about-image-item {
        float: left;
        width: 130px;
        margin: 0 16px 12px 0;
    }

    .about-text-item {
        display: flow-root;
    }

    .about-text {
        width: 100%;
    }

    .skills-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    /* Projects Section Mobile */
    .projects-section {
        overflow-x: hidden;
    }

    .projects-section .section-content {

        overflow-x: hidden;
    }

    .projects-section .projects-grid {
        overflow: hidden;
        max-width: 100%;
        width: 100%;
    }

    .projects-section .projects-grid > .mud-grid {
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .project-card-responsive {
        margin-bottom: 30px;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden;
    }

    .project-card-responsive.mud-grid {
        margin: 0 !important;
        width: 100% !important;
    }

    .project-card-responsive .mud-grid-item {
        max-width: 100% !important;
    }

    .project-content-paper {
        background: transparent !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
        overflow: hidden;
    }

    .project-content-paper > * {
        max-width: 100%;
        box-sizing: border-box;
    }

    .project-content {
        padding: 0;
        max-width: 100%;
    }

    .project-description {
        padding: 12px;
        font-size: var(--fz-md);
        margin: 10px 0;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .project-description:hover {
        transform: none;
    }

    .project-tech {
        margin: 12px 0 8px;
        gap: 6px;
    }

    .project-tech li {
        margin: 0 6px 6px 0;
        padding: 3px 6px;
        font-size: var(--fz-xxs);
    }

    .project-image img {
        border-radius: var(--border-radius);
        filter: none;
    }

    .project-title {
        font-size: clamp(20px, 5vw, 24px);
    }

    .project-overline {
        font-size: var(--fz-xxs);
        margin: 5px 0;
    }

    /* CV Projects Mobile */
    .cv-projects-grid-responsive {
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden;
    }

    .cv-projects-grid-responsive.mud-grid {
        margin: 0 !important;
    }

    .cv-projects-grid-responsive .mud-grid-item {
        padding: 8px !important;
        max-width: 100% !important;
    }

    .cv-project-card,
    .cv-project-card-paper {
        padding: 15px;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
        overflow: hidden;
    }

    .cv-project-card-paper > *,
    .cv-project-card > * {
        max-width: 100%;
        box-sizing: border-box;
    }

    .cv-project-header {
        flex-direction: column;
        gap: 5px;
    }

    .cv-tech-tags {
        flex-wrap: wrap;
    }

    .cv-tech-tag {
        font-size: var(--fz-xxs);
        padding: 2px 6px;
    }

    /* Blog Section Mobile */
    .blog-carousel-container {
        padding: 15px 10px;
    }

    .blog-carousel-card {
        max-width: 100%;
    }

    /* Contact Section Mobile */
    .contact-content {
        width: 100%;
    }

    /* MudCard Styles for Mobile */
    .mud-card {
        margin-bottom: 15px;
    }

    .mud-card-content {
        padding: 12px;
    }

    .mud-card-actions {
        padding: 8px 12px;
        flex-wrap: wrap;
        gap: 8px;
    }

    /* MudGrid Overrides for Mobile */
    .mud-grid {
        margin: 0 !important;
    }

    .mud-item {
        padding: 8px !important;
    }
}

/* Tablet Responsive Styles */
@media (min-width: 600px) and (max-width: 959px) {
    .main-content {
        padding: 0 50px;
    }

    .section {
        padding: 80px 0;
    }

    .intro-name {
        font-size: clamp(40px, 8vw, 60px);
    }

    .intro-title {
        font-size: clamp(32px, 6vw, 50px);
    }

    .project-card-responsive {
        margin-bottom: 60px;
    }
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Focus styles */
a:focus,
button:focus {
    outline: 2px dashed var(--green);
    outline-offset: 3px;
}

/* Custom Cursor */
.custom-cursor {
    position: fixed;
    width: 20px;
    height: 20px;
    border: 2px solid var(--green);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    transition: all 0.1s ease;
    transform: translate(-50%, -50%);
    backdrop-filter: blur(2px);
}

.custom-cursor.cursor-hover {
    width: 40px;
    height: 40px;
    background: rgba(100, 255, 218, 0.1);
    border-color: var(--green);
}

/* Navbar scroll effect */
.navbar.scrolled {
    background-color: rgba(10, 25, 47, 0.95);
    backdrop-filter: blur(20px);
    box-shadow: 0 10px 30px -10px rgba(2, 12, 27, 0.7);
}

/* Text reveal animation */
.char-reveal {
    display: inline-block;
    opacity: 0;
    animation: charReveal 0.5s ease forwards;
}

@keyframes charReveal {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Floating animation */
.floating {
    animation: float 6s ease-in-out infinite;
}

/* Skill progress bars */
.skill-progress {
    width: 0%;
    height: 4px;
    background: linear-gradient(90deg, var(--green), rgba(100, 255, 218, 0.5));
    border-radius: 2px;
    transition: width 1.5s ease-in-out;
    margin-top: 5px;
}

/* Enhanced scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--navy);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--green), rgba(100, 255, 218, 0.5));
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--green);
}

/* CV Styles */
.cv-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* CV Header Section */
.cv-header-section {
    margin: 0 auto;
    padding: 150px 0 80px;
    max-width: 1000px;
    min-width: 50%;
}

.cv-header-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 50px;
    align-items: start;
}

.cv-name {
    margin: 0;
    font-size: clamp(32px, 6vw, 48px);
    font-weight: 600;
    color: var(--lightest-slate);
    line-height: 1.1;
}

.cv-title {
    margin: 10px 0 20px;
    color: var(--green);
    font-family: var(--font-mono);
    font-size: clamp(var(--fz-lg), 3vw, var(--fz-xxl));
    font-weight: 400;
}

.cv-summary {
    margin: 20px 0 30px;
    color: var(--slate);
    font-size: var(--fz-lg);
    line-height: 1.6;
    max-width: 600px;
}

.cv-contact-info {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 30px;
}

.cv-contact-info .contact-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: rgba(100, 255, 218, 0.08);
    border: 1px solid rgba(100, 255, 218, 0.3);
    border-radius: 8px;
    color: var(--lightest-slate);
    font-size: var(--fz-sm);
    font-family: var(--font-mono);
    transition: var(--transition);
}

.cv-contact-info .contact-item:hover {
    background: rgba(100, 255, 218, 0.15);
    border-color: var(--green);
    transform: translateY(-2px);
}

.cv-contact-info .contact-item .mud-icon-root {
    color: var(--green);
}

.cv-contact-info .contact-item span {
    color: var(--white);
}

.cv-contact-info .contact-item a {
    color: var(--white);
    text-decoration: none;
    transition: var(--transition);
}

.cv-contact-info .contact-item a:hover {
    color: var(--green);
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--light-slate);
    font-size: var(--fz-sm);
}

.contact-item a {
    color: var(--light-slate);
    text-decoration: none;
    transition: var(--transition);
}

.contact-item a:hover {
    color: var(--green);
}

.cv-header-image {
    position: relative;
    max-width: 250px;
    margin: 0 auto;
}

.cv-image-wrapper {
    position: relative;
    width: 100%;
    border-radius: var(--border-radius);
    background-color: var(--green);
}

.cv-profile-image {
    position: relative;
    border-radius: var(--border-radius);
    width: 100%;
    height: auto;
    max-height: 350px;
    object-fit: cover;
    object-position: center top;
    filter: grayscale(100%) contrast(1) brightness(80%);
    transition: var(--transition);
}

.cv-image-wrapper:hover .cv-profile-image {
    filter: none;
}

/* Index Section Styles */
.section {
    margin: 0 auto;
    padding: 80px 0;
    max-width: 1000px;
    min-width: 50%;
}
/* CV Section Styles */
.cv-section {
    margin: 0 auto;
    padding: 80px 0;
    max-width: 1000px;
    min-width: 50%;
}
    .cv-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: -2rem;
        right: -2rem;
        bottom: 0;
        background: linear-gradient(135deg, rgba(10, 25, 47, 0.25) 0%, rgba(17, 34, 64, 0.25) 50%, rgba(10, 25, 47, 0.25) 100%);
        backdrop-filter: blur(50px);
        border-top: 1px solid rgba(100, 255, 218, 0.1);
        border-bottom: 1px solid rgba(100, 255, 218, 0.1);
        border-radius: 8px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
        z-index: -1;
    }

.cv-section-content {
    display: flex;
    flex-direction: column;
}

/* Global Animated Background */
.global-animated-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

/* Hero Section Styles */
.hero-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-content {
    position: relative;
    z-index: 10;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem;
}

.hero-text {
    margin-bottom: 3rem;
}

/* Floating Elements */
.floating-elements {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.code-element {
    position: absolute;
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--green);
    background: rgba(100, 255, 218, 0.1);
    border: 1px solid rgba(100, 255, 218, 0.2);
    border-radius: 4px;
    padding: 8px 12px;
    backdrop-filter: blur(10px);
    animation: codeFloat 6s ease-in-out infinite;
}

.code-1 {
    top: 15%;
    left: 10%;
    animation-delay: 0s;
}

.code-2 {
    top: 25%;
    right: 15%;
    animation-delay: 1s;
}

.code-3 {
    top: 60%;
    left: 8%;
    animation-delay: 2s;
}

.code-4 {
    top: 70%;
    right: 20%;
    animation-delay: 3s;
}

.code-5 {
    top: 40%;
    right: 8%;
    animation-delay: 4s;
}

.code-6 {
    top: 85%;
    left: 12%;
    animation-delay: 5s;
}

.code-7 {
    top: 45%;
    left: 5%;
    animation-delay: 6s;
}

.code-8 {
    top: 30%;
    right: 25%;
    animation-delay: 7s;
}
.code-9 {
    top: 55%;
    right: 15%;
    animation-delay: 7s;
}
.code-10 {
    top: 45%;
    left: 15%;
    animation-delay: 7s;
}

.gis-element {
    position: absolute;
    width: 40px;
    height: 40px;
    color: var(--light-slate);
    animation: gisFloat 8s ease-in-out infinite;
}

.gis-element svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 10px rgba(100, 255, 218, 0.3));
}

.gis-1 {
    top: 20%;
    left: 20%;
    animation-delay: 0.5s;
}

.gis-2 {
    top: 35%;
    left: 5%;
    animation-delay: 2.5s;
}

.gis-3 {
    top: 55%;
    right: 10%;
    animation-delay: 4.5s;
}

.gis-4 {
    top: 80%;
    left: 15%;
    animation-delay: 6.5s;
}

.gis-5 {
    top: 45%;
    right: 30%;
    animation-delay: 8.5s;
}

/* Grid Lines */
.grid-line {
    position: absolute;
    background: linear-gradient(90deg, transparent, var(--green), transparent);
    animation: gridPulse 4s ease-in-out infinite;
}

.grid-1 {
    top: 30%;
    left: 0;
    width: 100%;
    height: 1px;
    animation-delay: 0s;
}

.grid-2 {
    top: 0;
    left: 25%;
    width: 1px;
    height: 100%;
    background: linear-gradient(0deg, transparent, var(--green), transparent);
    animation-delay: 1s;
}

.grid-3 {
    top: 70%;
    left: 0;
    width: 100%;
    height: 1px;
    animation-delay: 2s;
}

.grid-4 {
    top: 0;
    right: 25%;
    width: 1px;
    height: 100%;
    background: linear-gradient(0deg, transparent, var(--green), transparent);
    animation-delay: 3s;
}

.grid-5 {
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    animation-delay: 4s;
}

.grid-6 {
    top: 0;
    left: 50%;
    width: 1px;
    height: 100%;
    background: linear-gradient(0deg, transparent, var(--green), transparent);
    animation-delay: 5s;
}

/* Particles */
.particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--green);
    border-radius: 50%;
    opacity: 0;
    animation: particleFloat linear infinite;
}

/* Individual particle positions and timing */
.particle-0 { left: 10%; animation-duration: 15s; animation-delay: 0s; }
.particle-1 { left: 20%; animation-duration: 18s; animation-delay: 2s; }
.particle-2 { left: 30%; animation-duration: 20s; animation-delay: 4s; }
.particle-3 { left: 40%; animation-duration: 16s; animation-delay: 6s; }
.particle-4 { left: 50%; animation-duration: 22s; animation-delay: 8s; }
.particle-5 { left: 60%; animation-duration: 19s; animation-delay: 10s; }
.particle-6 { left: 70%; animation-duration: 17s; animation-delay: 12s; }
.particle-7 { left: 80%; animation-duration: 21s; animation-delay: 14s; }
.particle-8 { left: 90%; animation-duration: 18s; animation-delay: 16s; }
.particle-9 { left: 15%; animation-duration: 24s; animation-delay: 18s; }
.particle-10 { left: 25%; animation-duration: 16s; animation-delay: 20s; }
.particle-11 { left: 35%; animation-duration: 20s; animation-delay: 22s; }
.particle-12 { left: 45%; animation-duration: 18s; animation-delay: 24s; }
.particle-13 { left: 55%; animation-duration: 22s; animation-delay: 26s; }
.particle-14 { left: 75%; animation-duration: 19s; animation-delay: 28s; }
.particle-15 { left: 85%; animation-duration: 20s; animation-delay: 30s; }
.particle-16 { left: 5%; animation-duration: 23s; animation-delay: 32s; }
.particle-17 { left: 95%; animation-duration: 17s; animation-delay: 34s; }
.particle-18 { left: 65%; animation-duration: 21s; animation-delay: 36s; }
.particle-19 { left: 35%; animation-duration: 19s; animation-delay: 38s; }
.particle-20 { left: 55%; animation-duration: 24s; animation-delay: 40s; }
.particle-21 { left: 25%; animation-duration: 18s; animation-delay: 42s; }
.particle-22 { left: 85%; animation-duration: 22s; animation-delay: 44s; }
.particle-23 { left: 15%; animation-duration: 20s; animation-delay: 46s; }
.particle-24 { left: 95%; animation-duration: 16s; animation-delay: 48s; }

/* Material Button */
.material-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 32px;
    font-size: var(--fz-md);
    font-weight: 600;
    text-decoration: none;
    color: var(--green);
    background: transparent;
    border: 2px solid var(--green);
    border-radius: 4px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(100, 255, 218, 0.2);
}

.material-button:hover {
    color: var(--navy);
    background: var(--green);
    box-shadow: 0 8px 25px rgba(100, 255, 218, 0.4);
    transform: translateY(-2px);
}

.material-button .button-ripple {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.material-button:active .button-ripple {
    animation: ripple 0.6s ease-out;
}


@media (prefers-reduced-motion: reduce) {
    .code-element,
    .gis-element,
    .particle,
    .grid-line {
        animation: none;
    }
}

/* Section Background Overlays for Contrast */
.section:not(.hero-section):not(.intro-section) {
    position: relative;
    z-index: 2;
}

/* About Section */
.about-section {
    position: relative;
    width: 100%;
}

.about-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: -2rem;
    right: -2rem;
    bottom: 0;
    background: linear-gradient(135deg,
        rgba(10, 25, 47, 0.25) 0%,
        rgba(17, 34, 64, 0.25) 50%,
        rgba(10, 25, 47, 0.25) 100%);
    backdrop-filter: blur(50px);
    border-top: 1px solid rgba(100, 255, 218, 0.1);
    border-bottom: 1px solid rgba(100, 255, 218, 0.1);
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    z-index: -1;
}

/* Experience Section */
.experience-section {
    position: relative;
    width: 100%;
}

    .experience-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: -2rem;
        right: -2rem;
        bottom: 0;
        background: linear-gradient(135deg, rgba(10, 25, 47, 0.25) 0%, rgba(17, 34, 64, 0.25) 50%, rgba(10, 25, 47, 0.25) 100%);
        backdrop-filter: blur(50px);
        border: 1px solid rgba(100, 255, 218, 0.1);
        border-radius: 8px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
        z-index: -1;
    }

/* Projects Section */
.projects-section {
    position: relative;
    width: 100%;
}

    .projects-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: -2rem;
        right: -2rem;
        bottom: 0;
        background: linear-gradient(135deg, rgba(10, 25, 47, 0.25) 0%, rgba(17, 34, 64, 0.25) 50%, rgba(10, 25, 47, 0.25) 100%);
        backdrop-filter: blur(50px);
        border: 1px solid rgba(100, 255, 218, 0.15);
        border-radius: 8px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
        z-index: -1;
    }

/* Blog Section */
.blog-section {
    position: relative;
    width: 100%;
}

    .blog-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: -2rem;
        right: -2rem;
        bottom: 0;
        background: linear-gradient(135deg, rgba(10, 25, 47, 0.25) 0%, rgba(17, 34, 64, 0.25) 50%, rgba(10, 25, 47, 0.25) 100%);
        backdrop-filter: blur(50px);
        border: 1px solid rgba(100, 255, 218, 0.1);
        border-radius: 8px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
        z-index: -1;
    }

/* Contact Section */
.contact-section {
    position: relative;
    width: 100%;
}

    .contact-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: -2rem;
        right: -2rem;
        bottom: 0;
        background: linear-gradient(135deg, rgba(10, 25, 47, 0.25) 0%, rgba(17, 34, 64, 0.25) 50%, rgba(10, 25, 47, 0.25) 100%);
        backdrop-filter: blur(50px);
        border: 1px solid rgba(100, 255, 218, 0.1);
        border-radius: 8px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
        z-index: -1;
    }

/* Section Content Styling */
.section-content {
    position: relative;
    z-index: 1;
}

/* Override existing section-content padding for sections with backgrounds */
.about-section .section-content,
.experience-section .section-content,
.projects-section .section-content,
.blog-section .section-content,
.contact-section .section-content {
    padding: 3rem 2rem;
}

/* Enhanced Section Headers */
.section-header {
    margin-bottom: 3rem;
    position: relative;
}

.section-title {
    position: relative;
    display: inline-block;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, var(--green), transparent);
    border-radius: 1px;
}

/* Glassmorphism Cards Enhancement */
.project-card,
.experience-panel,
.blog-post-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(100, 255, 218, 0.1);
    border-radius: 8px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.project-card:hover,
.blog-post-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(100, 255, 218, 0.3);
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(100, 255, 218, 0.1);
}

/* Hero Section - Keep Transparent */
.hero-section,
.intro-section {
    margin-top: 10px;
    background: transparent;
    position: relative;
    z-index: 5;
}
.index-last-section {
    margin-bottom: 10px;
}
/* ==========================================================================
   Admin CMS Theme

   The admin area (AdminLayout.razor + Pages/Admin/*.razor) mixes three
   different component systems - raw Bootstrap (cards/badges/modals/forms
   in Dashboard, Blog, Pages, ImageManagement), MudBlazor (CVManagement),
   and a bespoke class set (Settings, see .admin-content-wrapper below) -
   none of which had ever been given the site's dark/teal treatment, so it
   rendered in Bootstrap's stock light theme. Rather than rewrite every
   admin page's markup, this retheme scopes overrides to .admin-page so
   the existing Bootstrap/Mud classes get the right look wherever they're
   used, the same way public-page MudBlazor components are retthemed
   elsewhere in this file.

   IMPORTANT: no backdrop-filter/transform/filter/contain here. Any of
   those on an ancestor of a Bootstrap `.modal` (position: fixed) creates a
   new containing block, so the modal stops covering the true viewport and
   instead gets clipped to/positioned against that ancestor's box - which
   is what made the edit-form modals in Blog/Pages/ImageManagement render
   overlapping the list behind them instead of as a proper full-screen
   overlay. Keep this section transform/filter-free.
   ========================================================================== */
.admin-page {
    display: flex;
    min-height: 100vh;
    background: linear-gradient(135deg, var(--navy) 0%, var(--light-navy) 100%);
}

.admin-section {
    background: rgba(17, 34, 64, 0.8);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(100, 255, 218, 0.1);
    border-radius: 8px;
    margin: 1rem 0;
    padding: 2rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.admin-section h2 {
    color: var(--lightest-slate);
    font-family: var(--font-mono);
}

/* Sidebar */
.admin-sidebar {
    width: 250px;
    background: rgba(10, 25, 47, 0.6);
    color: var(--light-slate);
    flex-shrink: 0;
    border-right: 1px solid rgba(100, 255, 218, 0.1);
}

.admin-nav-header {
    padding: 1.5rem 1rem;
    border-bottom: 1px solid rgba(100, 255, 218, 0.1);
}

.admin-nav-header .navbar-brand {
    color: var(--green);
    text-decoration: none;
    font-weight: 600;
    font-family: var(--font-mono);
}

.admin-nav-content {
    padding: 1rem 0;
}

.admin-nav-content .nav-link {
    color: var(--slate);
    padding: 0.75rem 1rem;
    text-decoration: none;
    display: flex;
    align-items: center;
    border-radius: 0;
    border-left: 2px solid transparent;
    font-size: var(--fz-sm);
    transition: var(--transition);
}

.admin-nav-content .nav-link:hover,
.admin-nav-content .nav-link.active {
    background: rgba(100, 255, 218, 0.08);
    color: var(--green);
    border-left-color: var(--green);
}

.admin-nav-content .nav-link .oi {
    margin-right: 0.5rem;
    width: 1rem;
}

.nav-section {
    margin: 1.5rem 0;
}

.nav-section-title {
    color: var(--slate);
    font-size: var(--fz-xxs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0 1rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

/* Main content column */
.admin-main {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
}

.admin-header {
    background: rgba(17, 34, 64, 0.6);
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(100, 255, 218, 0.1);
}

.admin-header h4 {
    color: var(--lightest-slate);
    font-family: var(--font-mono);
}

.admin-header .admin-user-info {
    color: var(--slate);
    font-size: var(--fz-sm);
}

.admin-content {
    padding: 1.5rem;
    color: var(--light-slate);
}

.admin-content h1,
.admin-content h2,
.admin-content h3,
.admin-content h4,
.admin-content h5,
.admin-content h6 {
    color: var(--lightest-slate);
    font-family: var(--font-mono);
}

/* Bootstrap component retheme, scoped to the admin area only */
.admin-content .card {
    background: rgba(17, 34, 64, 0.8);
    border: 1px solid rgba(100, 255, 218, 0.12);
    color: var(--light-slate);
}

.admin-content .card-header {
    background: rgba(10, 25, 47, 0.6);
    border-bottom: 1px solid rgba(100, 255, 218, 0.12);
    color: var(--lightest-slate);
}

.admin-content .card-title,
.admin-content .card-text {
    color: inherit;
}

/* Dashboard stat tiles: drop Bootstrap's flat bg-primary/success/info/
   warning fills for the same translucent teal glass card used everywhere
   else, with a colored left border to keep the four tiles distinguishable. */
.admin-content .admin-stat-card {
    background: rgba(17, 34, 64, 0.8) !important;
    border: 1px solid rgba(100, 255, 218, 0.12) !important;
    color: var(--lightest-slate) !important;
}

.admin-content .admin-stat-card.bg-primary { border-left: 4px solid var(--green) !important; }
.admin-content .admin-stat-card.bg-success { border-left: 4px solid #4ade80 !important; }
.admin-content .admin-stat-card.bg-info { border-left: 4px solid #38bdf8 !important; }
.admin-content .admin-stat-card.bg-warning { border-left: 4px solid #fbbf24 !important; }

.admin-content .list-group-item {
    background: transparent;
    border-color: rgba(100, 255, 218, 0.1);
    color: var(--light-slate);
}

.admin-content .badge.bg-primary,
.admin-content .badge.bg-success,
.admin-content .badge.bg-info,
.admin-content .badge.bg-warning,
.admin-content .badge.bg-secondary,
.admin-content .badge.bg-light {
    background: rgba(100, 255, 218, 0.15) !important;
    color: var(--green) !important;
    border: 1px solid rgba(100, 255, 218, 0.3);
    font-weight: 500;
}

.admin-content .table {
    color: var(--light-slate);
    border-color: rgba(100, 255, 218, 0.1);
}

.admin-content .table thead th {
    background: rgba(10, 25, 47, 0.6);
    color: var(--lightest-slate);
    border-color: rgba(100, 255, 218, 0.1);
}

.admin-content .table-hover tbody tr:hover {
    background: rgba(100, 255, 218, 0.05);
    color: var(--lightest-slate);
}

.admin-content .admin-table {
    background: rgba(17, 34, 64, 0.8);
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(100, 255, 218, 0.12);
}

/* Forms (native EditForm/InputText inputs used throughout Blog/Pages/
   ImageManagement, as opposed to MudTextField - see the Mud rules below) */
.admin-content .form-control,
.admin-content .form-select {
    background: rgba(10, 25, 47, 0.6);
    border: 1px solid rgba(100, 255, 218, 0.2);
    color: var(--lightest-slate);
}

.admin-content .form-control:focus,
.admin-content .form-select:focus {
    background: rgba(10, 25, 47, 0.6);
    border-color: var(--green);
    color: var(--lightest-slate);
    box-shadow: 0 0 0 0.2rem rgba(100, 255, 218, 0.15);
}

.admin-content .form-control::placeholder {
    color: var(--slate);
}

.admin-content .form-label {
    color: var(--light-slate);
}

.admin-content .form-text {
    color: var(--slate);
}

.admin-content .form-check-input {
    background-color: rgba(10, 25, 47, 0.6);
    border-color: rgba(100, 255, 218, 0.3);
}

.admin-content .form-check-input:checked {
    background-color: var(--green);
    border-color: var(--green);
}

.admin-content .form-check-label {
    color: var(--light-slate);
}

.admin-content .input-group-text {
    background: rgba(10, 25, 47, 0.6);
    border: 1px solid rgba(100, 255, 218, 0.2);
    color: var(--slate);
}

/* Buttons: `.btn-primary` also names the large transparent hero button used
   on the public pages (see .btn-primary earlier in this file) - scoping
   these overrides to .admin-content keeps the two from colliding, since
   the public version rendered oversized and washed-out on admin's small
   Bootstrap buttons. */
.admin-content .btn {
    font-family: var(--font-mono);
    font-size: var(--fz-sm);
    border-radius: var(--border-radius);
}

.admin-content .btn-primary {
    background-color: var(--green);
    border-color: var(--green);
    color: var(--navy);
    padding: 0.375rem 0.75rem;
}

.admin-content .btn-primary:hover {
    background-color: var(--green);
    border-color: var(--green);
    opacity: 0.85;
    color: var(--navy);
}

.admin-content .btn-success,
.admin-content .btn-info,
.admin-content .btn-secondary,
.admin-content .btn-danger {
    color: var(--navy);
}

.admin-content .btn-outline-primary,
.admin-content .btn-outline-secondary,
.admin-content .btn-outline-danger {
    background: transparent;
}

.admin-content .btn-outline-primary {
    border-color: var(--green);
    color: var(--green);
}

.admin-content .btn-outline-primary:hover {
    background: rgba(100, 255, 218, 0.1);
    color: var(--green);
}

.admin-content .btn-outline-secondary {
    border-color: var(--slate);
    color: var(--slate);
}

.admin-content .btn-outline-secondary:hover {
    background: rgba(136, 146, 176, 0.1);
    color: var(--lightest-slate);
}

.admin-content .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

.admin-content .alert-danger {
    background: rgba(244, 67, 54, 0.1);
    border: 1px solid rgba(244, 67, 54, 0.3);
    color: #f4a3a3;
}

.admin-content .alert-success {
    background: var(--green-tint);
    border: 1px solid rgba(100, 255, 218, 0.3);
    color: var(--green);
}

.admin-content .text-muted {
    color: var(--slate) !important;
}

/* Bootstrap modals (edit/delete dialogs in Blog, Pages, ImageManagement) */
.admin-content .modal-content {
    background: linear-gradient(135deg, var(--navy) 0%, var(--light-navy) 100%);
    border: 1px solid rgba(100, 255, 218, 0.2);
    color: var(--lightest-slate);
}

.admin-content .modal-header,
.admin-content .modal-footer {
    border-color: rgba(100, 255, 218, 0.1);
}

.admin-content .modal-title {
    color: var(--lightest-slate);
    font-family: var(--font-mono);
}

/* MudBlazor components used in the admin area (CVManagement.razor) */
.admin-content .mud-paper,
.admin-content .mud-card {
    background: rgba(17, 34, 64, 0.8) !important;
    color: var(--light-slate) !important;
}

.admin-content .mud-typography {
    color: var(--lightest-slate);
}

.admin-content .mud-tabs-panels {
    background: transparent;
}

.admin-content .mud-tabs-tabbar {
    background: rgba(10, 25, 47, 0.6) !important;
}

.admin-content .mud-tab {
    color: var(--slate) !important;
}

.admin-content .mud-tab-active {
    color: var(--green) !important;
}

.admin-content .mud-tab-slider {
    background-color: var(--green) !important;
}

.admin-content .mud-input-control .mud-input-label,
.admin-content .mud-input-control .mud-input {
    color: var(--light-slate) !important;
}

.admin-content .mud-input-control .mud-input-outlined-border {
    border-color: rgba(100, 255, 218, 0.2) !important;
}

.admin-content .mud-input-control:focus-within .mud-input-outlined-border {
    border-color: var(--green) !important;
}

.admin-content .mud-input-control:focus-within .mud-input-label {
    color: var(--green) !important;
}

.admin-content .mud-select-input .mud-input-root {
    color: var(--light-slate) !important;
}

/* Blog Post Detail */
.blog-post-header-image {
    margin-bottom: 2rem;
    border-radius: 8px;
    overflow: hidden;
    max-height: 420px;
}

.blog-post-header-image img {
    width: 100%;
    height: 100%;
    max-height: 420px;
    object-fit: cover;
    display: block;
}

.blog-post-content {
    max-width: 760px;
    margin: 0 auto;
}

.blog-post-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    color: var(--slate);
    font-size: var(--fz-sm);
    font-family: var(--font-mono);
    margin-bottom: 1.5rem;
}

.blog-post-views {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.blog-post-title {
    margin-bottom: 1.5rem;
}

.blog-post-tags {
    margin-bottom: 2rem;
}

.blog-content {
    color: var(--light-slate);
    font-size: var(--fz-lg);
    line-height: 1.7;
}

.blog-content p {
    margin: 0 0 1.25rem;
}

/* ProcessEmbeddedImages() splits paragraphs around each embedded image,
   which leaves an empty <p></p> right before/after the image container. */
.blog-content p:empty {
    display: none;
}

.blog-content h1,
.blog-content h2,
.blog-content h3,
.blog-content h4 {
    color: var(--lightest-slate);
    font-family: var(--font-mono);
    margin: 2rem 0 1rem;
}

.blog-content a {
    color: var(--green);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.blog-content code {
    background: rgba(100, 255, 218, 0.1);
    color: var(--green);
    padding: 0.15em 0.4em;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 0.9em;
}

.blog-image-container {
    background: var(--light-navy);
    border: 1px solid rgba(100, 255, 218, 0.15);
    border-radius: 8px;
    padding: 0.75rem;
    margin: 2rem 0;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

.blog-image-container img {
    display: block;
    width: 100%;
    border-radius: 4px;
}

.blog-category {
    margin: 2rem 0;
}

.blog-navigation {
    margin-top: 3rem;
}

.blog-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
}

.blog-loading-spinner {
    color: var(--green) !important;
}

/* Empty / not-found states (blog overview + blog detail) */
.empty-state {
    color: var(--slate);
}

.empty-state h3 {
    color: var(--lightest-slate);
    font-family: var(--font-mono);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .about-section::before,
    .experience-section::before,
    .projects-section::before,
    .blog-section::before,
    .contact-section::before {
        left: -1rem;
        right: -1rem;
        border-radius: 4px;
    }


    .admin-section {
        padding: 1.5rem;
        margin: 0.5rem 0;
    }

    .blog-post-header-image {
        max-height: 240px;
    }

    .blog-post-header-image img {
        max-height: 240px;
    }
}

.cv-section-header {
    display: flex;
    align-items: center;
    position: relative;
    margin: 10px 0 40px;
    width: 100%;
    white-space: nowrap;
}

.cv-section-title {
    position: relative;
    margin: 0 0 10px 0;
    color: var(--lightest-slate);
    font-size: clamp(20px, 4vw, var(--fz-xxl));
    font-weight: 600;
    line-height: 1.1;
    font-family: var(--font-mono);
}

.cv-section-number {
    margin-right: 10px;
    color: var(--green);
    font-family: var(--font-mono);
    font-size: clamp(var(--fz-md), 3vw, var(--fz-lg));
    font-weight: 400;
}

.cv-section-title::after {
    content: '';
    display: block;
    position: relative;
    top: -5px;
    width: 300px;
    height: 1px;
    margin-left: 20px;
    background-color: var(--lightest-navy);
}

/* Timeline Styles */
.cv-timeline {
    position: relative;
}

.cv-timeline-item {
    position: relative;
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 30px;
    margin-bottom: 50px;
    padding-bottom: 30px;
    border-bottom: 1px solid var(--lightest-navy);
}

.cv-timeline-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.cv-timeline-date {
    color: var(--green);
    font-family: var(--font-mono);
    font-size: var(--fz-xs);
    font-weight: 400;
    position: sticky;
    top: 120px;
    height: fit-content;
}

.cv-timeline-content {
    min-width: 0;
}

.cv-timeline-header {
    margin-bottom: 15px;
}

.cv-position,
.cv-degree {
    margin: 0 0 5px 0;
    color: var(--lightest-slate);
    font-size: var(--fz-xl);
    font-weight: 600;
    line-height: 1.2;
}

.cv-company,
.cv-institution {
    margin: 0 0 5px 0;
    color: var(--green);
    font-size: var(--fz-lg);
    font-weight: 500;
}

.cv-location,
.cv-grade {
    display: inline-block;
    margin-top: 5px;
    color: var(--light-slate);
    font-size: var(--fz-sm);
    font-style: italic;
}

.cv-description {
    margin: 15px 0;
    color: var(--slate);
    line-height: 1.6;
}

.cv-list {
    margin: 15px 0;
    padding: 0;
    list-style: none;
}

.cv-list li {
    position: relative;
    margin-bottom: 8px;
    padding-left: 20px;
    color: var(--slate);
    line-height: 1.5;
}

.cv-list li::before {
    content: '▹';
    position: absolute;
    left: 0;
    color: var(--green);
    font-size: var(--fz-sm);
    line-height: 16px;
}

.cv-tech-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 15px;
}

.cv-tech-tag {
    padding: 4px 8px;
    background-color: var(--light-navy);
    color: var(--green);
    font-family: var(--font-mono);
    font-size: var(--fz-xxs);
    border-radius: 3px;
    border: 1px solid var(--green);
}

/* Skills Section */
.cv-skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
}

.cv-skill-category {
    background-color: var(--light-navy);
    padding: 25px;
    border-radius: var(--border-radius);
    border: 1px solid var(--lightest-navy);
}

.cv-skill-category-title {
    margin: 0 0 20px 0;
    color: var(--lightest-slate);
    font-size: var(--fz-lg);
    font-weight: 600;
}

.cv-skill-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cv-skill-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cv-skill-name {
    color: var(--light-slate);
    font-size: var(--fz-sm);
}

.cv-skill-level {
    display: flex;
    gap: 4px;
}

.cv-skill-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--lightest-navy);
    transition: var(--transition);
}

.cv-skill-dot.active {
    background-color: var(--green);
}

/* Projects Section */
.cv-projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
}

.cv-project-card,
.cv-project-card-paper {
    background-color: var(--light-navy) !important;
    padding: 25px;
    border-radius: var(--border-radius);
    border: 2px solid var(--lightest-navy);
    transition: var(--transition);
}

.cv-project-card:hover,
.cv-project-card-paper:hover {
    transform: translateY(-5px);
    border-color: var(--green);
}

.cv-project-header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-bottom: 15px;
}

.cv-project-name {
    margin: 0;
    color: var(--lightest-slate);
    font-size: var(--fz-lg);
    font-weight: 600;
    flex: 1;
}

.cv-project-date {
    color: var(--green);
    font-family: var(--font-mono);
    font-size: var(--fz-xs);
    margin-left: 15px;
}

.cv-project-description {
    margin: 15px 0;
    color: var(--slate);
    line-height: 1.6;
}

.cv-project-links {
    display: flex;
    gap: 15px;
    margin-top: 15px;
}

.cv-project-link {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--light-slate);
    text-decoration: none;
    font-size: var(--fz-sm);
    transition: var(--transition);
}

.cv-project-link:hover {
    color: var(--green);
}

/* Certifications */
.cv-certifications-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
}

.cv-cert-item {
    background-color: var(--light-navy);
    padding: 20px;
    border-radius: var(--border-radius);
    border: 1px solid var(--lightest-navy);
}

.cv-cert-name {
    margin: 0 0 8px 0;
    color: var(--lightest-slate);
    font-size: var(--fz-lg);
    font-weight: 600;
}

.cv-cert-org {
    margin: 0 0 5px 0;
    color: var(--green);
    font-size: var(--fz-md);
}

.cv-cert-date {
    margin: 0 0 10px 0;
    color: var(--light-slate);
    font-family: var(--font-mono);
    font-size: var(--fz-xs);
}

.cv-cert-link {
    color: var(--green);
    text-decoration: none;
    font-size: var(--fz-sm);
    border-bottom: 1px solid transparent;
    transition: var(--transition);
}

.cv-cert-link:hover {
    border-bottom-color: var(--green);
}

/* Languages */
.cv-languages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.cv-language-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background-color: var(--light-navy);
    border-radius: var(--border-radius);
    border: 1px solid var(--lightest-navy);
}

.cv-language-name {
    color: var(--lightest-slate);
    font-size: var(--fz-md);
    font-weight: 500;
}

.cv-language-level {
    color: var(--green);
    font-family: var(--font-mono);
    font-size: var(--fz-sm);
}

/* Loading */
.cv-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
    color: var(--slate);
}

.cv-loading p {
    margin-top: 20px;
    font-size: var(--fz-lg);
}

/* Responsive CV Styles */
@media (max-width: 768px) {
    .cv-header-content {
        grid-template-columns: 1fr;
        gap: 30px;
        text-align: center;
    }

    .cv-header-image {
        order: -1;
        max-width: 200px;
    }

    .cv-contact-info {
        justify-content: center;
    }

    .cv-timeline-item {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .cv-timeline-date {
        position: static;
        margin-bottom: 10px;
    }

    .cv-section-title::after {
        width: 150px;
    }

    .cv-skills-grid,
    .cv-projects-grid,
    .cv-certifications-grid {
        grid-template-columns: 1fr;
    }

    .cv-project-header {
        flex-direction: column;
        align-items: start;
    }

    .cv-project-date {
        margin-left: 0;
        margin-top: 5px;
    }
}

@media (max-width: 480px) {
    .cv-header-section {
        padding: 120px 0 60px;
    }

    .cv-section {
        padding: 60px 0;
    }

    .cv-section-title::after {
        width: 100px;
    }

    .cv-project-card,
    .cv-project-card-paper,
    .cv-skill-category,
    .cv-cert-item {
        padding: 20px;
    }

    .cv-contact-info {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
}

/* Blog Carousel Dark Theme Styling */
.blog-carousel-container {
    background: linear-gradient(135deg, var(--light-navy) 0%, var(--lightest-navy) 100%);
    border-radius: 20px;
    padding: 40px 20px;
    margin: 20px 0;
    box-shadow:
        0 20px 25px -5px rgba(0, 0, 0, 0.4),
        0 10px 10px -5px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(100, 255, 218, 0.1);
    position: relative;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.blog-carousel-container .mud-carousel {
    width: 100% !important;
    max-width: 100% !important;
}

.blog-carousel-container .mud-carousel-content {
    width: 100% !important;
    max-width: 100% !important;
}

.blog-carousel-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(100, 255, 218, 0.05) 0%, rgba(100, 255, 218, 0.02) 100%);
    border-radius: 20px;
    pointer-events: none;
}

.modern-carousel {
    position: relative;
    z-index: 2;
}

.modern-carousel .mud-carousel-content {
    border-radius: 16px;
    overflow: hidden;
}

.modern-carousel .mud-button.mud-button-filled.mud-carousel-button {
    background: rgba(100, 255, 218, 0.1) !important;
    border: 1px solid var(--green) !important;
    color: var(--green) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    min-width: 50px;
    transition: all 0.3s var(--easing);
}

.modern-carousel .mud-button.mud-button-filled.mud-carousel-button:hover {
    background: rgba(100, 255, 218, 0.2) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(100, 255, 218, 0.3);
}

.blog-card-dark {
    background: linear-gradient(135deg, var(--navy) 0%, var(--light-navy) 100%) !important;
    border: 1px solid rgba(100, 255, 218, 0.2) !important;
    color: var(--lightest-slate) !important;
    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.3),
        0 5px 15px rgba(0, 0, 0, 0.2) !important;
    transition: all 0.3s var(--easing) !important;
    position: relative;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.blog-card-dark::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(100, 255, 218, 0.03) 0%, rgba(100, 255, 218, 0.01) 100%);
    border-radius: inherit;
    pointer-events: none;
}

.blog-card-dark:hover {
    transform: translateY(-8px) !important;
    box-shadow:
        0 25px 50px rgba(0, 0, 0, 0.4),
        0 10px 25px rgba(100, 255, 218, 0.1) !important;
    border-color: rgba(100, 255, 218, 0.4) !important;
}

.blog-card-dark .mud-card-media {
    border-bottom: 1px solid rgba(100, 255, 218, 0.1);
}

.blog-card-dark .mud-typography {
    color: var(--lightest-slate) !important;
}

.blog-card-dark .mud-typography.mud-typography-h6 {
    color: var(--white) !important;
    font-weight: 600;
    margin-bottom: 12px;
}

.blog-card-dark .mud-typography.mud-typography-subtitle2 {
    color: var(--slate) !important;
}

.blog-card-dark .mud-button.mud-button-outlined {
    border-color: var(--green) !important;
    color: var(--green) !important;
    background: rgba(100, 255, 218, 0.05) !important;
    transition: all 0.3s var(--easing);
}

.blog-card-dark .mud-button.mud-button-outlined:hover {
    background: rgba(100, 255, 218, 0.15) !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(100, 255, 218, 0.2);
}

.blog-card-dark .text-muted {
    color: var(--slate) !important;
}

.blog-card-dark .oi {
    color: var(--green) !important;
}

/* Enhanced blog carousel responsive design */
@media (max-width: 768px) {
    .blog-carousel-container {
        padding: 30px 15px;
        margin: 15px 0;
        border-radius: 16px;
    }

    .modern-carousel .mud-button.mud-button-filled.mud-carousel-button {
        width: 40px;
        height: 40px;
        min-width: 40px;
    }
}

@media (max-width: 600px) {
    .blog-carousel-container {
        padding: 20px 10px;
        border-radius: 12px;
    }
}

/* Footer Dark Theme Styling - Override MudBlazor defaults */
.portfolio-footer,
.portfolio-footer.mud-container,
.portfolio-footer .mud-container {
    background: linear-gradient(135deg, var(--navy) 0%, #0a1428 100%) !important;
    color: var(--light-slate) !important;
}

.portfolio-footer .mud-grid,
.portfolio-footer .mud-item {
    background: transparent !important;
}

.portfolio-footer .mud-text,
.portfolio-footer .mud-typography {
    color: var(--light-slate) !important;
}

.portfolio-footer .mud-button {
    color: var(--green) !important;
    border-color: var(--green) !important;
    background: transparent !important;
}

.portfolio-footer .mud-button:hover {
    background: rgba(100, 255, 218, 0.1) !important;
    color: var(--green) !important;
}

/* Ensure MudBlazor container doesn't override footer background */
.mud-main-content + .portfolio-footer,
.mud-layout .portfolio-footer {
    background: linear-gradient(135deg, var(--navy) 0%, #0a1428 100%) !important;
}

/* Impressum Page Styling */
.impressum-section {
    padding: 150px 0 100px;
    min-height: 80vh;
}

.impressum-card {
    background: linear-gradient(135deg, var(--light-navy) 0%, var(--lightest-navy) 100%);
    border-radius: 20px;
    padding: 60px 50px;
    margin: 40px 0;
    box-shadow:
        0 20px 25px -5px rgba(0, 0, 0, 0.4),
        0 10px 10px -5px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(100, 255, 218, 0.1);
    position: relative;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.3s var(--easing);
}

.impressum-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(100, 255, 218, 0.05) 0%, rgba(100, 255, 218, 0.02) 100%);
    border-radius: 20px;
    pointer-events: none;
}

.impressum-card:hover {
    transform: translateY(-5px);
    box-shadow:
        0 25px 50px rgba(0, 0, 0, 0.4),
        0 10px 25px rgba(100, 255, 218, 0.1);
    border-color: rgba(100, 255, 218, 0.2);
}

.impressum-content {
    position: relative;
    z-index: 2;
    color: var(--lightest-slate);
    font-size: var(--fz-lg);
    line-height: 1.8;
}

.impressum-content p {
    margin-bottom: 20px;
    color: var(--lightest-slate);
}

.impressum-content h2,
.impressum-content h3,
.impressum-content h4 {
    color: var(--white);
    margin: 30px 0 15px;
    font-weight: 600;
}

.impressum-content h2 {
    font-size: var(--fz-xxl);
    border-bottom: 1px solid rgba(100, 255, 218, 0.2);
    padding-bottom: 10px;
}

.impressum-content h3 {
    font-size: var(--fz-xl);
    color: var(--green);
}

.impressum-content ul,
.impressum-content ol {
    padding-left: 30px;
    margin: 20px 0;
}

.impressum-content li {
    margin-bottom: 10px;
    color: var(--lightest-slate);
}

.impressum-content a {
    color: var(--green);
    text-decoration: none;
    transition: all 0.3s ease;
    border-bottom: 1px solid transparent;
}

.impressum-content a:hover {
    color: var(--white);
    border-bottom-color: var(--green);
}

.impressum-image {
    margin-top: 40px;
    text-align: center;
}

.impressum-image img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(100, 255, 218, 0.1);
}

/* Responsive Design for Impressum */
@media (max-width: 768px) {
    .impressum-section {
        padding: 120px 0 80px;
    }

    .impressum-card {
        padding: 40px 30px;
        margin: 20px 0;
        border-radius: 16px;
    }

    .impressum-content {
        font-size: var(--fz-md);
    }
}

@media (max-width: 600px) {
    .impressum-card {
        padding: 30px 20px;
        border-radius: 12px;
    }

    .impressum-content h2 {
        font-size: var(--fz-xl);
    }

    .impressum-content h3 {
        font-size: var(--fz-lg);
    }
}

/* Login Page Styling */
.login-section {
    padding: 120px 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-wrapper {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}

.login-card {
    background: linear-gradient(135deg, var(--light-navy) 0%, var(--lightest-navy) 100%);
    border-radius: 24px;
    padding: 50px 40px;
    box-shadow:
        0 25px 50px rgba(0, 0, 0, 0.4),
        0 15px 25px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(100, 255, 218, 0.1);
    position: relative;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.3s var(--easing);
}

.login-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(100, 255, 218, 0.05) 0%, rgba(100, 255, 218, 0.02) 100%);
    border-radius: 24px;
    pointer-events: none;
}

.login-card:hover {
    transform: translateY(-5px);
    box-shadow:
        0 35px 70px rgba(0, 0, 0, 0.5),
        0 20px 35px rgba(100, 255, 218, 0.1);
    border-color: rgba(100, 255, 218, 0.2);
}

.login-header {
    text-align: center;
    margin-bottom: 40px;
    position: relative;
    z-index: 2;
}

.login-title {
    font-size: var(--fz-heading);
    color: var(--white);
    margin-bottom: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.login-title .section-number {
    color: var(--green);
    font-family: var(--font-mono);
    font-size: var(--fz-lg);
}

.login-subtitle {
    color: var(--light-slate);
    font-size: var(--fz-md);
    margin: 0;
    line-height: 1.5;
}

.login-form-container {
    position: relative;
    z-index: 2;
}

.login-form {
    margin-bottom: 30px;
}

.form-group {
    margin-bottom: 25px;
}

.form-label {
    display: block;
    color: var(--lightest-slate);
    font-size: var(--fz-sm);
    font-weight: 500;
    margin-bottom: 8px;
    font-family: var(--font-mono);
}

.input-wrapper {
    position: relative;
}

.form-input {
    width: 100%;
    padding: 15px 50px 15px 20px;
    background: rgba(10, 25, 47, 0.8);
    border: 1px solid rgba(100, 255, 218, 0.2);
    border-radius: 12px;
    color: var(--white);
    font-size: var(--fz-md);
    transition: all 0.3s var(--easing);
    font-family: var(--font-sans);
}

.form-input:focus {
    outline: none;
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(100, 255, 218, 0.1);
    background: rgba(10, 25, 47, 0.9);
}

.form-input::placeholder {
    color: var(--slate);
}

.input-icon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    opacity: 0.7;
    pointer-events: none;
}

.validation-message {
    color: #ff6b6b;
    font-size: var(--fz-xs);
    margin-top: 5px;
    font-family: var(--font-mono);
}

.login-button {
    width: 100%;
    padding: 18px 30px;
    background: linear-gradient(135deg, var(--green) 0%, #4ade80 100%);
    border: none;
    border-radius: 12px;
    color: var(--navy);
    font-size: var(--fz-md);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s var(--easing);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
    overflow: hidden;
}

.login-button:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(100, 255, 218, 0.3);
    background: linear-gradient(135deg, #4ade80 0%, var(--green) 100%);
}

.login-button:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.button-icon {
    font-size: 20px;
    transition: transform 0.3s ease;
}

.login-button:hover:not(:disabled) .button-icon {
    transform: translateX(5px);
}

.loading-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--navy);
    border-top: 2px solid transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-right: 10px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.login-error {
    background: rgba(255, 107, 107, 0.1);
    border: 1px solid rgba(255, 107, 107, 0.3);
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 25px;
    color: #ff6b6b;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--fz-sm);
}

.error-icon {
    font-size: 18px;
    flex-shrink: 0;
}

.first-user-info {
    background: rgba(100, 255, 218, 0.1);
    border: 1px solid rgba(100, 255, 218, 0.2);
    border-radius: 16px;
    padding: 25px;
    margin-top: 30px;
}

.info-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    color: var(--green);
    font-weight: 600;
}

.info-icon {
    font-size: 18px;
}

.first-user-info p {
    color: var(--lightest-slate);
    margin-bottom: 20px;
    line-height: 1.6;
}

.default-credentials {
    display: grid;
    gap: 12px;
}

.credential-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 15px;
    background: rgba(10, 25, 47, 0.5);
    border-radius: 8px;
    border: 1px solid rgba(100, 255, 218, 0.1);
}

.credential-label {
    color: var(--light-slate);
    font-weight: 500;
    min-width: 100px;
}

.credential-item code {
    background: rgba(100, 255, 218, 0.1);
    color: var(--green);
    padding: 4px 8px;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: var(--fz-sm);
    border: 1px solid rgba(100, 255, 218, 0.2);
}

/* Responsive Design for Login */
@media (max-width: 768px) {
    .login-section {
        padding: 80px 20px;
    }

    .login-card {
        padding: 40px 30px;
        border-radius: 20px;
    }

    .login-title {
        font-size: var(--fz-xxl);
        flex-direction: column;
        gap: 10px;
    }
}

@media (max-width: 600px) {
    .login-wrapper {
        max-width: 100%;
        padding: 0 15px;
    }

    .login-card {
        padding: 30px 20px;
        border-radius: 16px;
    }

    .form-input {
        padding: 12px 45px 12px 15px;
    }

    .login-button {
        padding: 15px 25px;
    }

    .credential-item {
        flex-direction: column;
        align-items: start;
        gap: 8px;
    }

    .credential-label {
        min-width: auto;
    }
}

/* Logout Page Styling */
.logout-section {
    padding: 120px 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logout-card {
    background: linear-gradient(135deg, var(--light-navy) 0%, var(--lightest-navy) 100%);
    border-radius: 24px;
    padding: 60px 50px;
    text-align: center;
    box-shadow:
        0 25px 50px rgba(0, 0, 0, 0.4),
        0 15px 25px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(100, 255, 218, 0.1);
    position: relative;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    max-width: 400px;
    width: 100%;
}

.logout-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(100, 255, 218, 0.05) 0%, rgba(100, 255, 218, 0.02) 100%);
    border-radius: 24px;
    pointer-events: none;
}

.logout-icon {
    font-size: 4rem;
    margin-bottom: 20px;
}

.logout-card h2 {
    color: var(--white);
    font-size: var(--fz-xxl);
    margin-bottom: 15px;
    font-weight: 600;
}

.logout-card p {
    color: var(--light-slate);
    font-size: var(--fz-lg);
    margin-bottom: 30px;
    line-height: 1.6;
}

.logout-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-secondary {
    padding: 12px 24px;
    background: transparent;
    border: 1px solid var(--green);
    border-radius: 8px;
    color: var(--green);
    font-size: var(--fz-md);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s var(--easing);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-secondary:hover {
    background: rgba(100, 255, 218, 0.1);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(100, 255, 218, 0.2);
}

/* Unauthorized Page Styling */
.unauthorized-container {
    padding: 120px 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--navy) 0%, var(--light-navy) 100%);
}

.unauthorized-card {
    background: linear-gradient(135deg, var(--light-navy) 0%, var(--lightest-navy) 100%);
    border-radius: 24px;
    padding: 60px 50px;
    text-align: center;
    box-shadow:
        0 25px 50px rgba(0, 0, 0, 0.4),
        0 15px 25px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 107, 107, 0.3);
    position: relative;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    max-width: 450px;
    width: 100%;
}

.unauthorized-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 107, 107, 0.05) 0%, rgba(255, 107, 107, 0.02) 100%);
    border-radius: 24px;
    pointer-events: none;
}

.unauthorized-icon {
    font-size: 4rem;
    margin-bottom: 20px;
    color: #ff6b6b;
}

.unauthorized-card h2 {
    color: var(--white);
    font-size: var(--fz-xxl);
    margin-bottom: 15px;
    font-weight: 600;
}

.unauthorized-card p {
    color: var(--light-slate);
    font-size: var(--fz-lg);
    margin-bottom: 30px;
    line-height: 1.6;
}

/* Responsive Design for Auth Pages */
@media (max-width: 768px) {
    .logout-card,
    .unauthorized-card {
        padding: 40px 30px;
        border-radius: 20px;
        margin: 0 20px;
    }

    .logout-actions {
        flex-direction: column;
        align-items: center;
    }

    .btn-secondary,
    .btn-primary {
        width: 100%;
        max-width: 200px;
    }
}

@media (max-width: 600px) {
    .logout-card,
    .unauthorized-card {
        padding: 30px 20px;
        border-radius: 16px;
    }

    .logout-icon,
    .unauthorized-icon {
        font-size: 3rem;
    }
}

/* Admin Settings Page Styling */
.admin-content-wrapper {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
}

.admin-header-section {
    margin-bottom: 40px;
    text-align: center;
}

.admin-page-title {
    color: var(--white);
    font-size: var(--fz-heading);
    font-weight: 600;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.admin-icon {
    font-size: 2rem;
}

.admin-page-subtitle {
    color: var(--light-slate);
    font-size: var(--fz-lg);
    margin: 0;
}

.admin-settings-container {
    max-width: 800px;
    margin: 0 auto;
}

.settings-card {
    background: linear-gradient(135deg, var(--light-navy) 0%, var(--lightest-navy) 100%);
    border-radius: 20px;
    padding: 40px;
    box-shadow:
        0 20px 25px -5px rgba(0, 0, 0, 0.4),
        0 10px 10px -5px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(100, 255, 218, 0.1);
    position: relative;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.settings-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(100, 255, 218, 0.05) 0%, rgba(100, 255, 218, 0.02) 100%);
    border-radius: 20px;
    pointer-events: none;
}

.settings-section {
    margin-bottom: 40px;
    position: relative;
    z-index: 2;
}

.section-title {
    color: var(--white);
    font-size: var(--fz-xl);
    font-weight: 600;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid rgba(100, 255, 218, 0.2);
    padding-bottom: 10px;
}

.section-icon {
    font-size: 1.2rem;
}

.form-group {
    margin-bottom: 25px;
}

.form-label {
    display: block;
    color: var(--lightest-slate);
    font-size: var(--fz-md);
    font-weight: 500;
    margin-bottom: 8px;
    font-family: var(--font-mono);
}

.input-group {
    display: flex;
    align-items: center;
    background: rgba(10, 25, 47, 0.8);
    border: 1px solid rgba(100, 255, 218, 0.2);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s var(--easing);
}

.input-group:focus-within {
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(100, 255, 218, 0.1);
}

.input-prefix {
    padding: 15px 20px;
    background: rgba(100, 255, 218, 0.1);
    color: var(--green);
    font-family: var(--font-mono);
    font-size: var(--fz-sm);
    border-right: 1px solid rgba(100, 255, 218, 0.2);
    white-space: nowrap;
}

.input-group .form-input {
    border: none;
    background: transparent;
    flex: 1;
    padding: 15px 20px;
    color: var(--white);
    font-size: var(--fz-md);
}

.input-group .form-input:focus {
    outline: none;
    box-shadow: none;
}

.form-help {
    display: block;
    color: var(--slate);
    font-size: var(--fz-sm);
    margin-top: 8px;
    line-height: 1.5;
}

.form-help code {
    background: rgba(100, 255, 218, 0.1);
    color: var(--green);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: var(--fz-xs);
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    color: var(--lightest-slate);
    font-size: var(--fz-md);
}

.form-checkbox {
    width: 20px;
    height: 20px;
    accent-color: var(--green);
}

.checkbox-text {
    user-select: none;
}

.info-section {
    background: rgba(10, 25, 47, 0.3);
    border-radius: 12px;
    padding: 25px;
    border: 1px solid rgba(100, 255, 218, 0.1);
}

.info-grid {
    display: grid;
    gap: 15px;
}

.info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(100, 255, 218, 0.1);
}

.info-item:last-child {
    border-bottom: none;
}

.info-label {
    color: var(--light-slate);
    font-weight: 500;
}

.info-value {
    color: var(--white);
    font-family: var(--font-mono);
    font-size: var(--fz-sm);
}

.info-value.status-enabled {
    color: var(--green);
}

.info-value.status-disabled {
    color: #ff6b6b;
}

.form-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid rgba(100, 255, 218, 0.1);
}

.btn-save {
    padding: 15px 30px;
    background: linear-gradient(135deg, var(--green) 0%, #4ade80 100%);
    border: none;
    border-radius: 12px;
    color: var(--navy);
    font-size: var(--fz-md);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s var(--easing);
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-save:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(100, 255, 218, 0.3);
}

.btn-save:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.alert-success {
    background: rgba(100, 255, 218, 0.1);
    border: 1px solid rgba(100, 255, 218, 0.3);
    color: var(--green);
    padding: 15px;
    border-radius: 12px;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--fz-md);
}

.alert-error {
    background: rgba(255, 107, 107, 0.1);
    border: 1px solid rgba(255, 107, 107, 0.3);
    color: #ff6b6b;
    padding: 15px;
    border-radius: 12px;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--fz-md);
}

.alert-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
}

.loading-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--light-slate);
}

.loading-spinner.large {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(100, 255, 218, 0.2);
    border-top: 3px solid var(--green);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 20px;
}

.button-icon {
    font-size: 1.1rem;
}

/* Mail Settings - connection test toolbar + read-only console log */
.mail-test-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 20px;
}

.mail-test-status {
    font-family: var(--font-mono);
    font-size: var(--fz-sm);
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid rgba(100, 255, 218, 0.2);
    color: var(--light-slate);
}

.mail-test-status.status-success {
    color: var(--green);
    border-color: rgba(100, 255, 218, 0.4);
    background: rgba(100, 255, 218, 0.08);
}

.mail-test-status.status-failed {
    color: #ff6b6b;
    border-color: rgba(255, 107, 107, 0.4);
    background: rgba(255, 107, 107, 0.08);
}

.mail-test-console {
    background: #0a1120;
    border: 1px solid rgba(100, 255, 218, 0.15);
    border-radius: 12px;
    padding: 16px 18px;
    max-height: 320px;
    overflow-y: auto;
    font-family: var(--font-mono);
    font-size: var(--fz-sm);
    line-height: 1.6;
}

.mail-test-console-empty {
    color: var(--slate);
    font-style: italic;
}

.mail-test-console-line {
    display: flex;
    gap: 10px;
    white-space: pre-wrap;
    word-break: break-word;
}

.mail-test-console-time {
    color: var(--slate);
    flex-shrink: 0;
}

.mail-test-console-line.level-info .mail-test-console-message {
    color: var(--lightest-slate);
}

.mail-test-console-line.level-debug .mail-test-console-message {
    color: #7dd3fc;
}

.mail-test-console-line.level-error .mail-test-console-message {
    color: #ff6b6b;
}

/* Responsive Design for Admin Settings */
@media (max-width: 768px) {
    .admin-content-wrapper {
        padding: 15px;
    }

    .settings-card {
        padding: 30px 20px;
        border-radius: 16px;
    }

    .admin-page-title {
        font-size: var(--fz-xxl);
        flex-direction: column;
        gap: 10px;
    }

    .form-actions {
        flex-direction: column;
        align-items: center;
    }

    .btn-save,
    .btn-secondary {
        width: 100%;
        max-width: 250px;
    }

    .input-group {
        flex-direction: column;
    }

    .input-prefix {
        width: 100%;
        text-align: center;
        border-right: none;
        border-bottom: 1px solid rgba(100, 255, 218, 0.2);
    }

    .info-item {
        flex-direction: column;
        align-items: start;
        gap: 5px;
    }
}

/* MudBlazor Card Styles for Portfolio Theme */
.project-card-mud,
.blog-post-card-mud,
.contact-card,
.contact-info-card {
    background: rgba(17, 34, 64, 0.8) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(100, 255, 218, 0.1) !important;
    transition: all 0.3s var(--easing);
}

.project-card-mud:hover,
.blog-post-card-mud:hover {
    border-color: rgba(100, 255, 218, 0.3) !important;
    transform: translateY(-5px);
    box-shadow: 0 10px 30px -15px rgba(2, 12, 27, 0.7);
}

.project-card-mud .mud-card-content,
.blog-post-card-mud .mud-card-content,
.contact-card .mud-card-content,
.contact-info-card .mud-card-content {
    color: var(--slate);
}

.project-card-mud .mud-typography-h6,
.blog-post-card-mud .mud-typography-h6,
.contact-card .mud-typography-h6,
.contact-info-card .mud-typography-h6 {
    color: var(--lightest-slate);
}

/* MudTextField Dark Theme Override */
.mud-input-control .mud-input-label,
.mud-input-control .mud-input {
    color: var(--slate) !important;
}

.mud-input-control .mud-input-outlined-border {
    border-color: rgba(100, 255, 218, 0.2) !important;
}

.mud-input-control:focus-within .mud-input-outlined-border {
    border-color: var(--green) !important;
}

.mud-input-control:focus-within .mud-input-label {
    color: var(--green) !important;
}

/* MudChip Dark Theme */
.mud-chip {
    font-family: var(--font-mono);
}

/* Shared teal chip treatment (About skills, blog carousel/overview/detail
   tags & category). MudChip's Color prop pulls in MudBlazor's
   indigo/pink theme palette, and skill.BadgeClass (an admin-editable
   Bootstrap utility class, bg-primary/bg-secondary/..., see
   Admin/Pages.razor) pulls in Bootstrap's flat !important fill colors -
   both clash hard with the site's dark/teal look. Keep chips colorless
   everywhere and drive the look from here instead. */
.about-text .mud-chip,
.blog-card-dark .mud-chip,
.blog-post-card-mud .mud-chip,
.blog-post-tags .mud-chip,
.blog-category-chip {
    background: rgba(100, 255, 218, 0.1) !important;
    color: var(--green) !important;
    border: 1px solid rgba(100, 255, 218, 0.3) !important;
    box-shadow: none !important;
    transition: all 0.2s ease;
}

.about-text .mud-chip .mud-chip-icon {
    color: var(--green) !important;
}

.about-text .mud-chip:hover,
.blog-card-dark .mud-chip:hover,
.blog-post-card-mud .mud-chip:hover,
.blog-post-tags .mud-chip:hover,
.blog-category-chip:hover {
    background: rgba(100, 255, 218, 0.2) !important;
    transform: translateY(-1px);
}

/* MudButton Primary Override */
.mud-button-filled.mud-button-primary {
    background-color: var(--green) !important;
    color: var(--navy) !important;
}

.mud-button-outlined.mud-button-primary {
    border-color: var(--green) !important;
    color: var(--green) !important;
}

.mud-button-outlined.mud-button-primary:hover {
    background-color: var(--green-tint) !important;
}

/* MudAlert Success Override */
.mud-alert-success {
    background-color: var(--green-tint) !important;
    color: var(--green) !important;
}

/* Lead Text Style */
.lead {
    color: var(--slate);
    font-size: var(--fz-lg);
    line-height: 1.6;
    margin-bottom: 1rem;
}

/* Mobile Scroll Performance
   backdrop-filter blur is very GPU-expensive to keep re-compositing while
   scrolling; blur(50px) over full section-height overlays is fine on a
   desktop GPU but causes visible scroll jank on phones/tablets. Drop the
   blur on small/coarse-pointer viewports and compensate with a bit more
   background opacity so contrast stays roughly the same. */
@media (max-width: 768px), (pointer: coarse) {
    /* .global-animated-background (see MainLayout.razor) is a site-wide
       position:fixed layer of code/GIS decoration icons with their own
       infinite CSS animations. It used to be hidden under the section
       blur(50px) overlays; with those gone it shows through crisp and
       collides with body text, hurting readability. It's purely
       decorative, so drop it entirely on mobile rather than trying to
       out-opacity it. */
    .global-animated-background {
        display: none;
    }

    .cv-section::before,
    .about-section::before,
    .experience-section::before,
    .projects-section::before,
    .blog-section::before,
    .contact-section::before {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: linear-gradient(135deg, rgba(10, 25, 47, 0.55) 0%, rgba(17, 34, 64, 0.55) 50%, rgba(10, 25, 47, 0.55) 100%);
    }

    .navbar,
    .navbar.scrolled {
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    /* No mouse on touch devices, so the follower cursor never gets fired
       via mousemove anyway (see animations.js) - remove it defensively
       for anyone who forces the element through devtools/emulation. */
    .custom-cursor {
        display: none;
    }

    /* The custom ::-webkit-scrollbar styling further down this file
       forces Chromium/WebKit into the classic, always-reserved-space
       scrollbar instead of the native auto-hiding overlay one. Mobile
       browsers already draw their own thin overlay indicator, so hide
       the styled scrollbar there entirely instead of fighting it. */
    html {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    html::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }
}

/* About Content Text */
.about-content-text {
    color: var(--slate);
    line-height: 1.6;
}

/* SignalR Reconnect Modal (see Pages/_Host.cshtml)
   Blazor drives #components-reconnect-modal purely via CSS classes on the
   element itself - components-reconnect-show/retrying/failed/rejected/
   paused/resume-failed/hide - it never touches inline styles beyond that,
   so all state handling below is class-selector driven. Default state is
   hidden (no class yet, or .components-reconnect-hide). */
#components-reconnect-modal {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(2, 12, 27, 0.85);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-retrying,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected,
#components-reconnect-modal.components-reconnect-paused,
#components-reconnect-modal.components-reconnect-resume-failed {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

#components-reconnect-modal.components-reconnect-hide {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.reconnect-modal-dialog {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    width: 100%;
    max-width: 22rem;
    background: var(--light-navy);
    border: 1px solid rgba(100, 255, 218, 0.3);
    border-radius: 8px;
    padding: 2.5rem 2rem;
    text-align: center;
    box-shadow: 0 10px 30px -10px rgba(2, 12, 27, 0.9), 0 0 20px rgba(100, 255, 218, 0.1);
}

.reconnect-modal-dialog .reconnect-spinner {
    display: none;
    margin: 0;
}

#components-reconnect-modal.components-reconnect-show .reconnect-spinner,
#components-reconnect-modal.components-reconnect-retrying .reconnect-spinner {
    display: inline-block;
}

.reconnect-status {
    margin: 0;
    color: var(--light-slate);
    font-family: var(--font-mono);
    font-size: var(--fz-sm);
    line-height: 1.6;
}

.reconnect-status > span {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .reconnect-text-default {
    display: inline;
}

#components-reconnect-modal.components-reconnect-retrying .reconnect-text-default {
    display: none;
}

#components-reconnect-modal.components-reconnect-retrying .reconnect-text-retrying {
    display: inline;
}

#components-reconnect-modal.components-reconnect-failed .reconnect-text-failed,
#components-reconnect-modal.components-reconnect-rejected .reconnect-text-rejected,
#components-reconnect-modal.components-reconnect-resume-failed .reconnect-text-resume-failed {
    display: inline;
    color: #ff6b6b;
}

#components-reconnect-modal.components-reconnect-paused .reconnect-text-paused {
    display: inline;
}

.reconnect-actions {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 0.6rem;
}

.reconnect-btn {
    display: none;
}

/* MudBlazor.min.css ships its own "#components-reconnect-modal button"
   rule (color, padding, uppercase text-transform, border-radius, and a
   margin: 40px auto that's !important) meant for its own default
   reconnect-modal recipe. Its "id + type" selector outranks our plain
   ".reconnect-btn" class on every property, so re-declare everything
   that matters under an "id + class" selector, which outranks it - and
   match the !important on margin since that's the one declaration where
   specificity alone can't win. */
#components-reconnect-modal .reconnect-btn {
    display: none;
    width: 100%;
    min-width: 0;
    margin: 0 !important;
    padding: 0.6rem 1.25rem;
    font-family: var(--font-mono);
    font-size: var(--fz-sm);
    font-weight: 400;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    text-align: center;
    color: var(--green);
    background-color: transparent;
    border: 1px solid var(--green);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#components-reconnect-modal .reconnect-btn:hover {
    background-color: var(--green-tint);
    color: var(--lightest-slate);
}

#components-reconnect-modal.components-reconnect-failed .reconnect-btn-retry,
#components-reconnect-modal.components-reconnect-failed .reconnect-btn-reload,
#components-reconnect-modal.components-reconnect-rejected .reconnect-btn-reload,
#components-reconnect-modal.components-reconnect-resume-failed .reconnect-btn-reload {
    display: block;
}

#components-reconnect-modal.components-reconnect-paused .reconnect-btn-resume {
    display: block;
}