/* General Styles */
:root {
    --primary-blue: #007aff; /* Apple's standard blue */
    --secondary-green: #34c759; /* Apple's standard green */
    --light-orange-bg: #fff9eb; /* Slightly softer orange bg */
    --light-blue-bg: #f0f9ff; /* Slightly softer blue bg */
    --light-green-bg: #e8f7eb; /* Slightly softer green bg */
    --light-grey-bg: #f8f8f8; /* Consistent light grey */
    --dark-text: #1d1d1f; /* Apple's primary dark text */
    --medium-text: #515154; /* Apple's secondary text */
    --light-text: #86868b; /* Apple's tertiary text */
    --border-color: #d2d2d7; /* Apple's border color */
    --white: #ffffff;
    --box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05); /* Softer shadow */
    --box-shadow-hover: 0 6px 16px rgba(0, 0, 0, 0.1); /* Slightly stronger on hover */
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--white);
    color: var(--dark-text);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased; /* Smoother fonts */
    -moz-osx-font-smoothing: grayscale;
}

a {
    text-decoration: none;
    color: inherit;
}

/* Header */
header {
    background-color: #fff;
    border-bottom: 1px solid #ddd;
    padding: 10px 5%;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.logo a {
    font-size: 1.6em; /* Larger font size for logo */
    font-weight: 700; /* Bold weight */
    color: var(--dark-text); /* Use theme's dark text color */
    text-decoration: none; /* Remove underline from link */
    line-height: 1.2; /* Adjust line height for alignment */
    display: inline-block; /* Ensure proper spacing/alignment */
}

/* Remove or comment out logo img rule if it exists */
/* 
.logo img {
    height: 45px; 
    vertical-align: middle;
}
*/

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex; /* Arrange items horizontally */
    align-items: center; /* Vertically align items */
}

nav ul li {
    margin-left: 15px; /* Space between items */
    position: relative; /* Needed for dropdown positioning */
}

nav ul li:first-child {
    margin-left: 0;
}

.header-button, /* Includes links and buttons */
nav ul li button.header-button /* Style dropdown button */
{
    /* REMOVED Button-like styles */
    /* border: 1px solid #ccc; */
    /* border-radius: 5px; */
    /* background-color: #f8f8f8; */
    
    display: inline-block;
    padding: 8px 10px; /* Adjusted padding for text links */
    color: var(--medium-text, #515154); /* Standard text color */
    text-decoration: none;
    font-size: 0.95em; /* Adjusted font size if needed */
    font-weight: 500; /* Medium weight */
    transition: color 0.2s;
    cursor: pointer; 
    line-height: 1.3;
    background-color: transparent !important; /* Ensure transparent background */
    border: none !important; /* Ensure no border */
}

/* Dropdown Button Specific - Remove specific background */
button.dropdown-toggle {
     /* background-color: #f8f8f8; */ /* REMOVED */
     /* Ensure dropdown arrow is visible if needed, might need extra styling later */
}

/* Hover state for text links */
.header-button:hover,
nav ul li button.header-button:hover {
    /* REMOVED background/border hover */
    /* background-color: #eee; */
    /* border-color: #bbb; */
    color: var(--primary-blue, #007aff); /* Change text color on hover */
    text-decoration: none; /* Optional: underline? */
}

/* Special button styling - make it look like other links, maybe bold */
.header-button-special {
    /* REMOVED background/border overrides */
    /* background-color: transparent !important; */
    /* border-color: transparent !important; */ 
    color: var(--medium-text, #515154) !important; /* Match regular links */
    font-weight: 600 !important; /* Slightly bolder? */
}

.header-button-special:hover {
     /* REMOVED background hover */
     /* background-color: rgba(40, 167, 69, 0.1) !important; */
     color: var(--primary-blue, #007aff) !important; /* Match regular link hover */
}

/* Dropdown */
.dropdown {
    position: relative; /* Already on li, ensure it's here */
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #fff;
    min-width: 180px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.15);
    z-index: 1;
    border-radius: 5px;
    padding: 10px 0;
    margin-top: 5px; /* Space below button */
    border: 1px solid #ddd;
    left: 0; /* Align with button */
}

.dropdown-content a {
    color: black;
    padding: 10px 20px;
    text-decoration: none;
    display: block;
    font-size: 0.9em;
    white-space: nowrap;
}

.dropdown-content a:hover {
    background-color: #f1f1f1;
}

/* Show dropdown on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

.language-switcher {
    margin-left: 20px;
}

.language-switcher a {
    /* color: #555; */ /* Remove default dark color */
    color: white; /* Make text white */
    background-color: #dc3545; /* Add red background */
    text-decoration: none;
    /* padding: 5px; */ /* Adjust padding */
    padding: 5px 10px; /* Slightly more horizontal padding */
    font-weight: 500;
    border-radius: 4px; /* Add rounded corners */
    transition: background-color 0.2s ease, color 0.2s ease; /* Add transitions */
}

.language-switcher a:hover {
    color: white;
    background-color: #c82333; /* Darker red on hover */
    text-decoration: none; /* Ensure no underline on hover */
}

.language-switcher a.active-lang {
    /* Keep existing active styles, maybe adjust */
    color: var(--primary-green);
    font-weight: bold;
    text-decoration: underline;
    background-color: #f0f0f0; /* Example: Light background for active non-red */
}

/* Mobile Menu Toggle */
.menu-toggle {
    display: none; /* Hidden by default */
    flex-direction: column;
    cursor: pointer;
}

.menu-toggle span {
    height: 3px;
    width: 25px;
    background-color: #333;
    margin-bottom: 4px;
    border-radius: 1px;
}

.menu-toggle span:last-child {
    margin-bottom: 0;
}

/* --- Responsive Header --- */
@media (max-width: 768px) {
    nav > ul:not(#mobile-nav-links) { /* Hide desktop nav (ul directly under nav that is not #mobile-nav-links) */
        display: none;
    }

    .menu-toggle {
        display: flex; /* Show hamburger icon on mobile */
    }

    nav ul#mobile-nav-links { /* Added ID for specificity */
        display: none; /* Hide desktop nav */
        position: absolute;
        top: 60px; /* Below header */
        left: 0;
        width: 100%;
        background-color: #fff;
        flex-direction: column;
        padding: 10px 0;
        box-shadow: 0px 4px 8px rgba(0,0,0,0.1);
        border-top: 1px solid #ddd;
        z-index: 999; /* Ensure it's above page content but respects header stacking */
    }

    nav ul#mobile-nav-links.active { /* Added ID for specificity */
        display: flex; /* Show when active */
    }

    nav ul li {
        margin: 10px 20px; /* Adjust spacing for vertical layout */
        width: calc(100% - 40px);
        text-align: center;
    }

    nav ul li a,
    nav ul li button {
        display: block; /* Make links/buttons full width */
        width: 100%;
    }

    .dropdown-content {
        position: static; /* Reset position for mobile */
        box-shadow: none;
        border: none;
        padding: 5px 0 5px 20px; /* Indent dropdown items */
        background-color: #f9f9f9; /* Slightly different background */
        margin-top: 5px;
    }
     .dropdown:hover .dropdown-content { /* Keep hidden until needed */
        display: none;
    }
     .dropdown.active .dropdown-content { /* Show when dropdown is active */
        display: block;
    }

    .language-switcher {
         margin-left: 10px; /* Reduce margin */
    }
}

