/* PixelOnForge site.css - Global Theme System */

/* Light Mode (Default) */
:root {
    --dp-hero-bg: linear-gradient(135deg, #f0f4ff 0%, #fafafa 100%);
    --dp-skills-bg: #f8f9fa;
    --dp-stats-bg: #f0f4ff;
    --dp-card-bg: #ffffff;
    --dp-nav-bg: rgba(255,255,255,0.95);
    --dp-border: #dee2e6;
    --dp-skill-chip-bg: #ffffff;
    --dp-skill-chip-shadow: 0 2px 8px rgba(0,0,0,.06);
    --dp-stat-card-bg: #ffffff;
    --dp-stat-card-shadow: 0 4px 16px rgba(0,0,0,.06);
    --dp-tech-badge-bg: #e7f0ff;
    --dp-tech-badge-color: #2563eb;
    --dp-timeline-dot: #2563eb;
    --dp-contact-card-bg: #f8f9fa;
    --dp-contact-card-hover: #e7f0ff;
    --dp-detail-img-bg: #f0f4ff;
    --dp-skill-icon-bg: #e7f0ff;
    --dp-skill-detail-bg: #f8f9fa;
    --dp-admin-sidebar-bg: #1e293b;
    --dp-admin-sidebar-text: #cbd5e1;
    --dp-admin-sidebar-active: #2563eb;
    --dp-admin-content-bg: #ffffff;
    --dp-body-bg: #ffffff;
    --dp-text-color: #1f2937;
}

/* Dark Mode */
[data-bs-theme="dark"] {
    --dp-hero-bg: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    --dp-skills-bg: #1e293b;
    --dp-stats-bg: #0f172a;
    --dp-card-bg: #1e293b;
    --dp-nav-bg: rgba(15,23,42,0.97);
    --dp-border: #334155;
    --dp-skill-chip-bg: #1e293b;
    --dp-skill-chip-shadow: 0 2px 8px rgba(0,0,0,.3);
    --dp-stat-card-bg: #1e293b;
    --dp-stat-card-shadow: 0 4px 16px rgba(0,0,0,.3);
    --dp-tech-badge-bg: #1e3a5f;
    --dp-tech-badge-color: #60a5fa;
    --dp-timeline-dot: #60a5fa;
    --dp-contact-card-bg: #1e293b;
    --dp-contact-card-hover: #1e3a5f;
    --dp-detail-img-bg: #1e293b;
    --dp-skill-icon-bg: #1e3a5f;
    --dp-skill-detail-bg: #1e293b;
    --dp-admin-content-bg: #0f172a;
    --dp-body-bg: #0f172a;
    --dp-text-color: #e2e8f0;
}

/* Base Elements */
html { 
    font-size: 16px; 
    scroll-behavior: smooth; 
}

body { 
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif; 
    transition: background-color .25s, color .25s;
    background-color: var(--dp-body-bg);
    color: var(--dp-text-color);
}

/* Dark Mode Global Text Colors */
[data-bs-theme="dark"] body {
    background-color: #0f172a;
    color: #e2e8f0;
}

[data-bs-theme="dark"] h1, 
[data-bs-theme="dark"] h2, 
[data-bs-theme="dark"] h3, 
[data-bs-theme="dark"] h4, 
[data-bs-theme="dark"] h5, 
[data-bs-theme="dark"] h6 {
    color: #f1f5f9;
}

[data-bs-theme="dark"] p {
    color: #cbd5e1;
}

[data-bs-theme="dark"] .text-muted {
    color: #cbd5e1 !important;
}

[data-bs-theme="dark"] .lead {
    color: #cbd5e1;
}

/* Navigation */
#mainNav { 
    background: var(--dp-nav-bg); 
    backdrop-filter: blur(10px); 
    border-bottom: 1px solid var(--dp-border); 
    transition: background .25s; 
}

[data-bs-theme="dark"] .navbar-brand {
    color: #f1f5f9 !important;
}

[data-bs-theme="dark"] .nav-link {
    color: #cbd5e1 !important;
}

[data-bs-theme="dark"] .nav-link:hover {
    color: #f1f5f9 !important;
}

/* Buttons */
[data-bs-theme="dark"] .btn-outline-secondary {
    color: #cbd5e1;
    border-color: #475569;
}

[data-bs-theme="dark"] .btn-outline-secondary:hover {
    color: #f1f5f9;
    background-color: #475569;
}

[data-bs-theme="dark"] .btn-primary {
    background-color: #2563eb;
    border-color: #2563eb;
}

