/* ==========================================================================
   START OF MERGED CSS (Combining all provided files)
   ========================================================================== */

/* --- Base & Body Styles (Consolidated & Prioritized) --- */
body {
    /* Prioritizing admin/staff view default over login centering */
    margin: 0;
    font-family: Arial, sans-serif; /* Default font */
    background: #f5f5f5; /* Default background */
    color: #333;
    font-size: 16px; /* Base size from khmer.css */
    padding: 0; /* Reset padding from style.css */
    /* Login page specific body styles (like display:flex) should be handled by a container or page-specific class */
    box-sizing: border-box; /* Added from staff.css for consistency */
}

/* --- Login Page Styles (Merged from Admin1.css, index.css, style.css - Prioritized Admin1.css) --- */
/* Body styles specific to login layout - apply to a wrapper div or use a specific body class */
.login-page-body { /* Example: Use this class on body for login pages */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f4f4f4; /* From Admin1/index */
    padding: 15px; /* Add padding if needed for mobile */
}

.login-container {
    max-width: 400px;
    width: 90%; /* Responsive width from index/Admin1 */
    margin: 20px auto; /* Adjusted margin, centered */
    padding: 30px; /* Increased padding from Admin1/index */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Softer shadow from Admin1/index */
    border-radius: 8px; /* From Admin1/index/style */
    background: #fff; /* From Admin1/index/style */
    text-align: center; /* Center container content */
}

.login-container .logo {
    width: 80px;
    height: 80px;
    display: block;
    margin: 0 auto 15px; /* Adjusted margin from Admin1/index */
    border-radius: 50%;
    overflow: hidden;
    background: #f0f0f0; /* Keep background as fallback */
    /* border: 1px solid #ccc; */ /* From staff.css - optionally add if needed */
}

.login-container .logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.login-container h1 {
    color: #333; /* From Admin1/index */
    /* color: #2c3e50; */ /* From style.css - overridden */
    margin-top: 0;
    margin-bottom: 10px; /* Reduced margin from Admin1/index */
    font-size: 1.8em; /* Adjusted size from Admin1/index */
    text-align: center;
}

.login-container #loginType { /* Added ID to the paragraph from Admin1/index */
    color: #555;
    margin-bottom: 25px; /* Adjusted margin from Admin1/index */
    font-size: 1.1em;
    text-align: center;
}

.login-container .form-group {
    margin-bottom: 20px; /* Increased spacing from Admin1/index/style */
    text-align: left; /* Align labels/inputs left */
}

.login-container label {
    display: block;
    margin-bottom: 8px; /* Increased spacing from Admin1/index */
    /* margin-bottom: 5px; */ /* From style.css - overridden */
    color: #666;
    font-weight: bold; /* Bolder labels from Admin1/index */
    /* font-weight: 600; */ /* From style.css - overridden */
}

/* Styles for inputs within login container */
.login-container input[type="email"],
.login-container input[type="password"],
.login-container input[type="text"] {
    width: 100%;
    padding: 12px; /* Increased padding from Admin1/index */
    /* padding: 10px; */ /* From style.css - overridden */
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box; /* Important for width: 100% */
    font-size: 1em; /* Consistent font size from Admin1/index */
    /* font-size: 16px; */ /* From style.css - overridden */
}

/* Password wrapper and toggle specific to login */
.login-container .password-wrapper {
    position: relative;
}

/* Adjust padding for password input to make space for icon */
.login-container input[type="password"],
.login-container .password-wrapper input[type="text"] { /* Target text input only when it was password */
    padding-right: 40px; /* Space for the icon */
}

/* Password toggle icon style */
.login-container .toggle-password-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #888;
    user-select: none; /* Prevent text selection */
    font-size: 1.2em; /* Slightly larger icon from Admin1/index */
    line-height: 1; /* Ensure alignment */
}

.login-container .toggle-password-icon:hover {
    color: #333;
}

.login-container input:focus { /* Add focus style from Admin1/index */
    border-color: #ff8c00; /* Orange focus from Admin1/index */
    outline: none;
    box-shadow: 0 0 0 2px rgba(255, 100, 0, 0.2);
}

/* Login button */
.login-container button[type="submit"] {
    width: 100%;
    padding: 12px;
    background: #ff6200; /* Orange from Admin1/index */
    /* background-color: #3498db; */ /* Blue from style.css - overridden */
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1.1em; /* From Admin1/index */
    /* font-size: 16px; */ /* From style.css - overridden */
    font-weight: bold;
    transition: background-color 0.3s ease, opacity 0.3s ease; /* Added transition from Admin1/index */
    position: relative; /* For potential effects */
    overflow: hidden; /* For potential effects */
}

.login-container button[type="submit"]:hover {
    background: #e55a00; /* Darker orange from Admin1/index */
    /* background-color: #2980b9; */ /* Darker blue from style.css - overridden */
}

/* Style for when the login button is processing */
.login-container button[type="submit"].logging-in {
    background: #e55a00; /* Darker orange from Admin1/index */
    cursor: wait;
    opacity: 0.8;
}

/* Style for when the login button is disabled */
.login-container button[type="submit"]:disabled {
    background-color: #ffb98a; /* Lighter orange from Admin1/index */
    cursor: not-allowed;
    opacity: 0.7;
}

.login-container .error-message {
    color: red; /* From Admin1/index */
    /* color: #e74c3c; */ /* From style.css - overridden */
    text-align: center;
    margin-top: 15px;
    min-height: 1em; /* Ensure space is reserved */
    font-size: 0.9em; /* From Admin1/index */
}

/* Links below login form */
.login-container .admin-link,
.login-container .staff-link { /* Keep both selectors from index/Admin1/style */
    text-align: center;
    margin-top: 20px;
    font-size: 14px; /* from style.css */
}