/* Main Content */
main {
    flex-grow: 1;
}

/* Hero Section */
.hero-section {
    text-align: center;
    padding: 100px 20px 80px 20px; /* More vertical padding */
    background-color: var(--white);
}

.hero-section h1 {
    font-size: 3.5em; /* Even larger heading */
    font-weight: 600;
    color: var(--dark-text);
    margin-bottom: 20px; /* More space below heading */
    line-height: 1.2;
}

.hero-section p {
    font-size: 1.25em; /* Larger paragraph text */
    color: var(--medium-text);
    max-width: 650px; /* Slightly wider paragraph */
    margin: 0 auto 50px auto; /* More space below paragraph */
    line-height: 1.6;
}

.main-actions {
    display: flex;
    justify-content: center;
    gap: 25px; /* More space between buttons */
    flex-wrap: wrap;
}

/* General Action Button Style */
.action-btn {
    padding: 14px 30px; /* Larger buttons */
    font-size: 1.05em; /* Slightly larger font */
    border-radius: 8px; /* Consistent rounding */
    cursor: pointer;
    text-align: center;
    font-weight: 500;
    transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
    border: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); /* Subtle shadow */
}

.action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Enhanced shadow on hover */
}

/* Specific Button Colors */
.browse-jobs-btn {
    background-color: var(--primary-blue);
    color: var(--white);
}

.browse-jobs-btn:hover {
    background-color: #0070e0;
}

.browse-seekers-btn {
    background-color: var(--secondary-green);
    color: var(--white);
}

.browse-seekers-btn:hover {
    background-color: #30b853; /* Lighter green on hover */
}

/* Features Section */
.features-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
    text-align: center;
}

