/* ============================
   THEME VARIABLES
============================ */

/* Light theme (default) */
:root {
    --bg-color: #ffffff;
    --text-color: #000000;
    --card-bg: #f8f9fa;
    --accent-color: #003b3a;
    --icon-color: #003b3a;
}

/* Dark theme */
[data-theme="dark"] {
    --bg-color: #000707;
    --text-color: #f1f1f1;
    --card-bg: #131a1a;
    --accent-color: #7fa99b;
    --icon-color: #ffffff;
}


/* ============================
   GLOBAL STYLES
============================ */

body {
    margin: 0;
    font-family: sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
}


/* ============================
   SIDEBAR
============================ */

.sidebar {
    width: 30vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    overflow-y: auto;
    padding: 10rem 1.5rem;
    background-color: #333333;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.05); 
    color: #f8f9fa;
}

[data-theme="light"] .sidebar {
    background-image: url("../assets/img/bgLight.png");
}

[data-theme="dark"] .sidebar {
    background-image: url("../assets/img/bgDark.png");
}


/* ============================
   MAIN CONTENT
============================ */

.main-content {
    margin-left: 30vw;
    height: 100vh;
    overflow-y: auto;
    padding: 6rem 4rem;
    background-color: var(--bg-color);
}

.t1 {
    font-weight: bold;
    font-size: 3rem;
    color: var(--accent-color);
}


/* ============================
   COMPONENTS
============================ */

.profile-img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 50%;
    margin-bottom: 1rem;
    background-color: black;
}

.icon-color {
    color: var(--icon-color);
    transition: color 0.3s ease;
}

.card {
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    background-color: var(--card-bg);
    color: var(--text-color);
}

.card:hover {
    transform: scale(1.03);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.tech {
    font-weight: bold;
    color: var(--accent-color);
}


/* ============================
   THEME TOGGLE SWITCH
============================ */

.form-check-input {
    background-image: none !important;
    position: relative;
    transform: scale(1.5);
}

.form-check-input::after {
    content: "\f186"; /* Moon icon */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--icon-color);
    position: absolute;
    top: 50%;
    left: 0.25rem;
    transform: translateY(-50%);
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

.form-check-input:checked::after {
    content: "\f185"; /* Sun icon */
    text-shadow: 0 0 3px rgba(0, 39, 23, 0.8);
    left: 1.2rem;
}

.form-check-input:focus {
    box-shadow: 0 0 0 0.25rem rgba(0, 86, 76, 0.25) !important;
}

/* Custom toggle appearance - light theme */
[data-theme="light"] .form-check-input {
    border-color: var(--accent-color);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2328a745'/%3e%3c/svg%3e");
}

/* Custom toggle appearance - dark theme */
[data-theme="dark"] .form-check-input {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e");
}


/* ============================
   RESPONSIVE DESIGN
============================ */

@media (max-width: 768px) {
    .sidebar {
        position: relative;
        width: 100%;
        height: auto;
        padding: 1rem;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    }

    .flex-btn {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        width: 50vh;
    }

    .flex-btn a {
        width: 24vh !important;
    }

    .main-content {
        margin-left: 0;
        margin-top: 1rem;
        height: auto;
        padding: 2rem 1rem;
    }
}