[data-bs-theme="dark"] .btn-primary:hover {
    background-color: #1d4ed8;
    border-color: #1d4ed8;
}

/* Hero Section */
.hero-section { 
    background: var(--dp-hero-bg); 
    transition: background .25s; 
}

[data-bs-theme="dark"] .hero-section {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

.hero-avatar { 
    width: 260px; 
    height: 260px; 
    border-radius: 50%; 
    background: var(--dp-tech-badge-bg); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 7rem; 
    color: var(--dp-tech-badge-color); 
    box-shadow: 0 8px 32px rgba(37,99,235,.15); 
    transition: background .25s; 
}

/* Skills Section */
.skills-strip { 
    background: var(--dp-skills-bg); 
    transition: background .25s; 
}

[data-bs-theme="dark"] .skills-strip {
    background: #1e293b;
}

.skill-chip { 
    background: var(--dp-skill-chip-bg); 
    box-shadow: var(--dp-skill-chip-shadow); 
    transition: transform .2s, box-shadow .2s, background .25s;
    color: inherit;
}

[data-bs-theme="dark"] .skill-chip {
    background: #1e293b;
    color: #e2e8f0;
}

.skill-chip:hover { 
    transform: translateY(-3px); 
    box-shadow: 0 6px 16px rgba(0,0,0,.1); 
}

.card-img-placeholder { 
    height: 180px; 
    background: var(--dp-tech-badge-bg); 
    transition: background .25s; 
}

/* Stats Section */
.stats-section { 
    background: var(--dp-stats-bg); 
    transition: background .25s; 
}

[data-bs-theme="dark"] .stats-section {
    background: #0f172a;
}

.stat-card { 
    background: var(--dp-stat-card-bg); 
    box-shadow: var(--dp-stat-card-shadow); 
    transition: transform .2s, background .25s;
    color: inherit;
}

[data-bs-theme="dark"] .stat-card {
    background: #1e293b;
    color: #e2e8f0;
}

.stat-card:hover { 
    transform: translateY(-3px); 
}

/* Featured Projects Section */
.featured-projects-section {
    background: var(--dp-skills-bg);
    transition: background .25s;
}

[data-bs-theme="dark"] .featured-projects-section {
    background: #1e293b;
}

[data-bs-theme="dark"] .featured-projects-section h2,
[data-bs-theme="dark"] .featured-projects-section h3 {
    color: #f1f5f9;
}

[data-bs-theme="dark"] .featured-projects-section p {
    color: #cbd5e1;
}

/* Cards */
[data-bs-theme="dark"] .card {
    background-color: #1e293b;
    color: #e2e8f0;
    border-color: #334155;
}

[data-bs-theme="dark"] .card-body {
    color: #e2e8f0;
}

[data-bs-theme="dark"] .card-title {
    color: #f1f5f9;
}

[data-bs-theme="dark"] .card-text {
    color: #cbd5e1;
}

/* Badges */
[data-bs-theme="dark"] .badge {
    color: #f1f5f9;
}

[data-bs-theme="dark"] .text-bg-primary {
    background-color: #2563eb !important;
    color: #ffffff !important;
}

/* About Section */
.about-avatar { 
    width: 180px; 
    height: 180px; 
    border-radius: 50%; 
    background: var(--dp-tech-badge-bg); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 5rem; 
    color: var(--dp-tech-badge-color); 
    transition: background .25s; 
}

.skill-detail-card { 
    background: var(--dp-skill-detail-bg); 
    border: 1px solid var(--dp-border); 
    transition: background .25s, border-color .25s;
    color: inherit;
}

[data-bs-theme="dark"] .skill-detail-card {
    background: #1e293b;
    color: #e2e8f0;
    border-color: #334155;
}

.skill-icon-wrap { 
    background: var(--dp-skill-icon-bg); 
    transition: background .25s; 
}

/* Timeline */
.timeline { 
    position: relative; 
    padding-left: 1.5rem; 
}

.timeline::before { 
    content: ""; 
    position: absolute; 
    left: 8px; 
    top: 8px; 
    bottom: 0; 
    width: 2px; 
    background: var(--dp-border); 
    transition: background .25s; 
}

.timeline-dot { 
    width: 18px; 
    height: 18px; 
    border-radius: 50%; 
    background: var(--dp-timeline-dot); 
    flex-shrink: 0; 
    margin-top: 4px; 
    box-shadow: 0 0 0 4px var(--dp-tech-badge-bg); 
    transition: background .25s, box-shadow .25s; 
}

[data-bs-theme="dark"] .timeline-dot {
    background: #60a5fa;
}

/* Detail Page */
.detail-img-placeholder { 
    height: 340px; 
    background: var(--dp-detail-img-bg); 
    transition: background .25s; 
}

/* Contact Section */
.contact-info-card { 
    background: var(--dp-contact-card-bg); 
    border: 1px solid var(--dp-border); 
    color: inherit; 
    transition: background .2s, border-color .2s, transform .2s; 
}

[data-bs-theme="dark"] .contact-info-card {
    background: #1e293b;
    color: #e2e8f0;
    border-color: #334155;
}

.contact-info-card:hover { 
    background: var(--dp-contact-card-hover); 
    transform: translateY(-3px); 
    color: inherit; 
}

/* Forms */
[data-bs-theme="dark"] .form-control, 
[data-bs-theme="dark"] .form-select, 
[data-bs-theme="dark"] textarea {
    background-color: #0f172a;
    color: #e2e8f0;
    border-color: #334155;
}

[data-bs-theme="dark"] .form-control:focus, 
[data-bs-theme="dark"] .form-select:focus, 
[data-bs-theme="dark"] textarea:focus {
    background-color: #0f172a;
    color: #e2e8f0;
    border-color: #2563eb;
    box-shadow: 0 0 0 0.25rem rgba(37, 99, 235, 0.25);
}

[data-bs-theme="dark"] .form-label {
    color: #f1f5f9;
}

/* Tables */
[data-bs-theme="dark"] .table {
    color: #e2e8f0;
    border-color: #334155;
}

[data-bs-theme="dark"] .table th {
    color: #f1f5f9;
    background-color: #0f172a;
    border-color: #334155;
}

[data-bs-theme="dark"] .table td {
    color: #cbd5e1;
    border-color: #334155;
}

[data-bs-theme="dark"] .table tbody tr:hover {
    background-color: rgba(37, 99, 235, 0.1);
}

/* Alerts */
[data-bs-theme="dark"] .alert {
    background-color: #1e293b;
    color: #e2e8f0;
    border-color: #334155;
}

[data-bs-theme="dark"] .alert-success {
    background-color: #1e3a1f;
    color: #86efac;
    border-color: #16a34a;
}

[data-bs-theme="dark"] .alert-danger {
    background-color: #3a1f1f;
    color: #fca5a5;
    border-color: #dc2626;
}

/* Admin Section */
.admin-wrapper { 
    display: flex; 
    min-height: calc(100vh - 70px); 
}

.admin-sidebar { 
    width: 240px; 
    flex-shrink: 0; 
    background: var(--dp-admin-sidebar-bg); 
    color: var(--dp-admin-sidebar-text); 
    padding: 1.5rem 0; 
    transition: background .25s; 
}

.admin-sidebar .sidebar-brand { 
    padding: 0 1.5rem 1.5rem; 
    font-weight: 700; 
    font-size: 1.1rem; 
    color: #fff; 
    border-bottom: 1px solid rgba(255,255,255,.1); 
    margin-bottom: 1rem; 
    display: block; 
}

.admin-sidebar .nav-link { 
    color: var(--dp-admin-sidebar-text); 
    padding: .6rem 1.5rem; 
    border-radius: 0; 
    transition: background .15s, color .15s; 
    display: flex; 
    align-items: center; 
    gap: .6rem; 
}

.admin-sidebar .nav-link:hover, 
.admin-sidebar .nav-link.active { 
    background: rgba(255,255,255,.08); 
    color: #fff; 
}

.admin-sidebar .nav-link.active { 
    border-left: 3px solid var(--dp-admin-sidebar-active); 
}

.admin-content { 
    flex: 1; 
    padding: 2rem; 
    overflow-x: auto;
    background: var(--dp-admin-content-bg);
    transition: background .25s;
}

[data-bs-theme="dark"] .admin-content {
    background: #0f172a;
    color: #e2e8f0;
}

.admin-table th { 
    font-weight: 600; 
    font-size: .85rem; 
    text-transform: uppercase; 
    letter-spacing: .04em; 
}

/* Theme Toggle */
#themeToggle { 
    transition: all .2s; 
}

#themeToggle:hover { 
    transform: scale(1.05); 
}

/* Focus States */
.btn:focus, 
.btn:active:focus, 
.form-control:focus, 
.form-check-input:focus { 
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb; 
}

/* Responsive */
@media (max-width: 768px) {
    .hero-avatar { 
        width: 160px; 
        height: 160px; 
        font-size: 4rem; 
    }
    .admin-sidebar { 
        width: 100%; 
    }
    .admin-wrapper { 
        flex-direction: column; 
    }
}