/**
 * Theme Toggle Styles
 * 
 * @package Bakry_Portfolio
 */

/* Theme Toggle Button */
.theme-toggle {
    position: relative;
    width: 60px;
    height: 30px;
    background: var(--glass-gradient);
    border: 1px solid var(--card-border);
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    padding: 3px;
}

.theme-toggle:hover {
    border-color: var(--accent-blue);
    box-shadow: 0 0 10px rgba(var(--accent-blue-rgb), 0.3);
}

.theme-toggle-slider {
    position: absolute;
    width: 24px;
    height: 24px;
    background: var(--accent-blue);
    border-radius: 50%;
    transition: transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.theme-toggle-slider i {
    font-size: 0.75rem;
    color: var(--text-primary);
}

/* Light Mode Active */
[data-theme="light"] .theme-toggle-slider {
    transform: translateX(30px);
}

/* Icons */
.theme-icon-sun,
.theme-icon-moon {
    position: absolute;
    font-size: 0.85rem;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.theme-icon-sun {
    right: 8px;
    color: var(--accent-peach);
    opacity: 0.5;
}

.theme-icon-moon {
    left: 8px;
    color: var(--text-secondary);
    opacity: 0.5;
}

[data-theme="light"] .theme-icon-sun {
    opacity: 1;
}

[data-theme="dark"] .theme-icon-moon,
[data-theme]:not([data-theme="light"]) .theme-icon-moon {
    opacity: 1;
}

/* ===========================
   LIGHT MODE OVERRIDES
   =========================== */

/* Light Mode Body Background */
[data-theme="light"] body {
    background-image: 
        linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(245, 245, 245, 0.9)),
        url('https://images.unsplash.com/photo-1614850523459-c2f4c699c52e?auto=format&fit=crop&w=1920&q=80');
    color: var(--text-primary) !important;
}

/* Light Mode Text Colors - High Priority */
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] h5,
[data-theme="light"] h6 {
    color: var(--text-primary) !important;
}

[data-theme="light"] p,
[data-theme="light"] span {
    color: var(--text-primary) !important;
}

[data-theme="light"] .card h1,
[data-theme="light"] .card h2,
[data-theme="light"] .card h3,
[data-theme="light"] .card h4,
[data-theme="light"] .card h5,
[data-theme="light"] .card h6 {
    color: var(--text-primary) !important;
}

[data-theme="light"] .card p,
[data-theme="light"] .card span {
    color: var(--text-primary) !important;
}

/* Light Mode Icons */
[data-theme="light"] i,
[data-theme="light"] .fas,
[data-theme="light"] .far,
[data-theme="light"] .fab {
    color: inherit;
}

/* Light Mode Specific Icon Colors */
[data-theme="light"] .skill-icon-center i,
[data-theme="light"] .service-icon i {
    color: var(--accent-blue) !important;
}

/* Light Mode Skill Circle */
[data-theme="light"] .skill-circle-progress {
    stroke: var(--accent-blue) !important;
}

[data-theme="light"] .skill-circle-bg {
    stroke: rgba(90, 90, 65, 0.2) !important;
}