.login-container .admin-link a,
.login-container .staff-link a {
    color: #ff6200; /* Orange from Admin1/index */
    /* color: #3498db; */ /* Blue from style.css - overridden */
    text-decoration: none;
    font-weight: bold;
}

.login-container .admin-link a:hover,
.login-container .staff-link a:hover {
    text-decoration: underline;
}

.login-container .forgot-password {
    text-align: center;
    margin-top: 10px;
    margin-bottom: 15px;
}

.login-container .forgot-password a {
    color: #ff6200; /* Orange from Admin1/index */
    text-decoration: none;
    font-size: 0.9em;
}

.login-container .forgot-password a:hover {
    text-decoration: underline;
}

/* --- Admin Dashboard Styles (Merged from admin.css, admin-dashboard.css - Prioritized admin-dashboard.css) --- */
.admin-container {
    /* max-width: 1200px; */ /* From admin.css - overridden by flex layout */
    /* margin: 0 auto; */ /* From admin.css - overridden by flex layout */
    /* padding: 20px; */ /* From admin.css - overridden by structure below */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: #f5f5f5; /* From admin-dashboard */
}

.admin-header {
    background: #fff; /* From admin-dashboard */
    padding: 10px 20px; /* Combined from admin-dashboard & khmer */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* From admin-dashboard */
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Allow wrapping */
    gap: 10px; /* Gap between items if they wrap */
    /* border-bottom: 1px solid #ddd; */ /* From admin.css - overridden by shadow */
    /* margin-bottom: 30px; */ /* From admin.css - overridden by layout */
}

/* Header content alignment refined by khmer.css */
.admin-header .header-content {
     display: flex;
     align-items: center;
     text-align: center; /* Center text within this block */
     flex-grow: 1; /* Allow content to take space */
     gap: 15px; /* Space between logo and text */
     flex-direction: row; /* Default layout */
}
.admin-header .header-content div:first-child { /* Logo wrapper */
     flex-shrink: 0;
}
.admin-header .header-content div:nth-child(2) { /* Text wrapper */
     flex-grow: 1;
     text-align: left; /* Align text left */
}

.admin-header .logo { /* Specific logo style for header */
    width: 80px; /* From admin-dashboard */
    height: 80px;
    display: block;
    background: #f0f0f0; /* Fallback */
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0; /* Prevent shrinking */
}

.admin-header .logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.admin-header h1 {
    margin: 5px 0 0 0; /* From admin-dashboard */
    color: #333;
    font-size: 1.5rem; /* From admin-dashboard */
}

.admin-header p {
    margin: 0 0 10px 0; /* From admin-dashboard */
    color: #555;
    font-size: 0.9rem; /* From admin-dashboard */
}

/* Language switcher and Logout Button need to align correctly */
.admin-header .language-switcher { /* From khmer.css */
    margin-left: auto; /* Pushes it right */
    padding-right: 20px;
    display: flex;
    align-items: center;
}
.admin-header #adminLogoutBtn { /* Style admin logout button */
   margin-left: 15px; /* Space from language switcher */
   flex-shrink: 0; /* Prevent shrinking */
}

.admin-content {
    display: flex;
    flex: 1; /* Takes remaining height */
}

.admin-sidebar {
    width: 250px; /* Default width from admin/admin-dashboard */
    background: #fff; /* From admin-dashboard */
    padding: 20px; /* From admin-dashboard */
    /* padding-right: 20px; */ /* From admin.css - overridden */
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1); /* From admin-dashboard */
    flex-shrink: 0; /* Prevent shrinking */
    transition: width 0.3s ease; /* From admin-dashboard */
}

.sidebar-btn {
    display: block;
    width: 100%;
    padding: 12px 15px; /* From admin-dashboard */
    margin-bottom: 10px;
    /* background: #ecf0f1; */ /* From admin.css - overridden */
    background: #f5f5f5; /* From admin-dashboard */
    border: none;
    border-radius: 4px;
    text-align: left;
    cursor: pointer;
    color: #333; /* From admin-dashboard */
    font-size: 0.95rem; /* From admin-dashboard */
    transition: background-color 0.2s ease, color 0.2s ease; /* From admin-dashboard */
    white-space: nowrap; /* Prevent text wrap */
    overflow: hidden; /* Hide overflow */
    text-overflow: ellipsis; /* Show ... for overflow */
}

.sidebar-btn:hover:not(.active) {
    background-color: #e0e0e0; /* From admin-dashboard */
    /* background-color: #bdc3c7; */ /* From admin.css - overridden */
    color: #333;
}

.sidebar-btn.active {
    background-color: #ff6200; /* Orange active from admin-dashboard */
    /* background-color: #3498db; */ /* Blue active from admin.css - overridden */
    color: white;
}
.sidebar-btn.active:hover {
    background: #e55a00; /* Darker orange from admin-dashboard */
    color: white;
}

.admin-main {
    flex: 1; /* Takes remaining width */
    padding: 20px; /* From admin-dashboard */
    /* padding: 0 20px; */ /* From admin.css - overridden */
    overflow-x: hidden; /* Prevent horizontal scroll on main area */
}

.admin-section {
    background: #fff; /* From admin/admin-dashboard */
    padding: 20px; /* From admin/admin-dashboard */
    border-radius: 8px; /* From admin/admin-dashboard */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Refined shadow from admin-dashboard */
    /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); */ /* From admin.css - overridden */
    margin-bottom: 20px; /* From admin/admin-dashboard */
}
.admin-section:last-child {
    margin-bottom: 0; /* From admin-dashboard */
}

/* Staff Form (within Admin) */
.staff-form {
    margin-bottom: 30px; /* From admin.css */
    padding: 20px; /* From admin.css / admin-dashboard */
    /* background: #f8f9fa; */ /* From admin.css - overridden */
    background-color: #fafafa; /* From admin-dashboard */
    border-radius: 5px; /* Refined from admin-dashboard */
    /* border-radius: 4px; */ /* From admin.css - overridden */
    border: 1px solid #eee; /* Added from admin-dashboard */
    margin-top: 20px; /* Added from admin-dashboard */
}

