/* Project Details Page - Dark Theme & Swiper Styles */

:root[data-theme='dark'] .project-details-page ~ *,
.project-details-page {
    /* Page-specific dark theme uses GitHub-style colors */
}

:root[data-theme='dark'] {
    --color-dark: 13 17 23;
    --color-dark-card: 22 27 34;
    --color-dark-footer: 1 4 9;
    --color-surface: 13 17 23;
    --color-surface-card: 22 27 34;
    --color-surface-muted: 13 17 23;
    --color-surface-border: 48 54 61;
    --color-neutral-50: 1 4 9;
    --color-neutral-100: 13 17 23;
    --color-neutral-200: 22 27 34;
    --color-neutral-300: 48 54 61;
    --color-neutral-400: 110 118 129;
    --color-neutral-500: 139 148 158;
    --color-neutral-600: 177 186 196;
    --color-neutral-700: 201 209 217;
    --color-neutral-800: 230 237 243;
    --color-neutral-900: 240 246 252;
    --color-neutral-950: 255 255 255;
    --color-primary-50: 9 20 41;
    --color-primary-100: 13 30 59;
    --color-primary-200: 27 63 124;
    --color-primary-300: 56 139 253;
    --color-primary-400: 88 166 255;
    --color-primary-500: 56 139 253;
    --color-primary-600: 31 111 235;
    --color-primary-700: 17 88 199;
    --color-primary-800: 9 71 158;
    --color-primary-900: 12 45 107;
    --color-primary-950: 5 30 64;
    --color-header-bg: 13 17 23;
    --color-header-border: 31 111 235;
    --color-nav-text: 201 209 217;
    --color-nav-hover: 88 166 255;
    --color-nav-active: 88 166 255;
}

[data-theme='dark'] body {
    background-color: rgb(var(--color-dark));
    color: rgb(var(--color-neutral-700));
}

.swiper-container {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    background-color: rgb(var(--color-surface-card));
}

.swiper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper-slide img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

[data-theme='dark'] .project-details-page {
    color: rgb(var(--color-neutral-700));
}

[data-theme='dark'] .project-details-page .bg-white,
[data-theme='dark'] .project-details-page .dark\:bg-slate-800 {
    background-color: rgb(var(--color-surface-card));
}

[data-theme='dark'] .project-details-page .bg-slate-50,
[data-theme='dark'] .project-details-page .bg-slate-50\/60,
[data-theme='dark'] .project-details-page .dark\:bg-slate-900,
[data-theme='dark'] .project-details-page .project-preview-panel,
[data-theme='dark'] .project-details-page .project-deliverables-panel {
    background: rgb(var(--color-dark));
}

[data-theme='dark'] .project-details-page .border-slate-100,
[data-theme='dark'] .project-details-page .border-slate-200,
[data-theme='dark'] .project-details-page .border-slate-200\/60,
[data-theme='dark'] .project-details-page .border-slate-200\/80,
[data-theme='dark'] .project-details-page .border-slate-600\/40,
[data-theme='dark'] .project-details-page .dark\:border-slate-700 {
    border-color: rgb(var(--color-surface-border));
}

[data-theme='dark'] .project-details-page .text-slate-900,
[data-theme='dark'] .project-details-page .text-slate-300,
[data-theme='dark'] .project-details-page .hover\:text-white:hover {
    color: rgb(var(--color-neutral-900));
}

[data-theme='dark'] .project-details-page .text-slate-700,
[data-theme='dark'] .project-details-page .text-slate-600 {
    color: rgb(var(--color-neutral-700));
}

[data-theme='dark'] .project-details-page .text-slate-500,
[data-theme='dark'] .project-details-page .text-slate-400,
[data-theme='dark'] .project-details-page .project-copy-button {
    color: rgb(var(--color-neutral-500));
}

[data-theme='dark'] .project-details-page .bg-white\/70 {
    background-color: rgba(48, 54, 61, 0.55);
    color: rgb(var(--color-neutral-700));
}

[data-theme='dark'] .project-details-page .project-copy-button {
    background-color: rgba(22, 27, 34, 0.9);
    border-color: rgb(var(--color-surface-border));
}

[data-theme='dark'] .project-details-page .project-copy-button:hover {
    background-color: rgba(31, 111, 235, 0.18);
    color: rgb(var(--color-neutral-900));
}

[data-theme='dark'] .project-details-page .bg-primary-50,
[data-theme='dark'] .project-details-page .dark\:bg-primary-950 {
    background-color: rgba(31, 111, 235, 0.12);
}

[data-theme='dark'] .project-details-page .bg-red-50,
[data-theme='dark'] .project-details-page .dark\:bg-red-950 {
    background-color: rgba(248, 81, 73, 0.12);
}

[data-theme='dark'] .project-details-page .bg-emerald-50,
[data-theme='dark'] .project-details-page .bg-emerald-100 {
    background-color: rgba(63, 185, 80, 0.12);
}

[data-theme='dark'] .project-details-page .bg-primary-100 {
    background-color: rgba(88, 166, 255, 0.16);
}

[data-theme='dark'] .project-details-page .hover\:bg-primary-50\/40:hover {
    background-color: rgba(31, 111, 235, 0.1);
}

[data-theme='dark'] .project-details-page .text-primary-600,
[data-theme='dark'] .project-details-page .text-primary-700,
[data-theme='dark'] .project-details-page .hover\:text-primary-700:hover {
    color: rgb(var(--color-primary-400));
}

[data-theme='dark'] .project-details-page .bg-primary-600 {
    background-color: rgb(var(--color-primary-600));
}

[data-theme='dark'] .project-details-page .hover\:bg-primary-700:hover {
    background-color: rgb(var(--color-primary-700));
}

[data-theme='dark'] .project-details-page .shadow-primary-200 {
    --tw-shadow-color: rgba(31, 111, 235, 0.24);
    --tw-shadow: 0 10px 30px rgba(1, 4, 9, 0.28);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

[data-theme='dark'] .project-details-page .project-shell,
[data-theme='dark'] .project-details-page .project-sidebar-card,
[data-theme='dark'] .project-details-page .project-link-card {
    box-shadow: 0 0 0 1px rgba(48, 54, 61, 0.2), 0 18px 48px rgba(1, 4, 9, 0.34);
}