/* Light Mode Card Shadows */
[data-theme="light"] .card {
    box-shadow: 
        0 4px 6px rgba(0, 0, 0, 0.05),
        0 1px 3px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .card:hover {
    box-shadow: 
        0 8px 16px rgba(0, 0, 0, 0.1),
        0 2px 4px rgba(0, 0, 0, 0.06);
}

/* Light Mode Card Backgrounds */
[data-theme="light"] .card,
[data-theme="light"] .skill-item,
[data-theme="light"] .service-item,
[data-theme="light"] .project-item {
    background: var(--glass-gradient);
    border-color: var(--card-border);
}

/* Light Mode Profile Info */
[data-theme="light"] .profile-name,
[data-theme="light"] .profile-title,
[data-theme="light"] .profile-location {
    color: var(--text-primary) !important;
}

[data-theme="light"] .profile-location span {
    color: var(--text-secondary) !important;
}

/* Light Mode Skill Percentage */
[data-theme="light"] .skill-percentage {
    color: var(--accent-blue) !important;
}

/* Light Mode Skill Name */
[data-theme="light"] .skill-name {
    color: var(--text-primary) !important;
}

/* Light Mode Skill Info */
[data-theme="light"] .skill-info {
    color: var(--text-primary) !important;
}

[data-theme="light"] .skill-info span {
    color: var(--text-primary) !important;
}

/* Light Mode About Card */
[data-theme="light"] .about-card h1,
[data-theme="light"] .about-card h2,
[data-theme="light"] .about-card h3 {
    color: var(--text-primary) !important;
}

[data-theme="light"] .about-card p {
    color: var(--text-primary) !important;
}

/* Light Mode Skills Card */
[data-theme="light"] .skills-card h2 {
    color: var(--text-primary) !important;
}

[data-theme="light"] .skills-card span {
    color: var(--text-primary) !important;
}

/* Light Mode Navigation */
[data-theme="light"] .header-menu li a {
    color: var(--text-primary) !important;
}

[data-theme="light"] .nav-item {
    color: var(--text-secondary) !important;
}

[data-theme="light"] .nav-item:hover,
[data-theme="light"] .nav-item.active {
    color: var(--accent-blue) !important;
}

[data-theme="light"] .nav-item i {
    color: inherit !important;
}

[data-theme="light"] .nav-item span {
    color: var(--text-secondary) !important;
}

/* Light Mode Bottom Navigation Specific */
[data-theme="light"] .bottom-nav .nav-item {
    color: #1a1a1a !important;
}

[data-theme="light"] .bottom-nav .nav-item i {
    color: #1a1a1a !important;
}

[data-theme="light"] .bottom-nav .nav-item span {
    color: #1a1a1a !important;
}

[data-theme="light"] .bottom-nav .nav-item:hover,
[data-theme="light"] .bottom-nav .nav-item.active {
    color: var(--accent-blue) !important;
}

[data-theme="light"] .bottom-nav .nav-item:hover i,
[data-theme="light"] .bottom-nav .nav-item.active i {
    color: var(--accent-blue) !important;
}

[data-theme="light"] .bottom-nav .nav-item:hover span,
[data-theme="light"] .bottom-nav .nav-item.active span {
    color: var(--accent-blue) !important;
}

/* Light Mode Buttons */
[data-theme="light"] .btn {
    color: var(--text-primary) !important;
    background: var(--glass-gradient) !important;
    border-color: var(--card-border) !important;
}

[data-theme="light"] .btn:hover {
    color: var(--text-primary) !important;
}

[data-theme="light"] .cta-secondary {
    color: var(--text-primary) !important;
}

[data-theme="light"] .cta-secondary:hover {
    color: var(--text-primary) !important;
}

/* Light Mode Hover Effects */
[data-theme="light"] .btn:hover,
[data-theme="light"] .project-item:hover,
[data-theme="light"] .skill-item:hover,
[data-theme="light"] .service-item:hover {
    box-shadow: 0 8px 16px rgba(90, 90, 65, 0.15);
}

/* Light Mode Project Cards */
[data-theme="light"] .project-item h3,
[data-theme="light"] .project-item h4 {
    color: var(--text-primary);
}

[data-theme="light"] .project-item p {
    color: var(--text-secondary);
}

[data-theme="light"] .project-content {
    color: var(--text-primary);
}

/* Light Mode Blog Cards */
[data-theme="light"] .blog-title {
    color: var(--text-primary);
}

[data-theme="light"] .blog-excerpt {
    color: var(--text-secondary);
}

[data-theme="light"] .blog-date,
[data-theme="light"] .blog-category {
    color: var(--text-secondary);
}

[data-theme="light"] .read-more {
    color: var(--accent-blue);
}

/* Light Mode FAQ */
[data-theme="light"] .faq-question-text {
    color: var(--text-primary);
}

[data-theme="light"] .faq-answer-content {
    color: var(--text-secondary);
}

/* Light Mode Testimonials */
[data-theme="light"] .testimonial-text {
    color: var(--text-primary);
}

[data-theme="light"] .testimonial-client-name {
    color: var(--text-primary);
}

[data-theme="light"] .testimonial-client-position,
[data-theme="light"] .testimonial-client-company {
    color: #1a1a1a !important;
}

/* Light Mode Contact Info */
[data-theme="light"] .info-content h3,
[data-theme="light"] .info-content h4 {
    color: var(--text-primary);
}

[data-theme="light"] .info-content p,
[data-theme="light"] .info-content a {
    color: var(--text-secondary);
}

/* Light Mode Form Labels */
[data-theme="light"] label {
    color: var(--text-secondary);
}

/* Light Mode Social Links */
[data-theme="light"] .social-item {
    color: var(--text-primary);
}

[data-theme="light"] .social-item i {
    color: var(--accent-blue);
}

/* Light Mode About Section */
[data-theme="light"] .about-section,
[data-theme="light"] .about-text {
    color: var(--text-primary);
}

/* Light Mode Bottom Nav */
[data-theme="light"] .bottom-nav {
    background: var(--glass-gradient);
    border-top-color: var(--card-border);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.05);
}

/* Light Mode Form Inputs */
[data-theme="light"] input,
[data-theme="light"] textarea,
[data-theme="light"] select {
    background: var(--glass-gradient);
    color: var(--text-primary);
    border-color: var(--card-border);
}