.feature-card {
    background-color: #fff;
    padding: 2.5rem 1.5rem;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.feature-card .icon-placeholder {
    font-size: 3rem;
    margin-bottom: 1rem;
    line-height: 1; /* Align icons better */
}

.feature-card h3 {
    color: #0056b3; /* Match button hover color */
    margin-bottom: 0.8rem;
}

.feature-card p {
    color: #555;
    margin-bottom: 1.5rem; /* Space before button */
    flex-grow: 1; /* Push button to bottom */
}

/* Feature Button Styling */
.feature-button {
    display: inline-block;
    padding: 0.8rem 1.5rem;
    border: none;
    border-radius: 5px;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    margin-top: auto; /* Stick to bottom */
}

.feature-button:hover {
    transform: scale(1.05);
}

.button-profile {
    background-color: #28a745; /* Green */
}
.button-profile:hover {
    background-color: #218838;
}

.button-internal-job {
     background-color: #17a2b8; /* Teal/Info */
}
.button-internal-job:hover {
     background-color: #138496;
}

.button-external-job {
     background-color: #ffc107; /* Yellow/Warning */
     color: #212529; /* Dark text for yellow bg */
}
.button-external-job:hover {
     background-color: #e0a800;
}

/* Specific Icon Colors */
.feature-card.looking-job .icon-placeholder { color: #f56300; } /* Orange */
.feature-card.looking-employees .icon-placeholder { color: var(--primary-blue); }
.feature-card.add-external .icon-placeholder { color: var(--secondary-green); }

/* Specific card backgrounds */
.feature-card.looking-job {
    background-color: var(--light-orange-bg);
}
.feature-card.looking-employees {
    background-color: var(--light-blue-bg);
}
.feature-card.add-external {
    background-color: var(--light-green-bg);
}

/* CTA Section */
.cta-section {
    background-color: var(--light-grey-bg);
    padding: 80px 20px; /* More padding */
    text-align: center;
}

.cta-section h2 {
    font-size: 2em; /* Larger CTA heading */
    font-weight: 600;
    color: var(--dark-text);
    margin-bottom: 20px; /* More space */
}

.cta-section p {
    font-size: 1.15em; /* Larger CTA text */
    color: var(--medium-text);
    max-width: 650px;
    margin: 0 auto 40px auto; /* More space */
    line-height: 1.6;
}

.cta-btn {
    background-color: var(--primary-blue);
    color: var(--white);
    display: inline-block;
    padding: 14px 30px; /* Match other action buttons */
    font-size: 1.05em;
}

.cta-btn:hover {
    background-color: #0070e0;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}


/* Footer */
footer {
    background-color: var(--white);
    padding: 30px 20px; /* More padding */
    text-align: center;
    border-top: 1px solid #ebebeb; /* Lighter border */
    font-size: 0.9em;
    color: var(--light-text);
    margin-top: auto;
}

footer p {
    margin: 8px 0; /* More space between footer lines */
}


/* Authentication Popup */
.auth-popup {
    /* Keep existing styles, might need minor color/font adjustments later */
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.5); /* Black w/ opacity */
    justify-content: center;
    align-items: center;
}

.popup-content {
    background-color: #fefefe;
    margin: auto;
    padding: 30px;
    border: 1px solid #ccc;
    width: 80%;
    max-width: 400px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    position: relative;
}

.close-btn {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close-btn:hover,
.close-btn:focus {
    color: black;
    text-decoration: none;
}

.popup-content h2 {
    margin-top: 0;
    margin-bottom: 20px;
    color: var(--dark-text); /* Use theme color */
}

.popup-content p {
    margin-bottom: 25px;
    color: var(--medium-text); /* Use theme color */
}

.popup-buttons button {
    padding: 12px 20px;
    margin: 5px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1em;
    min-width: 120px;
    transition: opacity 0.2s ease; /* Smoother transition */
}

.popup-buttons .popup-login-btn {
    background-color: var(--primary-blue);
    color: white;
}

.popup-buttons .popup-signup-btn {
    background-color: var(--secondary-green);
    color: white;
}

.popup-buttons button:hover {
    opacity: 0.85; /* Slightly less opaque on hover */
}

/* --- Responsive Adjustments --- */

/* Tablet and Larger */
@media (min-width: 769px) {
  /* Add styles specific to larger screens if needed */
}

/* Tablet */
@media (max-width: 992px) {
    .features-section {
        gap: 25px;
        padding: 60px 5%; /* Adjust padding */
    }
    .feature-card {
         flex-basis: calc(50% - 15px); /* Two cards per row with gap adjustment */
         min-width: unset; /* Remove min-width */
    }
     .hero-section h1 {
        font-size: 3em;
    }
     .hero-section p {
        font-size: 1.2em;
    }
}

/* Mobile */
@media (max-width: 768px) {
      header {
        padding: 12px 5%; /* Adjust mobile padding */
        display: flex; /* Ensure flex layout */
        justify-content: space-between; /* Push logo left, icon right */
        align-items: center; /* Vertically align items */
      }
      .logo {
        flex-grow: 1; /* Allow logo to take available space if needed */
      }
     .hamburger-icon {
        display: inline-block; /* Show hamburger on mobile */
        margin-right: 0; /* Remove previous margin */
        order: 3; /* Ensure hamburger icon comes after other elements visually if needed */
     }
      .header-buttons {
        display: none; /* Hide the original header buttons container */
     }
     .mobile-menu {
        right: 5%; /* Keep menu aligned with padding */
        top: 55px; /* Adjust top position slightly if needed */
     }
     .hero-section {
         padding: 60px 20px 50px 20px; /* Adjust padding */
     }
     .hero-section h1 {
        font-size: 2.5em; /* Adjust mobile heading size */
        line-height: 1.25;
     }
      .hero-section p {
        font-size: 1.1em; /* Adjust mobile paragraph size */
        margin-bottom: 40px; /* Adjust space */
     }
     .main-actions {
        flex-direction: column;
        gap: 18px; /* Adjust gap */
        align-items: center;
     }
     .action-btn {
        width: 90%; /* Make buttons wider */
        max-width: 350px; /* Limit max width */
        padding: 15px 25px; /* Adjust padding */
     }
     .features-section {
        flex-direction: column;
        gap: 25px;
        padding: 50px 5%;
     }
     .feature-card {
        max-width: none;
        width: 100%;
        box-sizing: border-box;
        padding: 30px 25px; /* Adjust card padding */
        border-radius: 15px; /* Slightly less rounded on mobile? */
        flex-basis: auto; /* Reset basis */
     }
      .feature-card h3 {
        font-size: 1.2em;
     }
       .feature-card p {
        font-size: 0.95em;
     }
     .cta-section {
         padding: 60px 20px; /* Adjust padding */
     }
     .cta-section h2 {
        font-size: 1.8em;
     }
     .cta-section p {
        font-size: 1.05em;
     }

     .popup-content {
         width: 90%;
         padding: 20px; /* Reduce padding */
     }
     .popup-buttons button {
         padding: 10px 15px;
         font-size: 0.95em;
     }

     /* --- Content Responsiveness --- */
     .form-container,
     .filter-section,
     .item-list .list-item,
     .admin-section { /* Add admin-section here for text wrapping */
        /* Ensure text wraps within containers */
        overflow-wrap: break-word;
        word-wrap: break-word; /* Older browser fallback */
     }

    /* Form adjustments for mobile */
    .form-container {
        padding: 20px 15px; /* Reduce padding */
        width: 95%;
        box-shadow: none; /* Simplify forms on mobile */
        border: 1px solid var(--border-color);
    }
    .form-container h2 {
        font-size: 1.5em;
    }
    .form-group {
        /* Optional: Add slightly more bottom margin if elements feel cramped */
        /* margin-bottom: 18px; */
    }
    .form-group label {
        font-size: 0.9em;
    }
    .form-group input,
    .form-group textarea,
    .form-group select {
        padding: 10px 12px; /* Slightly larger touch target */
        font-size: 1em;
        width: 100%; /* Ensure inputs take full width */
        box-sizing: border-box; /* Include padding in width */
    }
    .form-button {
        padding: 12px 18px; /* Larger button */
        font-size: 1em;
    }

    /* Filter adjustments for mobile */
    .filter-section {
         box-shadow: none;
         border: 1px solid var(--border-color);
         padding: 15px;
    }
    .filter-options {
        flex-direction: column; /* Stack filters vertically */
        gap: 15px; /* Adjust gap */
        align-items: stretch; /* Make filters take full width */
    }
    .filter-group {
        width: 100%;
    }
     .filter-group select,
     .filter-group input {
         padding: 10px 12px;
         font-size: 1em;
     }
    .filter-buttons {
        margin-top: 15px;
        align-self: center; /* Center the button */
        width: 100%;
    }
    .filter-buttons button {
         width: 100%;
         margin-left: 0; /* Reset margin */
         padding: 12px 15px;
    }

    /* List item adjustments */
    .list-item {
        padding: 15px; /* Adjust padding */
        box-shadow: none;
        border: 1px solid var(--border-color);
        margin-bottom: 10px;
    }
    .list-item h4 {
        font-size: 1.15em;
    }
    .list-item p {
        font-size: 0.95em;
        line-height: 1.5;
    }

    /* Pagination adjustments */
    .pagination a, .pagination span {
        padding: 8px 12px; /* Slightly larger */
        margin: 0 3px;
        font-size: 0.95em;
     }

     /* Responsive Admin Table (Verify and ensure these apply) */
     .admin-container { /* If you have an outer container */
        width: 95%;
        padding: 15px;
        box-shadow: none;
        border: 1px solid var(--border-color);
     }
     .section-header { /* Already adjusted? Verify */
        flex-direction: column;
        align-items: flex-start;
        gap: 10px; /* Space between title and button */
     }
     .admin-table {
         border: none; /* Remove outer border for mobile stacking */
         border-radius: 0;
     }
     .admin-table thead {
         display: none; /* Hide table headers */
     }
     .admin-table, .admin-table tbody, .admin-table tr, .admin-table td {
         display: block;
         width: 100%;
     }
     .admin-table tr {
         margin-bottom: 15px;
         border: 1px solid #ddd;
         border-radius: 4px; /* Add slight rounding to rows */
         overflow: hidden; /* Contain background */
         background-color: #fff; /* Ensure rows have background */
     }
     .admin-table td {
         text-align: right; /* Align text to the right */
         padding-left: 50% !important; /* Create space for the label - !important might be needed */
         position: relative;
         border: none;
         border-bottom: 1px solid #eee;
         padding-top: 12px; /* More padding */
         padding-bottom: 12px;
         font-size: 0.95em;
         min-height: 20px; /* Ensure min height for empty cells */
         overflow-wrap: break-word; /* Ensure text wraps within cell */
         word-wrap: break-word;
     }
     .admin-table td:last-child { /* Corrected selector */
        border-bottom: none;
     }
     .admin-table td::before {
         content: attr(data-label); /* Use data-label for pseudo-header */
         position: absolute;
         left: 10px;
         width: calc(50% - 20px); /* Adjust width considering padding */
         padding-right: 10px;
         white-space: nowrap;
         text-align: left;
         font-weight: bold;
         color: var(--dark-text); /* Make label darker */
     }
     /* Action buttons within the table cell */
     .admin-table td:last-child {
          /* Override the text-align for the action button cell if needed */
          text-align: left; 
          padding-left: 10px !important; /* Remove the large left padding */
     }
      .admin-table td:last-child::before {
         display: none; /* Hide the pseudo-label for action cell */
     }
     .admin-table .btn-edit,
     .admin-table .btn-delete {
        padding: 6px 12px; /* Adjust button size */
        font-size: 0.9em;
        display: inline-block; /* Ensure buttons flow */
        margin: 3px; /* Add some margin */
     }

     /* Admin Form adjustments within mobile query */
     .admin-section form {
         /* Styles for forms specifically within admin sections */
     }
     .admin-section .form-group {
         /* Ensure full width or proper stacking */
         /* Example: display: flex; flex-direction: column; */
     }
     .admin-section .form-group input,
     .admin-section .form-group textarea,
     .admin-section .form-group select {
         width: 100%;
         box-sizing: border-box;
     }
     .admin-section .form-buttons {
        flex-direction: column; /* Stack buttons vertically */
        gap: 10px;
     }
      .admin-section .form-button {
         width: 100%; /* Make buttons full width */
     }

     #user-form-section { /* Or specific form sections */
        padding: 20px;
     }
}


/* --- Existing Form, Filter, List, Pagination, Admin Styles --- */
/* (Keep the base styles for these elements, mobile overrides are above) */

/* Form Styles */
.form-container {
    background-color: #ffffff;
    padding: 30px 40px;
    border-radius: 8px;
    box-shadow: var(--box-shadow);
    margin: 30px auto;
    max-width: 600px; /* Adjust as needed */
    width: 90%;
}

.form-container h2 {
    text-align: center;
    margin-bottom: 25px;
    color: var(--dark-text);
    font-weight: 600;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500; /* Slightly lighter labels */
    color: var(--medium-text);
    font-size: 0.95em;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="tel"],
.form-group input[type="url"],
.form-group input[type="file"],
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px; /* Slightly more rounded */
    font-size: 1em;
    box-sizing: border-box;
    color: var(--dark-text);
    background-color: var(--white);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-group textarea {
    resize: vertical;
    min-height: 100px; /* Slightly taller */
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.15); /* Adjusted focus shadow */
}

.form-button {
    display: block;
    width: 100%;
    padding: 12px 20px;
    background-color: var(--primary-blue);
    color: white;
    border: none;
    border-radius: 8px; /* Match action buttons */
    font-size: 1.05em; /* Match action buttons */
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease;
    margin-top: 10px;
}

.form-button:hover {
    background-color: #0070e0;
}

/* Filter & List Styles */
.filter-section {
    background-color: var(--white);
    padding: 25px; /* More padding */
    border-radius: 8px;
    margin-bottom: 25px; /* More space */
    box-shadow: var(--box-shadow);
}

.filter-section h3 {
    margin-top: 0;
    margin-bottom: 20px; /* More space */
    font-weight: 600;
    color: var(--dark-text);
}

.filter-options {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Increased gap */
    align-items: flex-end;
}

.filter-group {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Allow groups to grow */
}

.filter-group label {
     margin-bottom: 6px;
     font-size: 0.9em;
     color: var(--medium-text);
}

.filter-group select,
.filter-group input {
    padding: 9px 10px; /* Adjust padding */
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.95em;
}

.filter-buttons {
     margin-left: 10px; /* Keep some space */
}
.filter-buttons button {
    padding: 9px 18px; /* Match header buttons */
    background-color: var(--primary-blue);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.95em;
    transition: background-color 0.2s ease;
}
.filter-buttons button:hover {
     background-color: #0070e0;
}


.item-list .list-item {
    background-color: var(--white);
    padding: 20px 25px; /* More padding */
    border: 1px solid var(--border-color);
    border-radius: 8px; /* Match other elements */
    margin-bottom: 18px; /* More space */
    box-shadow: var(--box-shadow);
    transition: box-shadow 0.2s ease;
}
.item-list .list-item:hover {
    box-shadow: var(--box-shadow-hover);
}

.item-list .list-item h4 {
    margin-top: 0;
    margin-bottom: 10px; /* More space */
    color: var(--primary-blue);
    font-weight: 600;
    font-size: 1.2em;
}

.item-list .list-item p {
    margin: 6px 0; /* Adjust spacing */
    color: var(--medium-text);
    font-size: 1em;
    line-height: 1.6;
}
.item-list .list-item p strong {
    color: var(--dark-text);
    font-weight: 500;
}
.item-list .list-item p em { /* Contact info */
     color: var(--light-text);
     font-style: normal;
     font-size: 0.95em;
}
.item-list .list-item a { /* View Resume/Original Posting links */
    color: var(--primary-blue);
    font-weight: 500;
    font-size: 0.95em;
    text-decoration: none;
    transition: color 0.2s ease;
}
.item-list .list-item a:hover {
    color: #005ea6;
    text-decoration: underline;
}


.pagination {
    text-align: center;
    margin-top: 40px; /* More space */
}

.pagination a, .pagination span {
    display: inline-block;
    padding: 9px 14px; /* Adjust padding */
    margin: 0 4px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--primary-blue);
    text-decoration: none;
    font-size: 0.95em;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.pagination a:hover {
    background-color: #eaf6ff; /* Light blue hover */
    border-color: #a8d8ff; /* Lighter blue border */
}

.pagination .current {
    background-color: var(--primary-blue);
    color: white;
    border-color: var(--primary-blue);
    font-weight: 500;
}


/* Admin Panel Styles */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px; /* More space */
    padding-bottom: 15px; /* Add padding */
    border-bottom: 1px solid #ebebeb; /* Match header border */
}