.staff-list { /* From admin-dashboard */
    margin-top: 30px;
}

/* Filters & Export Options (Admin) */
.filters,
.export-options {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 20px;
    /* Styles from admin-dashboard */
    align-items: flex-end; /* Align items vertically */
    background-color: #fdfdfd; /* Light background */
    padding: 15px;
    border-radius: 5px;
    border: 1px solid #eee;
}

.filters .form-group,
.export-options .form-group {
    flex: 1 1 180px; /* Allow flexible growth/shrink with base size */
    /* min-width: 200px; */ /* From admin.css - overridden by flex-basis */
    margin-bottom: 0; /* Override default form-group margin */
}

.filters button,
.export-options button { /* From admin-dashboard */
    flex-shrink: 0; /* Prevent button shrinking */
    height: 40px; /* Match input height */
    align-self: flex-end; /* Align with bottom of inputs */
    margin-top: 10px; /* Add space if wraps */
}

/* --- Staff Check-in Page Styles (From staff.css, some overrides from style.css) --- */
/* Body padding is handled globally or via .staff-page-body */

.checkin-container {
    width: 100%;
    max-width: 600px; /* Default max width */
    /* max-width: 800px; */ /* From style.css - overridden by staff.css */
    margin: 30px auto; /* Default margin */
    /* margin: 20px auto; */ /* From style.css - overridden */
    padding: 20px; /* Default padding */
    /* padding: 30px; */ /* From style.css - overridden */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    background: #fff;
    box-sizing: border-box;
}

.checkin-container .logo { /* Logo specific to checkin page */
    width: 80px;
    height: 80px;
    display: block;
    margin: 0 auto 15px;
    background: #f0f0f0; /* Fallback */
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid #ccc; /* Added border */
}

.checkin-container .logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Profile Upload (Staff) */
#profileUploadContainer {
    text-align: center;
    margin-bottom: 15px;
}

#profileUploadContainer label {
    cursor: pointer;
    color: #ff6200; /* Orange from staff.css */
    /* color: #007bff; */ /* Blue from staff.css (older version?) - overridden */
    text-decoration: underline;
    font-size: 0.9em;
    display: inline-block; /* Ensure clickable area */
    margin-bottom: 5px;
}
#profileUploadContainer label:hover {
     /* color: #0056b3; */ /* Hover for blue - remove if orange is final */
     color: #e55a00; /* Hover for orange */
 }

#profileUploadInput {
    display: none; /* Hide actual input */
}
#uploadStatus { /* Status message for upload */
    display: block;
    margin-top: 5px;
    font-size: 0.9em;
}

.checkin-container h1 {
    text-align: center;
    color: #333;
    margin-top: 0;
    margin-bottom: 15px;
    font-family: Arial, sans-serif; /* Explicit font */
    font-size: 1.8rem;
}

.checkin-container h2 {
    text-align: center;
    color: #444;
    margin-top: 30px;
    margin-bottom: 15px;
    font-size: 1.3rem;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.checkin-container .login-links { /* Links like 'Admin Login' on staff page */
    text-align: center;
    margin-bottom: 20px;
    color: #555;
    font-size: 0.9rem;
}

.checkin-container .login-links a {
    color: #ff6200; /* Orange links */
    text-decoration: none;
    margin: 0 10px;
}

.checkin-container .login-links a:hover {
    text-decoration: underline;
}

.checkin-container .user-info {
    text-align: center;
    margin-bottom: 20px;
    color: #333;
    line-height: 1.5;
    /* Styles from style.css merged */
    padding: 15px;
    background: #f8f9fa;
    border-radius: 4px;
}

#userName {
    font-weight: bold;
    font-size: 1.1rem;
}

#currentTime {
    font-size: 1rem;
    color: #666;
}

