/* Global Reset/Base */
    body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        color: #333;
    }
    
    /* === Navigation Bar Styling === */
    .main-header {
        background-color: #ffffff; /* White background for the bar */
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* Subtle shadow for depth */
        padding: 15px 40px;
        display: flex;
        justify-content: space-between; /* Space out the logo/title and links */
        align-items: center;
    }

    .logo-title {
        font-size: 1.5em;
        font-weight: 700;
        color: #1a4f78; /* Deep corporate blue */
        text-decoration: none;
    }

    nav {
        display: flex;
        gap: 25px; /* Spacing between menu items */
    }

    nav a {
        text-decoration: none;
        color: #555; /* Medium-dark grey for professionalism */
        font-weight: 500;
        padding: 5px 0;
        position: relative;
        transition: color 0.3s;
    }

    nav a:hover {
        color: #007bff; /* Vibrant blue on hover */
    }

    /* Underline effect on hover */
    nav a::after {
        content: '';
        position: absolute;
        bottom: -5px;
        left: 0;
        width: 0;
        height: 2px;
        background-color: #007bff;
        transition: width 0.3s;
    }

    nav a:hover::after {
        width: 100%;
    }

    /* === Separator === */
    hr {
        display: none; /* Hide the default HR since the header is styled as a distinct block */
    }
    
    /* === Content Area Styling (Assuming body has a background, this keeps content clean) === */
    /* NOTE: You should apply this global style to your main CSS file for consistency. */
    /* This overrides the base body style from the dashboard_style.css I provided earlier,
       so ensure it's loaded AFTER the header.php styles if you place it in a separate file. */
    .dashboard-content {
        padding: 20px;
        max-width: 1200px;
        margin: 0 auto;
    }
    
    /* Basic component styling for coherence (You'll need these in your main CSS too) */
    table { border-collapse: collapse; width: 100%; margin-bottom: 20px; }
    table, th, td { border: 1px solid #eee; padding: 12px; text-align: left; }
    th { background-color: #f8f8f8; color: #444; font-weight: 600; }
    h1, h2 { margin-top: 20px; }
    form { margin-bottom: 20px; }