.section-header h2 {
    margin-bottom: 0;
    border-bottom: none;
    font-size: 1.4em; /* Adjust size */
    font-weight: 600;
    color: var(--dark-text);
}

.btn-add {
    padding: 8px 15px;
    background-color: var(--secondary-green); /* Match green button */
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9em;
    transition: background-color 0.2s;
    font-weight: 500;
}

.btn-add:hover {
    background-color: #30b853;
}

.admin-container {
    width: 90%;
    max-width: 1200px;
    margin: 40px auto; /* More margin */
    padding: 30px; /* More padding */
    background-color: var(--white);
    border-radius: 10px; /* More rounding */
    box-shadow: var(--box-shadow);
}

.admin-container h1 {
    text-align: center;
    margin-bottom: 40px; /* More space */
    color: var(--dark-text);
    font-size: 1.8em; /* Adjust size */
    font-weight: 600;
}

.admin-section {
    margin-bottom: 50px; /* More space between sections */
}

.admin-section h2 {
     /* Style moved to .section-header */
     /* border-bottom: 2px solid #eee; */
     /* padding-bottom: 10px; */
     /* margin-bottom: 20px; */
     /* color: #444; */
}

.admin-table {
    width: 100%;
    border-collapse: separate; /* Use separate for border-radius */
    border-spacing: 0;
    margin-top: 0; /* Remove top margin */
    border: 1px solid var(--border-color);
    border-radius: 8px; /* Round table corners */
    overflow: hidden; /* Keep rounded corners */
}