/* Status Container (Staff) */
.status-container {
    text-align: center;
    margin: 20px 0; /* Consistent margin */
    /* margin: 30px 0; */ /* From style.css - overridden */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* Status Options / Buttons from style.css - maybe redundant? Included for now */
.status-options {
    margin-top: 20px;
    text-align: center; /* Ensure buttons center if inline */
}

.status-btn { /* General status button from style.css */
    margin: 0 10px;
    padding: 10px 20px;
    /* Add other button base styles if needed */
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
.status-btn.fast { background-color: #2ecc71; }
.status-btn.late { background-color: #f39c12; }
.status-btn.absent { background-color: #e74c3c; }

/* Check-in/Out Buttons (Staff) - specific styles */
#checkInBtn,
#checkOutBtn {
    /* background: #007bff; */ /* Blue from older staff.css - overridden */
    background: #ff6200; /* Using primary orange color */
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    margin: 10px 5px;
    cursor: pointer;
    min-width: 180px; /* Give buttons a minimum width */
    transition: background-color 0.2s ease;
    /* Stacking handled by .btn-primary/.btn-secondary general rules if applied */
}
 #checkInBtn:hover:not(:disabled),
 #checkOutBtn:hover:not(:disabled) {
     /* background-color: #0056b3; */ /* Darker blue */
     background-color: #e55a00; /* Darker orange */
}

#checkInBtn:disabled,
#checkOutBtn:disabled {
    background: #6c757d !important; /* Grey out disabled buttons - use important if needed */
    cursor: not-allowed;
    opacity: 0.6;
    color: #fff !important;
}


/* --- General Element Styles (Buttons, Forms, Tables - Prioritized admin-dashboard.css) --- */

/* General Buttons */
.btn-primary, .btn-secondary, .btn-logout, .btn-sm, button { /* Added base button tag from style.css */
    padding: 10px 20px; /* Default padding */
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem; /* Default size */
    /* font-size: 16px; */ /* From style.css - overridden */
    transition: background-color 0.2s ease, opacity 0.2s ease;
    white-space: nowrap; /* Prevent wrap */
    box-sizing: border-box;
    color: white; /* Default text color */
    text-align: center;
}
/* Base button hover from style.css - overridden by specific classes */
/* button:hover { background-color: #2980b9; } */

.btn-sm { /* Smaller buttons */
    padding: 5px 10px;
    font-size: 0.8rem;
}

.btn-primary {
    background: #ff6200; /* Orange primary from admin-dashboard */
    /* background-color: #3498db; */ /* Blue primary from style.css - overridden */
    color: white;
}
.btn-primary:hover:not(:disabled) {
    background: #e55a00; /* Darker orange */
    /* background-color: #2980b9; */ /* Darker blue - overridden */
}

.btn-secondary {
    background: #6c757d; /* Grey secondary from admin-dashboard/staff */
    /* background-color: #95a5a6; */ /* Lighter grey from style.css - overridden */
    color: white;
}
.btn-secondary:hover:not(:disabled) {
    background: #5a6268; /* Darker grey */
    /* background-color: #7f8c8d; */ /* Darker light grey - overridden */
}

.btn-logout {
    background: #dc3545; /* Red logout from admin-dashboard/staff */
    /* background-color: #e74c3c; */ /* Lighter red from style.css - overridden */
    color: white;
    /* margin-top: 20px; */ /* Removed default margin, apply where needed */
    /* margin-top: 30px; */ /* From staff.css */
}
.btn-logout:hover:not(:disabled) {
    background: #c82333; /* Darker red */
    /* background-color: #c0392b; */ /* Darker light red - overridden */
}

/* General Button Disabled State */
.btn-primary:disabled,
.btn-secondary:disabled,
.btn-logout:disabled,
button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: #ccc !important; /* Consistent disabled background */
    color: #666 !important; /* Consistent disabled text */
}

/* General Forms */
.form-group {
    margin-bottom: 15px; /* Default spacing */
    /* margin-bottom: 20px; */ /* From login/style.css - overridden */
    text-align: left; /* Default alignment */
}

label {
    display: block;
    margin-bottom: 5px; /* Default spacing */
    color: #666;
    font-weight: bold; /* Default weight */
}

/* General input/select styles (apply broadly, login/specific sections might override) */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="number"],
input[type="time"], /* Added type=time */
select {
    width: 100%;
    padding: 10px; /* Default padding */
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box; /* Crucial for width: 100% */
    font-size: 1rem; /* Default size */
    height: 40px; /* Consistent height from admin-dashboard */
}

input:focus, select:focus, textarea:focus { /* General focus style */
    /* outline: 2px solid #005fcc; */ /* Blue outline from staff.css - can conflict */
    /* outline-offset: 2px; */
    border-color: #ff8c00; /* Orange focus from admin-dashboard/login */
    outline: none;
    box-shadow: 0 0 0 2px rgba(255, 100, 0, 0.2); /* Orange shadow */
}

/* General Tables */
.table-container {
    overflow-x: auto; /* Enable horizontal scroll */
    margin-top: 20px; /* Default top margin */
    width: 100%;
    /* Styles from staff.css */
    border: 1px solid #ddd;
    border-radius: 5px;
}

table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px; /* Default min-width (admin) */
    /* min-width: 450px; */ /* From staff.css - overridden */
    background-color: #fff;
    /* margin-top: 20px; */ /* From style.css - moved to container */
}

th, td {
    padding: 12px 15px; /* Default padding (admin) */
    /* padding: 10px 12px; */ /* Padding from staff.css - overridden */
    border: 1px solid #ddd; /* Default border (admin) */
    /* border: none; */ /* From staff.css - overridden */
    /* border-bottom: 1px solid #ddd; */ /* From style.css - overridden */
    /* border-bottom: 1px solid #eee; */ /* From staff.css - overridden */
    text-align: left;
    vertical-align: middle; /* Align content vertically */
    white-space: nowrap; /* Prevent wrapping by default */
    font-size: 0.9rem; /* Default size from staff.css */
}

th {
    background: #f8f9fa; /* Light grey background */
    color: #333;
    font-weight: bold; /* Default weight */
    /* font-weight: 600; */ /* From style.css - overridden */
    position: sticky; /* Keep header visible on scroll */
    top: 0;
    z-index: 1; /* Ensure it stays above content */
}

td button {
    margin-right: 5px; /* Space between action buttons in table cells */
}

/* Alternating row color */
tbody tr:nth-child(even) { background-color: #fdfdfd; } /* From staff.css */

/* Hover effect from style.css */
tr:hover {
    background-color: #f5f5f5;
}

/* --- QR Code & Map Styles --- */

/* QR Management (Admin Dashboard) */
.qr-management {
    margin-top: 20px;
    padding-top: 20px; /* From admin-dashboard */
    border-top: 1px solid #eee; /* From admin-dashboard */
    /* Styles from style.css merged */
    padding: 20px;
    background: #f8f9fa;
    border-radius: 4px;
}

#qrCodeContainer { /* Container for multiple QRs */
    margin-top: 15px;
    display: flex; /* Use flex for centering single QR */
    justify-content: center; /* Center the single QR */
    flex-wrap: wrap; /* Allow wrapping */
    gap: 15px; /* Space between QR codes */
}

.qr-code-item {
    /* display: inline-block; */ /* From style.css - overridden by flex */
    margin: 0; /* Let gap handle spacing */
    /* margin: 10px; */ /* From style.css - overridden */
    text-align: center;
    padding: 15px; /* Increased padding */
    /* padding: 10px; */ /* From style.css - overridden */
    border: 1px solid #eee; /* Added border */
    background: white;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    word-wrap: break-word; /* Wrap long text */
    max-width: 200px; /* Limit width */
}

.qr-code-item h4 { /* Heading within QR item */
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 0.9rem;
}

