/* * MAIN.CSS - Global Styles
 * Handles Layout, Theme Variables, and Responsive Navigation
 */

:root {
    /* --- Light Mode Palette --- */
    --bg-color: #f8fcf9;         /* Very subtle mint-white background */
    --text-color: #0b3d20;       /* Deep Forest Green (Primary Text) - replaces black */
    --header-bg: #000;           /* Kept Black per original requirement */
    --header-text: #2ecc71;      /* Bright Emerald text on black header */
    --nav-bg: #fff;
    --nav-border: #a3d9b8;       /* Light green border */
    
    /* Brand Colors */
    --primary-green: #145a32;    /* Strong Green for Icons/Headers */
    --accent-red: #c0392b;       /* Complementary Red for Hovers/Actions */
}

[data-theme="dark"] {
    /* --- Dark Mode Palette --- */
    --bg-color: #0a1f12;         /* Very dark green-black background */
    --text-color: #d1f2eb;       /* Pale Mint Green (Text) - replaces white */
    --header-bg: #000;
    --header-text: #2ecc71;
    --nav-bg: #112619;           /* Dark Jungle Green */
    --nav-border: #1e4d35;
    
    /* Brand Colors */
    --primary-green: #2ecc71;    /* Lighter Green for Icons in Dark Mode */
    --accent-red: #e74c3c;       /* Brighter Red for Dark Mode */
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    direction: rtl;
    display: grid;
    min-height: 100vh;
    grid-template-areas:
        "header header"
        "nav    main"
        "footer footer";
    grid-template-rows: auto 1fr auto;
    grid-template-columns: 250px 1fr;
    transition: background-color 0.3s, color 0.3s;
}

/* --- Header --- */
header {
    grid-area: header;
    background-color: var(--header-bg);
    color: var(--header-text);
    padding: 0.5rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;
    border-bottom: 2px solid var(--primary-green); /* Added a green line separator */
}

.header-controls {
    display: flex;
    gap: 15px;
    align-items: center;
}

/* Updated Buttons to use Green/Red borders */
.theme-toggle, .print-btn {
    background: none;
    border: 1px solid var(--primary-green);
    color: var(--header-text);
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 4px;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.theme-toggle:hover, .print-btn:hover {
    background-color: var(--primary-green);
    color: #000;
}

/* --- Navigation --- */
nav {
    grid-area: nav;
    background-color: var(--nav-bg);
    border-left: 1px solid var(--nav-border);
    padding: 20px;
}

nav ul { list-style: none; }
nav li { margin-bottom: 10px; }

nav a {
    text-decoration: none;
    color: var(--text-color); /* Uses the Deep Green */
    font-size: 1.1rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: 5px;
    transition: all 0.2s;
}

/* Icon Color */
nav a i {
    width: 25px;
    text-align: center;
    color: var(--primary-green); /* Icons are distinct green */
}

/* Hover Effect - Using the Complementary Red */
nav a:hover {
    background-color: rgba(192, 57, 43, 0.1); /* Faint Red Background */
    color: var(--accent-red);                 /* Text turns Red */
}

nav a:hover i {
    color: var(--accent-red);                 /* Icon turns Red */
}

/* Image Icon Styling */
nav a img {
    width: 25px;        /* Standard icon size */
    height: 25px;
    object-fit: contain; /* Ensures image doesn't distort */
}

/* Note: PNG images cannot change color to "Red" on hover 
   using standard CSS 'color'. If you want a visual effect 
   on the image during hover, we can add a slight brightness filter.
*/
nav a:hover img {
    filter: brightness(0.8) sepia(1) hue-rotate(-50deg) saturate(3); /* Attempts to tint it red */
    /* Or simply: opacity: 0.7; */
}

/* --- Main Content --- */
main {
    grid-area: main;
    padding: 20px;
}

/* --- Footer --- */
footer {
    grid-area: footer;
    background-color: var(--header-bg);
    height: 40px;
    border-top: 2px solid var(--primary-green);
}

/* --- Mobile / Responsive --- */
.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    color: var(--primary-green); /* Green Menu Icon */
    font-size: 1.5rem;
    cursor: pointer;
}

@media (max-width: 768px) {
    body {
        grid-template-areas:
            "header"
            "nav"
            "main"
            "footer";
        grid-template-columns: 1fr;
        grid-template-rows: auto auto 1fr auto;
    }

    nav {
        display: none; 
        border-left: none;
        border-bottom: 1px solid var(--nav-border);
    }

    nav.open { display: block; }
    .mobile-menu-btn { display: block; }
}

@media print {
    header, nav, footer, .mobile-menu-btn { display: none !important; }
    body {
        grid-template-areas: "main";
        grid-template-columns: 1fr;
        background-color: white;
        color: black; /* Always print black ink to save color */
    }
    main { padding: 0; width: 100%; }
}