.admin-table th, .admin-table td {
    border: none; /* Remove individual borders */
    border-bottom: 1px solid var(--border-color); /* Use bottom borders */
    padding: 12px 15px; /* Adjust padding */
    text-align: left;
    font-size: 0.95em; /* Adjust font size */
    vertical-align: middle; /* Align vertically */
}
.admin-table tr:last-child td {
    border-bottom: none; /* Remove border from last row */
}

.admin-table th {
    background-color: #f8f8f8; /* Lighter header */
    font-weight: 500; /* Adjust weight */
    color: var(--medium-text);
    font-size: 0.9em; /* Smaller header text */
    text-transform: uppercase; /* Uppercase headers */
    letter-spacing: 0.5px;
}

.admin-table tbody tr {
     transition: background-color 0.15s ease;
}
.admin-table tbody tr:nth-child(even) {
    background-color: transparent; /* Remove zebra striping */
}

.admin-table tbody tr:hover {
    background-color: #f0f9ff; /* Light blue hover */
}

.admin-table td a {
    color: var(--primary-blue);
    text-decoration: none; /* Remove underline */
    font-weight: 500;
}
.admin-table td a:hover {
    text-decoration: underline;
}

.admin-table .btn-edit,
.admin-table .btn-delete {
    padding: 6px 12px; /* Adjust size */
    margin-right: 6px;
    border: none;
    border-radius: 6px; /* Adjust rounding */
    cursor: pointer;
    font-size: 0.9em;
    font-weight: 500;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.admin-table .btn-edit {
    background-color: #ffca2c; /* Lighter Yellow */
    color: var(--dark-text);
}

.admin-table .btn-delete {
    background-color: #ff453a; /* Lighter Red */
    color: white;
}

.admin-table .btn-edit:hover {
    background-color: #ffbb00;
}

.admin-table .btn-delete:hover {
    background-color: #ff2d21;
}

/* Hidden Form Styles */
#user-form-section {
     background-color: #f8f8f8; /* Match header bg */
     padding: 30px; /* More padding */
     border: 1px solid var(--border-color);
     border-radius: 8px;
     margin-top: 30px; /* More space above the form */
}