.qr-code-item canvas,
.qr-code-item img { /* QR code image/canvas */
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 10px auto; /* Center and add bottom margin */
}

/* QR Scanner (Staff Check-in) */
.qr-section { /* Wrapper for scanner on staff page */
    margin: 30px 0;
    text-align: center;
}
.qr-section h2 {
    margin-bottom: 5px;
    font-size: 1.2rem;
}
.qr-section p {
    font-size: 0.9em;
    color: #555;
    margin-bottom: 15px;
}

#qrScanner { /* Video container */
    margin: 20px auto; /* Center container */
    text-align: center;
    position: relative; /* Needed for overlays or borders */
    /* border: 2px dashed #ccc; */ /* Dashed border from style.css - optional */
    /* padding: 15px; */ /* Padding from style.css - optional */
    /* border: 1px solid #ccc; */ /* Solid border from staff.css - optional */
    /* border-radius: 8px; */ /* Radius from style.css - optional */
    max-width: 400px; /* Limit scanner width */
}

#qrVideo { /* The video element itself */
    border: 1px solid #ccc; /* Default border from staff.css */
    /* border: 2px solid #3498db; */ /* Blue border from style.css - overridden */
    border-radius: 5px; /* Default radius from staff.css */
    /* border-radius: 4px; */ /* Radius from style.css - overridden */
    width: 100%; /* Take container width */
    max-width: 100%; /* Ensure it doesn't overflow container */
    /* max-width: 350px; */ /* staff.css */
    /* max-width: 300px; */ /* style.css */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Remove extra space below */
    margin: 0 auto 10px auto; /* Center and add bottom margin */
    background-color: #eee; /* Placeholder background */
    /* background: black; */ /* From style.css - overridden */
}

#stopScanBtn { /* Button to stop scanning */
    margin-top: 10px; /* Adjusted margin */
    /* Using .btn-secondary style */
}

/* Map Styles (Admin/General) */
#map {
    height: 400px;
    width: 100%;
    margin-top: 20px; /* Added margin */
    border-radius: 5px; /* From admin-dashboard */
    /* border-radius: 8px; */ /* From style.css - overridden */
    border: 1px solid #ddd; /* From admin-dashboard/style */
}
.map-error { /* Error message for map */
    color: #d32f2f;
    padding: 10px;
    background: #ffebee;
    border-radius: 4px;
    margin: 10px 0;
}

/* Location Form (Admin - Map Section) */
.location-form {
    padding: 20px;
    border: 1px solid #eee;
    border-radius: 5px;
    background-color: #fafafa;
    margin-bottom: 20px;
}
.location-form p {
    font-size: 1rem;
    color: #333;
    margin-bottom: 15px;
}
.location-form #currentLocation {
    font-weight: bold;
    color: #ff6200; /* Orange */
}
.location-form button {
    margin-top: 10px;
    margin-right: 10px;
}

/* --- Status Messages & Indicators (Consolidated from staff.css, style.css) --- */
.status-message { /* General container for status messages */
    margin-top: 15px;
    padding: 12px; /* Default padding from staff.css */
    /* padding: 10px; */ /* From style.css - overridden */
    border-radius: 4px;
    font-size: 0.95rem; /* Default size from staff.css */
    text-align: center;
    word-wrap: break-word; /* Allow long messages to wrap */
    border: 1px solid transparent; /* Base border */
    min-height: 1.5em; /* Ensure space even when empty */
    font-weight: normal; /* Default weight */
    /* font-weight: bold; */ /* From style.css - apply per status if needed */
}