[data-theme="light"] input:focus,
[data-theme="light"] textarea:focus,
[data-theme="light"] select:focus {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(var(--accent-blue-rgb), 0.1);
}

/* Light Mode Header */
[data-theme="light"] .header-nav {
    background: var(--glass-gradient);
    border-left-color: var(--card-border);
}

/* Light Mode Mobile Menu */
@media (max-width: 768px) {
    [data-theme="light"] .header-nav {
        background: var(--glass-gradient);
        backdrop-filter: blur(20px);
    }
}

/* Smooth Transitions */
body,
.card,
.btn,
input,
textarea,
select,
.header-nav,
.bottom-nav {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Toggle Button in Header */
.header-controls .theme-toggle {
    margin-left: 10px;
}

@media (max-width: 768px) {
    .header-controls .theme-toggle {
        margin-left: 0;
    }
}

/* Accessibility */
.theme-toggle:focus {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
}

.theme-toggle:focus:not(:focus-visible) {
    outline: none;
}

/* Animation */
@keyframes slideIn {
    from {
        transform: translateX(-10px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.theme-toggle {
    animation: slideIn 0.3s ease;
}

/* Light Mode Progress Bars */
[data-theme="light"] .progress::after {
    box-shadow: 0 0 10px rgba(90, 90, 65, 0.3);
}

/* Light Mode Status Indicator */
[data-theme="light"] .status-indicator.online {
    box-shadow: 0 0 10px rgba(76, 175, 80, 0.7);
}

/* Light Mode Tech Tags */
[data-theme="light"] .tech-tag {
    background: rgba(90, 90, 65, 0.1);
    border-color: var(--card-border);
    color: var(--text-secondary);
}

[data-theme="light"] .tech-tag:hover {
    background: rgba(90, 90, 65, 0.2);
    border-color: var(--accent-blue);
    color: var(--text-primary);
}

/* Light Mode Profile Image Border */
[data-theme="light"] .profile-image img {
    border-color: var(--card-border);
}

[data-theme="light"] .profile-pic img {
    border-color: var(--card-border);
}

/* Light Mode Welcome Section */
[data-theme="light"] .welcome-section h1 {
    color: var(--text-secondary) !important;
}

[data-theme="light"] .welcome-section h2 {
    color: var(--text-primary) !important;
}

/* Light Mode Header */
[data-theme="light"] .header {
    color: var(--text-primary) !important;
}

[data-theme="light"] .header h1,
[data-theme="light"] .header h2 {
    color: var(--text-primary) !important;
}

/* Light Mode Card Headers */
[data-theme="light"] .card-header h2,
[data-theme="light"] .card-header h3 {
    color: var(--text-primary);
}

/* Light Mode Meta Information */
[data-theme="light"] .project-meta-item,
[data-theme="light"] .blog-meta {
    color: var(--text-secondary);
}

[data-theme="light"] .project-meta-item i,
[data-theme="light"] .blog-meta i {
    color: var(--accent-blue);
}

/* Light Mode Badge */
[data-theme="light"] .badge {
    background: rgba(90, 90, 65, 0.2);
    color: var(--accent-blue);
}

/* Light Mode Status Text */
[data-theme="light"] .status-text {
    color: var(--text-primary);
}

[data-theme="light"] .availability-note {
    color: var(--text-secondary);
}

/* Light Mode Metric Labels */
[data-theme="light"] .metric-label {
    color: var(--text-secondary);
}

[data-theme="light"] .metric-value {
    color: var(--text-primary);
}

/* Light Mode Quick Links */
[data-theme="light"] .quick-link-item {
    color: var(--text-primary);
}

[data-theme="light"] .quick-link-item i {
    color: var(--accent-blue);
}

/* Light Mode Footer/Credits */
[data-theme="light"] footer,
[data-theme="light"] .footer {
    color: var(--text-secondary);
}

/* Light Mode Links */
[data-theme="light"] a {
    color: var(--accent-blue);
}

[data-theme="light"] a:hover {
    color: var(--accent-olive);
}

/* Light Mode Placeholder Text */
[data-theme="light"] ::placeholder {
    color: var(--text-secondary);
    opacity: 0.7;
}

/* Light Mode Selection */
[data-theme="light"] ::selection {
    background: var(--accent-blue);
    color: var(--text-primary);
}

/* Light Mode Scrollbar */
[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: var(--card-border);
}

[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
    background: var(--accent-blue);
}

/* Light Mode Submit Button Text */
[data-theme="light"] .submit-btn {
    color: var(--text-primary);
}

[data-theme="light"] .cta-primary {
    color: var(--text-primary);
}