#user-form-section h2 {
    margin-top: 0;
    margin-bottom: 25px; /* More space */
    text-align: center;
    border-bottom: none;
    font-size: 1.3em; /* Adjust size */
    font-weight: 600;
}

/* Style the cancel button differently */
.form-buttons {
    display: flex;
    gap: 15px; /* More space between buttons */
    margin-top: 10px; /* Add margin above */
}

.form-button.cancel-button {
    background-color: var(--light-text); /* Use light text color */
    color: var(--white);
}

.form-button.cancel-button:hover {
    background-color: var(--medium-text); /* Darken on hover */
}

/* Mobile Menu Container - Hidden by default */
.mobile-menu {
    display: none; /* Hidden by default on all screen sizes */
    position: absolute;
    top: 60px; /* Adjust based on header height */
    right: 5%; /* Align with header padding */
    background-color: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: var(--box-shadow);
    z-index: 100; /* Ensure it's above other content */
    width: 200px; /* Adjust width as needed */
    padding: 0; /* Remove padding to allow links full width */
}

/* Styling for links inside the mobile menu */
.mobile-menu a {
    display: block;
    padding: 10px 20px; /* Padding inside links */
    color: var(--dark-text);
    text-decoration: none;
    font-size: 0.95em;
    border-bottom: 1px solid #f0f0f0; /* Separator */
}
.mobile-menu a:last-child {
    border-bottom: none; /* Remove border from last item */
}