/* Specific Status Colors (Using staff.css definitions primarily) */
.status-info       { background: #e0f7fa; color: #006064; border-color: #b3e5fc; } /* staff.css */
/* .status-info    { background-color: #e3f2fd; color: #0d47a1; } */ /* style.css - overridden */
.status-processing { background: #fff9c4; color: #f57f17; border-color: #fff176; } /* staff.css */
/* .status-processing{ background: #fff3cd; color: #856404; border: 1px solid #ffeeba; } */ /* staff.css alt - overridden */
.status-verified   { background: #c8e6c9; color: #1b5e20; border-color: #a5d6a7; } /* staff.css */
/* .status-verified{ background: #cce5ff; color: #004085; border: 1px solid #b8daff; } */ /* staff.css alt - overridden */
.status-success    { background: #e8f5e9; color: #1b5e20; border-color: #c8e6c9; } /* staff.css */
/* .status-success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; } */ /* staff.css alt - overridden */
/* .status-success { background-color: #e8f5e9; color: #2e7d32; } */ /* style.css - overridden */
.status-checked_out{ background: #e3f2fd; color: #0d47a1; border-color: #bbdefb; } /* staff.css */
/* .status-checked_out{ background: #d1ecf1; color: #0c5460; border: 1px solid #bee5eb; } */ /* staff.css alt - overridden */
.status-error      { background: #ffebee; color: #b71c1c; border-color: #ffcdd2; } /* staff.css */
/* .status-error   { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; } */ /* staff.css alt - overridden */
/* .status-error   { background-color: #ffebee; color: #c62828; } */ /* style.css - overridden */
.status-warning    { background: #fff3e0; color: #e65100; border-color: #ffe0b2; } /* staff.css */
/* .status-warning { background: #fff3cd; color: #856404; border: 1px solid #ffeeba; } */ /* staff.css alt - overridden */
.status-late       { background: #ffccbc; color: #d84315; border-color: #ffab91; } /* staff.css */
/* .status-late    { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; } */ /* staff.css alt - overridden */
/* .status-late    { color: orange; background-color: #fff3e0; } */ /* style.css - overridden */
.status-ontime     { /* Typically success/verified, can add specific if needed */
                      background: #e8f5e9; color: #1b5e20; border-color: #c8e6c9; /* Matching success */
                      /* color: green; background-color: #e8f5e9; */ /* style.css - overridden */
                   }
.status-absent     { /* Typically error/warning, can add specific if needed */
                      background: #ffebee; color: #b71c1c; border-color: #ffcdd2; /* Matching error */
                      /* color: red; background-color: #ffebee; */ /* style.css - overridden */
                   }

/* Table Status Text Colors (Staff History Table) */
.status-ontime-text { color: #1b5e20; font-weight: bold; } /* staff.css / style.css green */
/* .status-ontime-text { color: #28a745; font-weight: bold; } */ /* staff.css alt green */
.status-late-text { color: #d84315; font-weight: bold; } /* staff.css orange/red */
/* .status-late-text { color: #dc3545; font-weight: bold; } */ /* staff.css alt red */
.status-ok-text { color: #28a745; font-weight: bold; } /* From admin-dashboard - same as ontime */
.status-warning-text { color: #ffc107; font-weight: bold; } /* From admin-dashboard */
.status-error-text { color: #dc3545; font-weight: bold; } /* From admin-dashboard - same as late */


/* --- Attendance History Table (Staff) --- */
.attendance-history {
    margin-top: 30px;
}
/* Uses .table-container and general table styles defined above */


/* --- Contact Section Styles (Admin) --- */
.contact-info {
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
}

.contact-item {
    margin-bottom: 0; /* Grid gap handles spacing */
    padding: 25px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-left: 5px solid #ff6200; /* Orange accent */
    display: flex;
    flex-direction: column;
}

.contact-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12);
}

.contact-item-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.contact-icon-wrapper {
    background-color: #ff6200; /* Orange */
    color: white;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.contact-item h3 {
    margin: 0;
    color: #333;
    font-size: 1.2rem;
}

.contact-item p {
    color: #555;
    line-height: 1.6;
    margin-bottom: 15px;
    flex-grow: 1; /* Allow text block to grow */
    font-size: 0.95rem;
}

.contact-details {
    margin-bottom: 20px;
    padding-left: 5px;
    border-left: 2px solid #eee;
}

.contact-details p {
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.contact-details strong {
    color: #333;
}

.contact-details a {
    color: #ff6200; /* Orange link */
    text-decoration: none;
    transition: color 0.2s ease;
}

.contact-details a:hover {
    color: #e55a00; /* Darker orange */
    text-decoration: underline;
}

.contact-item button { /* Button within contact card */
    background-color: #f0f0f0;
    color: #333;
    border: 1px solid #ddd;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    font-size: 0.9rem;
    display: inline-flex; /* Align icon and text */
    align-items: center;
    gap: 8px;
    margin-top: auto; /* Push button to bottom */
    align-self: flex-start; /* Align button left */
}

.contact-item button:hover {
    background-color: #e0e0e0;
    border-color: #ccc;
}

.contact-item button svg { /* Icon within button */
    stroke: #555;
    width: 16px;
    height: 16px;
}

/* --- Modal Styles (Admin) --- */
.modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 100; /* Above everything */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.5); /* Dim background */
}

.modal-content {
    background-color: #fefefe;
    margin: 10% auto; /* Centered vertically and horizontally */
    padding: 25px;
    border: 1px solid #888;
    width: 80%; /* Responsive width */
    max-width: 500px; /* Max width */
    border-radius: 8px;
    position: relative;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.close-button {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 28px;
    font-weight: bold;
    line-height: 1; /* Prevent extra spacing */
}

.close-button:hover,
.close-button:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.modal h2 {
    margin-top: 0;
    color: #ff6200; /* Orange heading */
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.modal .form-group {
    margin-bottom: 20px; /* Spacing for form elements */
}

.modal button { /* Buttons inside modal */
    margin-right: 10px;
    margin-top: 10px;
}

.modal .error-message { /* Error message inside modal */
    margin-top: 15px;
    color: red;
    min-height: 1em;
    font-size: 0.9em;
}

.modal p { /* Paragraphs inside modal */
    margin-bottom: 10px;
    color: #555;
}

.modal p strong {
    color: #333;
}

/* --- Attendance Settings Form Styles (Admin) --- */
.attendance-settings-form {
    margin-top: 20px;
    padding: 20px;
    border: 1px solid #eee;
    border-radius: 5px;
    background-color: #fafafa;
}

.attendance-settings-form .form-group {
     margin-bottom: 10px; /* Slightly reduced margin */
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     gap: 10px 20px; /* Row gap, Column gap */
}

.attendance-settings-form label {
    flex-basis: 220px; /* Width for labels */
    flex-shrink: 0;
    margin-bottom: 0; /* Remove default margin */
    text-align: right; /* Align label text right */
    padding-right: 10px; /* Space after label */
    font-weight: normal; /* Normal weight */
    color: #555;
}

.attendance-settings-form input[type="time"],
.attendance-settings-form input[type="number"] {
     flex-grow: 1; /* Allow input to take remaining space */
     max-width: 200px; /* Limit width */
     width: auto; /* Override width:100% from general input style */
}

 .attendance-settings-form button {
     /* Align button */
     margin-top: 15px;
     margin-left: 240px; /* Align with input fields (label width + gaps) - adjust as needed */
 }

 #attendanceSettingsMsg { /* Style for the message div */
     margin-top: 15px;
     margin-left: 240px; /* Align with button */
     font-size: 0.9em;
     min-height: 1em; /* Prevent collapse */
     color: green; /* Default success color, can be changed via JS */
 }

/* --- Language Support (Khmer Font & Switcher - From khmer.css) --- */
html[lang="km"] body,
html[lang="km"] .admin-container,
html[lang="km"] button,
html[lang="km"] input,
html[lang="km"] select,
html[lang="km"] textarea,
html[lang="km"] th,
html[lang="km"] td,
html[lang="km"] label,
html[lang="km"] h1,
html[lang="km"] h2,
html[lang="km"] h3,
html[lang="km"] p,
html[lang="km"] a,
html[lang="km"] li,
html[lang="km"] span {
     font-family: 'Battambang', 'Khmer OS Battambang', sans-serif; /* Added fallback */
     /* Adjust base font size slightly for Khmer if needed */
     /* font-size: 17px;  */
     line-height: 1.7; /* Improved line height */
}

/* Specific adjustments for headings in Khmer if needed */
html[lang="km"] h1 { font-size: 2.2em; }
html[lang="km"] h2 { font-size: 1.8em; }
html[lang="km"] h3 { font-size: 1.4em; }

/* Language Toggle Button */
#toggleLangBtn {
    background-color: #fc7c0c; /* Lighter orange */
    border: 1px solid #ff0101; /* Red border */
    font-family: 'Battambang', 'Khmer OS Battambang', sans-serif; /* Khmer font */
    padding: 6px 12px;
    cursor: pointer;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9em;
    line-height: 1.5;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    white-space: nowrap;
    color: white; /* Added text color */
    flex-shrink: 0; /* Prevent shrinking */
}

#toggleLangBtn:hover {
    background-color: #ef1818; /* Red hover */
    border-color: #f67307; /* Orange hover border */
}

#toggleLangBtn img {
    width: 22px;
    height: auto;
    display: block;
}

/* --- Helper Classes --- */
.hidden {
    display: none !important;
}

/* --- Scrollbar Styles (Optional) --- */
.table-container::-webkit-scrollbar { height: 8px; background-color: #f5f5f5; }
.table-container::-webkit-scrollbar-thumb { background-color: #ccc; border-radius: 4px; }
.table-container::-webkit-scrollbar-thumb:hover { background-color: #bbb; }

/* ==========================================================================
   START OF RESPONSIVE MEDIA QUERIES (Consolidated)
   ========================================================================== */

/* --- Medium Devices (Tablets, smaller desktops - 992px and down) --- */
@media (max-width: 992px) {
    .admin-sidebar {
        width: 220px; /* Slightly smaller sidebar */
    }
     th, td {
         white-space: normal; /* Allow table cell content to wrap */
     }
     /* Attendance Settings Form - Stack label above input */
     .attendance-settings-form label {
         text-align: left;
         flex-basis: 100%; /* Full width */
         margin-bottom: 5px; /* Add space below label */
         padding-right: 0;
     }
     .attendance-settings-form button,
     #attendanceSettingsMsg {
          margin-left: 0; /* Reset margin */
     }
     .attendance-settings-form input[type="time"],
     .attendance-settings-form input[type="number"] {
          max-width: 100%; /* Allow inputs to take full width */
     }
}

/* --- Small Devices (Landscape Phones, Tablets - 768px and down) --- */
@media (max-width: 768px) {
    /* Admin Layout Adjustments */
    .admin-content {
        flex-direction: column; /* Stack sidebar and main content */
    }
    .admin-sidebar {
        width: 100%; /* Full width sidebar */
        padding-right: 0;
        margin-bottom: 15px; /* Space below sidebar */
        padding: 10px; /* Reduce padding */
        display: flex; /* Arrange buttons horizontally */
        flex-wrap: wrap; /* Allow buttons to wrap */
        gap: 5px; /* Space between buttons */
        border-bottom: 1px solid #eee; /* Add separator */
        box-shadow: none; /* Remove sidebar shadow */
    }
    .sidebar-btn {
        width: auto; /* Allow buttons to size based on content */
        flex-grow: 1; /* Allow buttons to grow */
        text-align: center; /* Center button text */
        margin-bottom: 0; /* Remove bottom margin */
        padding: 8px 12px; /* Adjust padding */
        font-size: 0.9rem; /* Adjust font size */
    }
    .admin-header {
        flex-direction: column; /* Stack header items */
        padding: 15px; /* Adjust padding */
        text-align: center; /* Center header content */
    }
    .admin-header .header-content {
        margin-bottom: 10px; /* Space below logo/title */
        justify-content: center; /* Center logo/title */
        flex-direction: column; /* Stack logo and text */
        text-align: center;
    }
    .admin-header .header-content div:nth-child(2) {
        text-align: center; /* Center title/subtitle */
    }
    .admin-header .language-switcher {
        margin-left: 0; /* Reset margin */
        padding-right: 0;
        justify-content: center;
        width: 100%; /* Make switcher take width */
        margin-top: 10px;
    }
    .admin-header #adminLogoutBtn {
        margin-left: 0;
        margin-top: 10px;
        width: auto; /* Auto width */
    }

    /* Filters & Export Options Adjustments */
    .filters,
    .export-options {
        flex-direction: column; /* Stack filter/export items */
        align-items: stretch; /* Stretch items full width */
    }
    .filters .form-group,
    .export-options .form-group {
        flex: 1 1 auto; /* Reset flex basis, allow full width */
        min-width: 100%; /* Ensure full width (from admin.css) */
    }
    .filters button,
    .export-options button {
        width: 100%; /* Full width buttons */
        margin-top: 10px;
    }

    /* Map Adjustments */
    #map {
        height: 300px; /* Reduce map height */
    }

    /* Contact Info Adjustments */
    .contact-info {
        grid-template-columns: 1fr; /* Stack contact cards */
    }

    /* Location Form Button Adjustments */
    .location-form button {
        margin-right: 5px; /* Reduce button margin */
    }

    /* Modal Adjustments */
    .modal-content {
        margin: 15% auto; /* Adjust vertical margin */
    }
}

/* --- Extra Small Devices (Phones - 576px and down) --- */
@media (max-width: 576px) {
    /* General Padding & Font Size Adjustments */
    body {
        padding: 10px; /* Add padding for staff page */
    }
    .admin-main {
        padding: 15px; /* Reduce padding */
    }
    .admin-section {
        padding: 15px; /* Reduce padding */
    }
    th, td {
        padding: 10px 8px; /* Reduce table cell padding */
        font-size: 0.85rem; /* Reduce table font size */
        white-space: normal; /* Force wrap in table cells */
    }
    table {
        min-width: 100%; /* Allow table to shrink below original min-width */
    }

    /* Button Size Adjustments */
    .btn-primary, .btn-secondary, .btn-logout, .btn-sm, button {
        font-size: 0.85rem; /* Reduce button font size */
        padding: 8px 12px; /* Reduce button padding */
    }
    .btn-sm {
        padding: 4px 8px; /* Further reduce small button padding */
    }

    /* Modal Adjustments */
    .modal-content {
        width: 90%; /* Increase width slightly */
        margin: 15% auto; /* Adjust margin */
        padding: 20px; /* Reduce padding */
    }
    .modal h2 {
        font-size: 1.3rem; /* Reduce modal heading size */
    }

    /* Staff Check-in Page Adjustments */
    .checkin-container {
        margin: 15px auto; /* Reduce margin */
        padding: 15px; /* Reduce padding */
    }
    .checkin-container h1 {
        font-size: 1.6rem; /* Reduce heading size */
    }
    .checkin-container h2 {
        font-size: 1.2rem; /* Reduce sub-heading size */
    }
    .checkin-container .logo {
        width: 70px; /* Reduce logo size */
        height: 70px;
    }
    /* Ensure staff buttons stack correctly and take reasonable width */
    .checkin-container .btn-primary,
    .checkin-container .btn-secondary,
    .checkin-container .btn-logout,
    .checkin-container #checkInBtn,
    .checkin-container #checkOutBtn {
         padding: 10px 15px;
         font-size: 0.95rem;
         display: block; /* Ensure stacking */
         width: 100%; /* Full width */
         max-width: 300px; /* Limit max width */
         margin: 10px auto; /* Center */
         min-width: auto; /* Remove min-width */
    }
    .checkin-container table {
        min-width: 100%; /* Allow history table to shrink */
        /* min-width: 400px; */ /* From staff.css - overridden */
    }
    .checkin-container #qrVideo {
        max-width: 100%; /* Allow video to take full width */
    }
    .checkin-container th,
    .checkin-container td {
         padding: 8px 10px;
         font-size: 0.85rem;
         white-space: nowrap; /* Keep staff table nowrap if preferred? Revert if wrap needed */
    }

    /* Login Container Adjustments */
    .login-container {
        padding: 20px; /* Reduce padding */
    }
    .login-container h1 {
        font-size: 1.6em;
    }

    /* Admin Header on Small Screens */
    .admin-header .logo {
        width: 60px;
        height: 60px;
    }
    .admin-header h1 {
        font-size: 1.3rem;
    }
    .admin-header p {
        font-size: 0.8rem;
    }

    /* Attendance Settings Form Alignment on Small Screens */
     .attendance-settings-form button,
     #attendanceSettingsMsg {
          margin-left: 0; /* Ensure no offset */
          width: 100%; /* Full width button */
          text-align: center;
     }
     #attendanceSettingsMsg {
         text-align: left; /* Align message left */
     }
}

/* --- Staff CSS Specific Breakpoint (Included for completeness) --- */
@media (min-width: 577px) {
    .checkin-container .btn-logout {
         max-width: 200px;
    }

}
.footer {
    position: fixed;          /* Keep it fixed in the viewport */
    left: 20px;               /* 20px from the left edge */
    /* Adjust bottom using safe area inset for mobile compatibility + padding */
    bottom: calc(env(safe-area-inset-bottom, 0px) + 20px);
    color: #FF8C00;           /* Orange color */
    font-weight: bold;        /* Bold text */
    font-size: 16px;          /* Font size */
    font-family: sans-serif;  /* Basic sans-serif font */
    z-index: 1000;            /* High z-index to stay on top */
    pointer-events: none;     /* Optional: Prevent it from blocking clicks on things behind it */
  }
    /* --- Original Footer CSS (For Desktop/Default) --- */
.footer {
    position: fixed;
    left: 20px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 20px); /* Default bottom spacing */
    color: #FF8C00;
    font-weight: bold;
    font-size: 16px; /* Default font size */
    font-family: sans-serif;
    z-index: 1000;
    pointer-events: none;
  }
  
  
  /* --- Media Query for Mobile Phones (Screens 600px wide or smaller) --- */
  @media (max-width: 600px) {
    .footer {
      /* --- OPTION 1: Keep it fixed, but adjust spacing/size --- */
      font-size: 14px; /* Make font slightly smaller on mobile */
      left: 15px;     /* Slightly less space from the left */
      bottom: calc(env(safe-area-inset-bottom, 0px) + 15px); /* Adjust bottom spacing if needed */
      /* You only need to include properties you want to CHANGE for mobile */
  
  
      /* --- OPTION 2: Make it NOT fixed on mobile (if fixed causes issues) --- */
      /* Uncomment these lines INSTEAD of Option 1 if you want it at the bottom of the content */
      /*
      position: static;  /* Change from fixed to normal flow */
      /* left: auto;        /* Reset fixed positioning */
      /* bottom: auto;      /* Reset fixed positioning */
      /* z-index: auto;     /* Reset z-index */
      /* pointer-events: auto; /* Allow interaction again */
      /* Add some space */
      /* margin-top: 30px;  /* Space above the footer */
      /* padding: 15px;     /* Padding around the text */
      /* text-align: center; /* Optional: Center the text */
      /* width: 100%;      /* Make it full width */
      /* box-sizing: border-box; /* Include padding in the width */
      
    }
  }
  /* Style the link within the footer */
.footer a {
    color: inherit; /* Make the link color the same as the footer text (orange) */
    text-decoration: none; /* Remove the default underline */
    font-weight: inherit; /* Ensure it keeps the bold weight if set on footer */
  }
  
  /* Optional: Add an underline only when hovering over the link */
  .footer a:hover {
    text-decoration: underline;
  }