.mobile-menu a:hover {
    background-color: #f8f8f8; /* Subtle hover */
}

/* Class to show the mobile menu when toggled by JS */
.mobile-menu.visible {
    display: block;
}

/* Wrapper for right-side controls on desktop */
.header-right-controls {
    display: flex;
    align-items: center;
}

/* Language switcher styles */
.language-switcher {
    margin-right: 20px; /* Space between switcher and buttons */
}

.language-switcher a {
    color: white; /* White text */
    background-color: #dc3545; /* Red background */
    text-decoration: none;
    font-weight: 500;
    padding: 5px 10px; /* Adjusted padding */
    border-radius: 4px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.language-switcher a:hover {
    color: white;
    background-color: #c82333; /* Darker red on hover */
}

/* Style for the mobile language switcher container */
.language-switcher-mobile {
    display: flex; 
    justify-content: center; 
    background-color: #f8f8f8; 
    padding: 8px 0; 
    border-bottom: 1px solid var(--border-color);
}

.language-switcher-mobile a {
    padding: 5px 15px; 
    color: white; /* White text */
    background-color: #dc3545; /* Red background */
    text-decoration: none;
    font-weight: 500;
    border-bottom: none; 
    margin: 0 5px; 
    border-radius: 4px;
    transition: background-color 0.2s ease, color 0.2s ease; /* Added transition */
}

.language-switcher-mobile a:hover {
    background-color: #c82333; /* Darker red on hover */
    color: white;
}

/* Other mobile menu link styles */
.mobile-menu a {
    /* ... existing styles ... */
    border-bottom: 1px solid #f0f0f0; /* Keep separator for main links */
}
.mobile-menu a:last-child {
    border-bottom: none; 
}
.mobile-menu > a:hover { /* Target direct children to avoid affecting lang switcher links */
    background-color: #f8f8f8; 
}

/* ... existing mobile styles ... */
@media (max-width: 768px) {
    header {
        /* ... */
    }
    .logo {
       /* ... */
    }
    .hamburger-icon {
       /* ... */
    }
    .header-right-controls {
        /* Hide the desktop wrapper on mobile */
        display: none; 
    }
    .header-buttons {
        /* Already hidden, keep hidden */
        display: none; 
     }
     .mobile-menu {
       /* ... */
     }
     /* ... */
} 

/* --- Profile Page Specific Styles --- */
.profile-container {
    max-width: 900px; /* Limit width */
    margin: 40px auto; /* Center horizontally with top/bottom margin */
    padding: 0 20px; /* Add side padding */
}

.profile-container h1 {
    text-align: center;
    margin-bottom: 30px;
    color: var(--dark-text);
    font-weight: 600;
}

.profile-info,
.job-seeker-profile {
    background-color: var(--white, #fff);
    padding: 25px 30px; /* More padding */
    border-radius: 8px;
    box-shadow: var(--box-shadow);
    margin-bottom: 30px;
    border: 1px solid var(--border-color, #eee); /* Subtle border */
}

.profile-info h2,
.job-seeker-profile h2 {
    margin-top: 0;
    margin-bottom: 20px;
    color: var(--primary-blue, #007bff);
    font-weight: 600;
    border-bottom: 1px solid var(--border-color, #eee);
    padding-bottom: 10px;
}

.profile-info p,
.job-seeker-profile p {
    margin: 10px 0;
    color: var(--medium-text);
    line-height: 1.6;
}

.profile-info p strong,
.job-seeker-profile p strong {
    color: var(--dark-text);
    font-weight: 500; /* Slightly less bold */
    margin-right: 8px;
    display: inline-block;
    min-width: 100px; /* Align labels a bit */
}

/* Profile Action Buttons (Edit Profile, Change Password, etc.) */
.profile-action-button {
    display: inline-block;
    padding: 9px 18px;
    margin-top: 20px; /* Space above buttons */
    margin-right: 10px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.95em;
    font-weight: 500;
    text-decoration: none; /* For <a> tags styled as buttons */
    transition: background-color 0.2s ease, transform 0.1s ease;
}

/* Specific button colors */
.profile-info .profile-action-button,
.job-seeker-profile a.profile-action-button[href*="add_profile.php"] /* Target 'Create/Edit Job Seeker' button */
{
    background-color: var(--primary-blue);
    color: white;
}
.profile-info .profile-action-button:hover,
.job-seeker-profile a.profile-action-button[href*="add_profile.php"]:hover {
    background-color: var(--primary-blue-darker, #0056b3);
    transform: translateY(-1px);
}

.profile-info button.profile-action-button[onclick*="changePasswordModal"] /* Target Change Password button */
{
    background-color: var(--light-text, #aaa);
    color: white;
}
.profile-info button.profile-action-button[onclick*="changePasswordModal"]:hover {
    background-color: var(--medium-text, #777);
    transform: translateY(-1px);
}


/* --- Modal Styling Improvements --- */
/* Use existing .auth-popup styles as a base if desired, or define new ones */
.modal {
    display: none; /* Keep hidden by default */
    position: fixed;
    z-index: 1001; /* Ensure modals are above header */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto; /* Allow scrolling within modal backdrop */
    background-color: rgba(0,0,0,0.55); /* Slightly darker backdrop */
    display: flex; /* Use flex to center content */
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    padding: 20px; /* Padding for smaller screens */
    box-sizing: border-box;
}

/* Class added by JS to show modal */
.modal.visible {
    display: flex;
    opacity: 1;
}

.modal-content {
    background-color: var(--white, #fefefe);
    margin: 0; /* Remove auto margin */
    padding: 30px; /* More padding */
    border: none; /* Remove old border */
    border-radius: 8px; /* Rounded corners */
    box-shadow: var(--box-shadow-hover); /* Use stronger shadow */
    width: 100%; /* Responsive width */
    max-width: 550px; /* Limit max width */
    position: relative;
    transform: translateY(-20px); /* Start slightly up */
    transition: transform 0.3s ease;
}

.modal.visible .modal-content {
    transform: translateY(0);
}

.modal-content .close-button {
    position: absolute;
    top: 10px;
    right: 15px;
    color: var(--light-text, #aaa);
    font-size: 30px;
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s ease;
}

.modal-content .close-button:hover {
    color: var(--dark-text, #333);
}

/* Apply consistent form styling inside modals */
.modal .form-container h2 {
    text-align: center;
    margin-top: 0;
    margin-bottom: 25px;
    font-weight: 600;
    color: var(--dark-text, #333);
    border-bottom: 1px solid var(--border-color, #eee);
    padding-bottom: 10px;
}

.modal .form-group {
    margin-bottom: 18px;
}

.modal .form-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    color: var(--medium-text, #555);
    font-size: 0.9em;
}

.modal .form-group input[type="text"],
.modal .form-group input[type="email"],
.modal .form-group input[type="password"],
.modal .form-group input[type="tel"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-color, #ccc);
    border-radius: 5px;
    font-size: 0.95em;
    box-sizing: border-box;
    color: var(--dark-text, #333);
    background-color: var(--white, #fff);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.modal .form-group input:focus {
    outline: none;
    border-color: var(--primary-blue, #007bff);
    box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.15);
}

/* Modal Form Buttons */
.modal .form-button {
    /* display: block; */ /* Let flex handle it */
    flex-grow: 1;
    /* width: 100%; */ /* No longer needed with flex */
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    font-size: 0.95em;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease, opacity 0.2s ease;
    margin-top: 10px; /* Add margin between buttons if stacked */
    text-align: center;
}

/* Modal Save button */
.modal .form-button[type="submit"] {
    background-color: var(--primary-blue, #007bff);
    color: white;
}
.modal .form-button[type="submit"]:hover {
    background-color: var(--primary-blue-darker, #0056b3);
}

/* Modal Cancel button */
.modal .form-button.cancel-button {
    background-color: var(--light-text, #aaa);
    color: white;
}
.modal .form-button.cancel-button:hover {
    background-color: var(--medium-text, #777);
}

/* Ensure buttons are side-by-side in modal */
.modal form {
   /* If buttons aren't already wrapped, add a wrapper */
   /* For example: <div class="form-buttons">...</div> */
}
.modal .form-buttons {
   display: flex;
   gap: 12px;
   margin-top: 20px;
   padding-top: 15px;
   border-top: 1px solid var(--border-color, #eee);
}

/* Modal error/success messages */
.modal .modal-errors,
.modal .modal-success {
    padding: 12px 15px;
    margin-bottom: 20px;
    border-radius: 5px;
    font-size: 0.9em;
    border: 1px solid;
}
.modal .modal-errors {
    background-color: #f8d7da;
    color: #721c24;
    border-color: #f5c6cb;
}
.modal .modal-success {
    background-color: #d4edda;
    color: #155724;
    border-color: #c3e6cb;
}


/* ==========================================
   Footer Styles
   ========================================== */

.site-footer {
    background-color: #f8f9fa; /* Açık gri arka plan */
    color: #6c757d; /* Gri metin rengi */
    padding: 20px 0;
    text-align: center;
    font-size: 0.9em;
    margin-top: 40px; /* Üstündeki içerikle arasına boşluk */
    border-top: 1px solid #e7e7e7; /* Üst kenarlık */
}

.site-footer p {
    margin: 5px 0;
}

/* Mevcut stil dosyasının sonuna eklendi */
/* ... existing code ... */