/* Universal Font-Family Reset and Box-Sizing (Ensures ALL elements behave consistently) */
* {
    font-family: 'Poppins', sans-serif;
    box-sizing: border-box; /* THIS IS THE KEY ADDITION to prevent overflow */
}


/* General Body and Font Styles */
body {
    margin: 0;
    padding: 0;
    background-color: #f4f7f6; /* Light background for a clean look */
    color: #333; /* Darker text for readability */
    line-height: 1.7; /* Slightly increased line height for better readability with Poppins */
    -webkit-font-smoothing: antialiased; /* Smoother font rendering for WebKit browsers */
    -moz-osx-font-smoothing: grayscale; /* Smoother font rendering for Firefox on OS X */
}

/* Container for the main content (used on index.php and login.php) */
.container {
    max-width: 1200px; /* Slightly wider form area */
    margin: 40px auto; /* Centered with top/bottom margin */
    padding: 30px;
    background-color: #e1dddd; /* White background for the form area */
    border-radius: 8px; /* Slightly rounded corners */
    /* Updated Layered Shadow for a modern look */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), /* Softer initial layer */
                0 10px 20px rgba(0, 0, 0, 0.08); /* Deeper, subtle second layer */
}

/* Headings (Main Page Title) */
h2 {
    text-align: center;
    color: #2c3e50; /* A darker blue/grey for headings */
    margin-bottom: 30px;
    font-size: 2em; /* Slightly larger heading */
    font-weight: 700; /* Bold for main heading */
}

/* Form Labels */
form label {
    display: block;
    margin-top: 15px; /* Space above labels */
    margin-bottom: 6px; /* Space below label before input */
    font-weight: 500; /* Medium for labels */
    color: #555; /* A bit lighter than main text */
    font-size: 0.95em; /* Slightly smaller label text */
}

/* Style for required fields - add a small asterisk */
label[required]:after {
    content: ' *';
    color: #e74c3c; /* Red asterisk for required fields */
    font-weight: bold;
}

/* Input Fields, Selects, and Textareas - Minimalist Borders */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="datetime-local"],
select,
textarea {
    width: calc(100% - 22px); /* Account for padding and border */
    padding: 12px;
    margin-bottom: 15px; /* Consistent spacing below inputs */
    border: none; /* REMOVED THE SOLID BORDER */
    border-radius: 6px;
    box-sizing: border-box; /* Ensures padding is included in width */
    font-size: 15px;
    /* Subtle initial shadow to hint at input area, replacing solid border */
    box-shadow: inset 0 0 0 1px #e0e0e0; /* Very subtle internal border-like shadow */
    transition: box-shadow 0.3s ease; /* Transition only shadow now */
}

/* Input Focus States */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="datetime-local"]:focus,
select:focus,
textarea:focus {
    border-color: transparent; /* Ensure no residual border is visible */
    outline: none; /* Remove default outline */
    /* Modern focus effect: blue border-like shadow + outer glow */
    box-shadow: inset 0 0 0 1px #3498db, /* Blue border-like effect */
                0 0 0 3px rgba(52, 152, 219, 0.25); /* Outer glow */
}

textarea {
    resize: vertical; /* Allow vertical resizing */
    min-height: 80px; /* Give more initial space for notes */
}

/* Custom dropdown arrow for select elements */
select {
    appearance: none; /* Remove default arrow in some browsers */
    -webkit-appearance: none; /* For WebKit browsers */
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-6.5%200-12.3%203.2-16.1%208.1-3.9%204.9-4.8%2011.4-2.4%2017.6l139.3%20202.8c3.9%205.7%2010.8%209.2%2018.1%209.2s14.2-3.5%2018.1-9.2L289.4%2091c2.4-6.2%201.5-12.7-2.4-17.6z%22%2F%3E%3C%2Fsvg%3E'); /* Inline SVG for custom arrow */
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px; /* Adjust arrow size */
    padding-right: 30px; /* Make space for the custom arrow */
}


/* Checkbox and Radio Group Styles */
.checkbox-group,
.radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 15px; /* Increased gap for better separation */
    margin-bottom: 20px;
    padding: 10px 0; /* Add some vertical padding */
}

.checkbox-group label,
.radio-group label {
    display: flex;
    align-items: center;
    font-weight: normal; /* Reset font-weight from general label rule */
    cursor: pointer; /* Indicate interactivity */
    margin-top: 0; /* Reset margin-top from general label rule */
    margin-bottom: 0; /* Reset margin-bottom from general label rule */
}

.checkbox-group input[type="checkbox"],
.radio-group input[type="radio"] {
    margin-right: 8px; /* Space between checkbox/radio and label text */
    transform: scale(1.1); /* Slightly larger checkboxes/radios */
}

/* Specific Services (Checkbox group for islands/services) */
.specific-services {
    flex-direction: column; /* Stack checkboxes vertically */
    gap: 10px; /* Closer spacing for stacked items */
    margin-top: 10px; /* Add some space above the group */
}

/* --- Form Sectioning Styles --- */
.form-section {
    background-color: #fcfcfc; /* Slightly different background for sections */
    border: 1px solid #e0e0e0; /* Very light border around sections */
    border-radius: 6px;
    padding: 25px;
    margin-bottom: 30px; /* Space between sections */
    /* Updated Layered Shadow for sections */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), /* Very light initial layer */
                0 5px 10px rgba(0, 0, 0, 0.06); /* Slightly more prominent layer */
}

.form-section h3 {
    color: #34495e; /* A slightly lighter shade of the navbar/heading blue */
    margin-top: 0; /* Remove default top margin */
    margin-bottom: 25px; /* Space below section heading */
    font-size: 1.6em; /* Size for section headings */
    font-weight: 600; /* Semi-Bold */
    padding-bottom: 10px; /* Space before the underline */
    border-bottom: 2px solid #e0e0e0; /* A subtle underline for the section heading */
    display: flex; /* To align icon and text */
    align-items: center;
}

.form-section h3 i {
    margin-right: 12px; /* Space between icon and heading text */
    color: #3498db; /* Use the vibrant blue for section icons */
    font-size: 1.1em; /* Make icon slightly larger than text */
}

/* Submit Button Styles */
.submit-btn {
    background-color: #28a745; /* A professional green */
    color: white;
    padding: 14px 25px; /* More padding for a bigger button */
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 17px;
    width: 100%;
    margin-top: 30px; /* More space above the button */
    transition: background-color 0.3s ease, transform 0.1s ease;
    font-weight: 600; /* Semi-Bold for button text */
    display: flex; /* To center icon and text */
    align-items: center;
    justify-content: center;
}

.submit-btn:hover {
    background-color: #218838; /* Darker green on hover */
    transform: translateY(-1px); /* Slight lift effect */
}

.submit-btn:active {
    background-color: #1e7e34; /* Even darker on click */
    transform: translateY(0); /* Reset on active */
}

/* Ensure the submit button icon has proper spacing */
.submit-btn i {
    margin-right: 10px;
}


/* --- Navbar Styles --- */
.navbar {
    width: 100%;
    background-color: #2c3e50; /* Deep charcoal blue, matches H2 */
    padding: 10px 30px; /* Increased padding for a more substantial look, left/right */
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Updated Layered Shadow for navbar */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08), /* Adjusted for layering */
                0 6px 10px rgba(0, 0, 0, 0.1); /* Adding a deeper layer */
    position: sticky; /* Makes the navbar stick to the top when scrolling */
    top: 0; /* Ensures it sticks to the very top */
    z-index: 1000; /* Ensures it's above other content */
}

/* Logo in navbar */
.navbar .logo img {
    max-height: 50px; /* Reduced logo size for a more modern, compact navbar */
    width: auto;
    /*filter: brightness(0) invert(1); /* Makes a dark logo white, useful if logo_branco.png is actually dark */
    /* If logo_branco.png is already white, remove the filter line */
}

/* Navbar links container */
.navbar .nav-links {
    display: flex;
    gap: 25px; /* Increased gap between links */
}

/* Individual navbar links */
.navbar .nav-links a {
    color: #ecf0f1; /* Lighter grey-ish white for links, stands out on dark background */
    text-decoration: none;
    font-size: 1.05em; /* Slightly larger font for links */
    font-weight: 500; /* Medium for navigation links */
    padding: 8px 0px; /* Vertical padding only for hover effect */
    position: relative; /* For underline animation */
    transition: color 0.3s ease;
}

.navbar .nav-links a:hover {
    color: #3498db; /* Vibrant blue on hover, matches form focus color */
}

/* Custom underline animation for links */
.navbar .nav-links a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    display: block;
    margin-top: 5px;
    right: 0;
    background: #3498db; /* Blue underline */
    transition: width 0.3s ease;
    -webkit-transition: width 0.3s ease;
}

.navbar .nav-links a:hover::after {
    width: 100%;
    left: 0;
    background: #3498db;
}

/* Styling for icons within links/labels to provide spacing */
.nav-links a i {
    margin-right: 8px; /* Space between icon and text */
    font-size: 0.9em; /* Slightly smaller icon relative to text if desired */
    vertical-align: middle; /* Ensures icons are vertically centered with text */
}

/* --- Validation Feedback & Alerts --- */

/* Validation Feedback (Error Messages below inputs) */
.validation-feedback {
    color: #e74c3c; /* Red color for error messages */
    font-size: 0.85em;
    margin-top: -10px; /* Pull it slightly closer to the input */
    margin-bottom: 10px; /* Space it from the next label */
    min-height: 20px; /* Reserve space to prevent layout shift */
    display: block;
}

/* Styles for invalid inputs */
input.is-invalid,
select.is-invalid,
textarea.is-invalid {
    border-color: transparent; /* No solid border */
    /* Red border-like effect and outer glow for invalid fields */
    box-shadow: inset 0 0 0 1px #e74c3c,
                0 0 0 3px rgba(231, 76, 60, 0.2);
}

/* Optional: Styles for valid inputs */
input.is-valid,
select.is-valid,
textarea.is-valid {
    border-color: transparent; /* No solid border */
    /* Green border-like effect and outer glow for valid fields */
    box-shadow: inset 0 0 0 1px #28a745,
                0 0 0 3px rgba(40, 167, 69, 0.2);
}


/* Alert / Success Message */
.alert {
    padding: 15px 20px;
    margin-bottom: 25px;
    border-radius: 6px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    opacity: 1;
    transition: opacity 0.5s ease;
}

.alert.success-message {
    background-color: #d4edda; /* Light green background */
    color: #155724; /* Dark green text */
    border: 1px solid #c3e6cb; /* Green border */
}

.alert.success-message i {
    margin-right: 10px;
    font-size: 1.2em;
}

.alert .close-alert {
    background: none;
    border: none;
    font-size: 1.5em;
    font-weight: bold;
    color: inherit; /* Inherit color from alert */
    cursor: pointer;
    line-height: 1;
    padding: 0 5px;
}

.alert .close-alert:hover {
    color: #000;
}


/* --- Styles for Login Page --- */

/* Full-screen wrapper for centering the login box */
.login-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh; /* Ensure it takes full viewport height */
    background-color: #f4f7f6; /* Consistent with body background */
    padding: 20px; /* Add some padding for smaller screens */
    box-sizing: border-box; /* Ensure padding is included in width */
}

/* Login Container - reuses .container styles */
.login-container {
    /* Inherits most styles from .container (max-width, background, shadow, etc.) */
    padding: 40px;
    text-align: center;
    width: 100%;
    min-width: 320px;
    max-width: 600px;
}

/* Logo on Login Page */
.login-container .logo {
    max-width: 180px; /* Adjust logo size */
    height: auto;
    margin-bottom: 30px; /* More space below logo */
    filter: none; /* Remove filter if logo.png is already colored */
    /* If logo.png is a dark logo and needs to be white, use:
    filter: brightness(0) invert(1);
    */
}

/* Login Heading */
.login-container h2 {
    margin-bottom: 30px;
    font-size: 2em;
    color: #2c3e50; /* Consistent with main headings */
}

/* Input Group for Login Form */
.input-group {
    margin-bottom: 20px;
    text-align: left;
}

.input-group label {
    display: block;
    font-weight: 500; /* Medium weight for labels */
    margin-bottom: 8px; /* Slightly more space below label */
    color: #555;
    font-size: 0.95em;
}

.input-group input {
    /* Inherits most styles from the global input rules (border:none, shadows, etc.) */
    width: 100%;
    padding: 12px;
    border-radius: 6px;
    font-size: 16px;
    outline: none;
    transition: box-shadow 0.3s ease;
}

.input-group input:focus {
    /* Inherits from global input focus rules */
}

/* Login Button */
.login-btn {
    width: 100%;
    background-color: #3498db; /* Use the vibrant blue for login button */
    color: white;
    border: none;
    padding: 14px;
    border-radius: 6px;
    font-size: 17px;
    font-weight: 600; /* Semi-Bold */
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.1s ease;
    margin-top: 20px; /* Space above button */
    display: flex; /* For icon alignment */
    align-items: center;
    justify-content: center;
}

.login-btn:hover {
    background-color: #217dbb; /* Darker blue on hover */
    transform: translateY(-1px);
}

.login-btn:active {
    background-color: #1a6aa3;
    transform: translateY(0);
}

.login-btn i {
    margin-right: 10px; /* Space for icon */
}

/* Error Message (consistent with form validation feedback) */
.error-message {
    color: #e74c3c; /* Red */
    font-size: 0.9em; /* Slightly larger than validation feedback */
    margin-bottom: 20px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* Space between icon and text */
}

.error-message i {
    font-size: 1.1em;
}

/* --- New Styles for Leads List (leads.php) --- */

/* Actions Bar above table */
.actions-bar {
    display: flex;
    justify-content: flex-end; /* Align button to the right */
    margin-bottom: 20px;
    padding: 0 10px; /* Small horizontal padding inside container */
}

/* General Button Styles (for common buttons like Export, Edit, Delete) */
.btn {
    display: inline-flex; /* Use flex for icon and text alignment */
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none; /* Remove underline for links */
    transition: background-color 0.3s ease, transform 0.1s ease, box-shadow 0.3s ease;
}

.btn i {
    margin-right: 8px; /* Space between icon and text */
}

/* Primary Button (e.g., Export) */
.btn-primary {
    background-color: #3498db; /* Vibrant blue */
    color: white;
}

.btn-primary:hover {
    background-color: #217dbb;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(52, 152, 219, 0.2);
}

.btn-primary:active {
    background-color: #1a6aa3;
    transform: translateY(0);
}

/* Secondary Button (e.g., Edit) */
.btn-secondary {
    background-color: #f0f0f0; /* Light gray */
    color: #555; /* Darker text */
    border: 1px solid #ddd;
}

.btn-secondary:hover {
    background-color: #e0e0e0;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.btn-secondary:active {
    background-color: #d0d0d0;
    transform: translateY(0);
}

/* Danger Button (e.g., Delete) */
.btn-danger {
    background-color: #e74c3c; /* Red */
    color: white;
}

.btn-danger:hover {
    background-color: #c0392b;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(231, 76, 60, 0.2);
}

.btn-danger:active {
    background-color: #a93226;
    transform: translateY(0);
}

/* Small Button Variant */
.btn-small {
    padding: 6px 12px;
    font-size: 0.85em;
    font-weight: 500;
}


/* Table Styling */
.table-responsive {
    overflow-x: auto; /* Enable horizontal scrolling on small screens */
    margin-bottom: 30px; /* Space below the table */
    border-radius: 8px; /* Consistent with container */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* Soft shadow for table */
    border: 1px solid #e0e0e0; /* Very light border around the table wrapper */
}

.leads-table {
    width: 100%; /* Ensure table takes full width of its container */
    border-collapse: collapse;
    background-color: #fff;
    min-width: 700px; /* Ensure table doesn't shrink too much on mobile before scrolling */
}

.leads-table thead th {
    background-color: #34495e; /* Darker blue/grey, consistent with heading/navbar */
    color: white;
    padding: 15px 20px;
    text-align: left;
    font-size: 0.95em;
    font-weight: 600;
    white-space: nowrap; /* Prevent headers from wrapping */
}

.leads-table tbody td {
    padding: 12px 20px; /* Consistent padding */
    text-align: left;
    font-size: 0.9em;
    border-bottom: 1px solid #eee; /* Lighter border for rows */
    vertical-align: top; /* Align content to the top for multi-line cells */
}

.leads-table tbody tr:nth-child(even) {
    background-color: #f9f9f9; /* Subtle zebra striping */
}

.leads-table tbody tr:hover {
    background-color: #f1f6ff; /* Light blue hover effect for rows */
    cursor: pointer; /* Indicate rows are interactive (even if not directly clickable) */
}

/* Specific styling for the 'Notas' column to prevent excessive width */
.leads-table .notes-column {
    max-width: 200px; /* Limit width */
    overflow: hidden;
    text-overflow: ellipsis; /* Add ellipsis for overflow text */
    white-space: nowrap; /* Keep text on single line */
}


/* Status Badges */
.status-badge {
    padding: 6px 10px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.8em; /* Smaller font for badges */
    text-align: center; /* Center text within the badge */
    white-space: nowrap; /* Prevent status text from wrapping */
}

.status-new {
    background-color: #f7a072; /* Softer orange/red for new */
    color: #7b2a00;
}

.status-warm-up {
    background-color: #fcd78c; /* Softer yellow/orange for warm-up */
    color: #7a5000;
}

.status-welcome {
    background-color: #a7d9f7; /* Lighter blue for welcome */
    color: #0d4a6f;
}

.status-in-progress { /* For 'Em Seguimento' */
    background-color: #cfe2f3; /* Light blue for in-progress */
    color: #216a9c;
}

.status-completed {
    background-color: #c8e6c9; /* Light green for completed */
    color: #28a745;
}

.status-unknown { /* Fallback for unhandled statuses */
    background-color: #e0e0e0;
    color: #666;
}

/* Actions Column */
.actions-column {
    white-space: nowrap; /* Prevent action buttons from wrapping */
}

.actions-column .btn {
    margin: 0 4px; /* Small margin between action buttons */
}


/* No Leads Message */
.no-leads-message {
    text-align: center;
    padding: 40px;
    font-size: 1.1em;
    color: #666;
    background-color: #fdfdfd;
    border: 1px dashed #e0e0e0;
    border-radius: 8px;
    margin-top: 30px;
    margin-bottom: 30px;
}

.no-leads-message i {
    margin-right: 10px;
    color: #3498db;
    font-size: 1.2em;
}

/* --- New Styles for Leads List (leads.php) - Status Badges --- */

/* Base style for status badges */
.status-badge {
    padding: 6px 10px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.8em; /* Smaller font for badges */
    text-align: center; /* Center text within the badge */
    white-space: nowrap; /* Prevent status text from wrapping */
    display: inline-block; /* Ensure it takes up minimal space */
    border: 1px solid; /* Add a subtle border that matches the color */
}

/* Status: Novo */
.status-new {
    background-color: #F7CAC3; /* Light Salmon/Coral */
    color: #A0522D; /* Darker Terra Cotta */
    border-color: #E2B0A9; /* Slightly darker border */
}

/* Status: Warm-Up */
.status-warm-up {
    background-color: #FDDDAA; /* Light Peach/Apricot */
    color: #8B4513; /* Darker Sepia */
    border-color: #EBC17B; /* Slightly darker border */
}

/* Status: Welcome */
.status-welcome {
    background-color: #B2D7F3; /* Light Sky Blue */
    color: #2F6F9F; /* Deeper Ocean Blue */
    border-color: #92C6E2; /* Slightly darker border */
}

/* Status: Em Seguimento (formerly 'Follow-Up') */
.status-in-progress {
    background-color: #ADD8E6; /* Light Blue */
    color: #005A6F; /* Dark Teal */
    border-color: #8DC1CE; /* Slightly darker border */
}

/* Status: Concluído */
.status-completed {
    background-color: #C1E1C1; /* Light Pastel Green */
    color: #366A36; /* Dark Forest Green */
    border-color: #A5C9A5; /* Slightly darker border */
}

/* Fallback for unknown status */
.status-unknown {
    background-color: #e0e0e0;
    color: #666;
    border-color: #cccccc;
}

/* ... (All other existing CSS rules from the previous full CSS) ... */

/* Ensure the table responsive pseudo-element also handles the badge */
@media (max-width: 768px) {
    /* ... existing responsive table styles ... */

    .leads-table .status-badge {
        display: inline-block; /* Keep badge styling */
        margin-top: 5px; /* Space from label */
    }
}


/* --- Responsive Adjustments --- */
/* (Keep your existing media queries, ensuring the new styles also adapt) */

@media (max-width: 768px) {
    .container {
        margin: 20px;
        padding: 20px;
    }
    h2 {
        font-size: 1.8em;
    }
    .submit-btn { /* Apply to main submit button if still needed */
        padding: 12px 15px;
        font-size: 16px;
    }

    /* Navbar Responsiveness */
    .navbar {
        flex-direction: column;
        padding: 15px 20px;
    }

    .navbar .logo {
        margin-bottom: 15px;
    }

    .navbar .nav-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
    }

    .navbar .nav-links a {
        padding: 5px 10px;
    }

    .form-section {
        padding: 20px;
    }
    .form-section h3 {
        font-size: 1.4em;
    }

    /* Leads Table Responsive adjustments */
    .leads-table thead {
        display: none; /* Hide table headers on small screens */
    }

    .leads-table, .leads-table tbody, .leads-table tr, .leads-table td {
        display: block; /* Make table elements behave like block elements */
        width: 100%; /* Take full width */
    }

    .leads-table tr {
        margin-bottom: 15px; /* Space between rows (now blocks) */
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
        padding: 15px;
        background-color: #fff;
    }
    .leads-table tr:hover {
        background-color: #f1f6ff;
    }


    .leads-table td {
        text-align: right; /* Align value to the right */
        padding: 10px 15px;
        border-bottom: 1px dashed #eee; /* Dashed separator for clarity */
        position: relative;
        padding-left: 50%; /* Make space for pseudo-element label */
    }

    .leads-table td:last-child {
        border-bottom: none; /* No border for the last cell */
    }

    /* Pseudo-element to show table header as a label on small screens */
    .leads-table td::before {
        content: attr(data-label); /* Use data-label attribute for the label */
        position: absolute;
        left: 15px;
        width: calc(50% - 30px); /* Adjust width for label */
        padding-right: 10px;
        white-space: nowrap;
        text-align: left;
        font-weight: 600;
        color: #333;
    }
    
    /* Specific data-labels for each column */
    .leads-table td:nth-of-type(1)::before { content: "Nome:"; }
    .leads-table td:nth-of-type(2)::before { content: "Empresa:"; }
    .leads-table td:nth-of-type(3)::before { content: "Cargo:"; }
    .leads-table td:nth-of-type(4)::before { content: "Email:"; }
    .leads-table td:nth-of-type(5)::before { content: "Urgência:"; }
    .leads-table td:nth-of-type(6)::before { content: "Reunião:"; }
    .leads-table td:nth-of-type(7)::before { content: "Notas:"; }
    .leads-table td:nth-of-type(8)::before { content: "Fase:"; }
    .leads-table td:nth-of-type(9)::before { content: "Ações:"; }

    .leads-table .status-badge {
        display: inline-block; /* Keep badge styling */
        margin-top: 5px; /* Space from label */
    }

    .leads-table .actions-column {
        text-align: center; /* Center actions on mobile */
        display: flex; /* Use flexbox for button alignment */
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px; /* Space between buttons */
        padding-top: 15px;
    }
}

/* --- New Styles for Expandable Leads Table --- */

/* Adjust default table cell padding for primary row */
.leads-table tbody td {
    padding: 12px 15px; /* Slightly reduced horizontal padding for primary cells */
}

/* Expander column and icon */
th.column-expander,
td.column-expander {
    width: 40px; /* Fixed width for the icon column */
    text-align: center;
    padding: 10px 5px; /* Adjust padding for icon cell */
    cursor: pointer;
}

td.column-expander .expand-icon {
    transition: transform 0.3s ease;
    color: #555; /* A subtle color for the icon */
    font-size: 0.9em;
}

.lead-row.expanded .expand-icon {
    transform: rotate(180deg); /* Rotate icon when expanded */
    color: #3498db; /* Blue when expanded */
}

/* Style for the hidden details row */
.lead-details-row {
    display: none; /* Initially hidden */
    background-color: #fcfcfc; /* Slightly different background for detail row */
    border-bottom: 2px solid #e0e0e0; /* Stronger separator below details */
    animation: fadeIn 0.3s ease-out; /* Simple fade-in animation */
}

.lead-details-row td {
    padding: 20px 30px; /* More generous padding for the details content */
    border-bottom: none; /* No internal border for the details row */
}

.lead-details-row .details-content {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Space between detail paragraphs */
}

.lead-details-row .details-content p {
    margin: 0; /* Remove default paragraph margins */
    font-size: 0.95em;
    line-height: 1.5;
    color: #444;
}

.lead-details-row .details-content strong {
    color: #2c3e50; /* Stronger color for labels */
    font-weight: 600;
    margin-right: 5px; /* Space between label and value */
}

.lead-details-row .details-meta {
    display: flex;
    flex-wrap: wrap; /* Allow meta items to wrap */
    gap: 15px 25px; /* Vertical and horizontal gap */
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px dashed #eee; /* Separator for meta details */
    font-size: 0.85em; /* Smaller font for meta info */
    color: #666;
}

.lead-details-row .details-meta span strong {
    font-weight: 500;
    color: #444;
}


/* Animation for fading in details */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Ensure current active row has distinct background */
.lead-row.expanded {
    background-color: #eaf5ff; /* Light blue background when expanded */
}

/* Text alignment for Actions column (center on desktop) */
th.text-center, td.text-center {
    text-align: center;
}

/* Adjustments for the Notes column (no longer a fixed width on primary view) */
.leads-table .notes-column {
    max-width: none; /* Remove max-width for the notes column in the initial view, as it's now in details */
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
}


/* --- New Styles for Leads List (leads.php) - Filtering & Sorting --- */

/* Filter Bar Container */
.filter-bar {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    margin-bottom: 25px;
    display: flex; /* Use flexbox for layout */
    justify-content: space-between;
    align-items: flex-end; /* Align items to the bottom */
    flex-wrap: wrap; /* Allow items to wrap on smaller screens */
    gap: 15px 20px; /* Vertical and horizontal gap between filter groups */
}

.filter-form {
    display: flex;
    flex-wrap: wrap;
    gap: 15px 20px;
    align-items: flex-end;
    width: 100%; /* Take full width of parent filter-bar */
}

.filter-group {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Allow groups to grow */
    min-width: 180px; /* Minimum width for filter groups */
}

.filter-group label {
    font-size: 0.9em;
    color: #666;
    margin-bottom: 5px;
    font-weight: 500;
}

.filter-bar input[type="text"],
.filter-bar select {
    padding: 10px;
    border-radius: 6px;
    border: 1px solid #ddd;
    font-size: 0.95em;
    width: 100%; /* Ensure inputs take full width of their group */
    box-shadow: inset 0 0 0 1px #e0e0e0; /* Match existing input style */
    transition: box-shadow 0.3s ease;
}

.filter-bar input[type="text"]:focus,
.filter-bar select:focus {
    box-shadow: inset 0 0 0 1px #3498db,
                0 0 0 3px rgba(52, 152, 219, 0.25);
}

.filter-bar .btn {
    align-self: flex-end; /* Align buttons to the bottom of the flex container */
    margin-top: 0; /* Override default button margin-top */
    white-space: nowrap; /* Prevent button text from wrapping */
}

/* Table Headers (Th) for Sorting */
.leads-table th {
    position: relative;
    white-space: nowrap; /* Keep header text on one line */
}

.leads-table th a {
    color: white; /* Keep link color consistent with header */
    text-decoration: none;
    display: flex; /* Use flex to align text and icon */
    align-items: center;
    gap: 8px; /* Space between text and icon */
}

.leads-table th a:hover {
    text-decoration: underline;
}

.leads-table th .sort-icon {
    font-size: 0.8em; /* Smaller icon */
    color: rgba(255, 255, 255, 0.7); /* Slightly muted white */
    transition: transform 0.2s ease;
}

/* --- New Style for Current User Row --- */
.leads-table tbody tr.current-user-row {
    background-color: #e6f7ff; /* Light blue background for highlighted row */
    font-weight: 500; /* Slightly bolder text */
    border-left: 5px solid #3498db; /* A distinct blue border on the left */
    box-shadow: 0 2px 8px rgba(52, 152, 219, 0.1); /* Subtle shadow for emphasis */
}

/* Ensure hover effect is still visible or adjusted */
.leads-table tbody tr.current-user-row:hover {
    background-color: #d9effa; /* A slightly darker blue on hover for current user */
}

/* If you also want the text within the row to be a bit more prominent */
.leads-table tbody tr.current-user-row td {
    color: #2c3e50; /* A darker text color for emphasis */
}

/* For mobile responsive view (if using the stacked table rows) */
@media (max-width: 768px) {
    .leads-table tr.current-user-row {
        /* On mobile, the row is a block, so border-left needs to be applied to the entire block */
        border: 1px solid #e0e0e0; /* Reset default border first */
        border-left: 5px solid #3498db; /* Apply the blue border on left */
    }
}

/* --- New Styles for Activity Log Section (edit.php) --- */

.activity-log-section {
    margin-top: 30px; /* Space from the main form */
}

.activity-log-section h3 {
    margin-bottom: 20px; /* More space below heading */
}

.add-activity-form {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Space between form elements */
    padding-bottom: 20px;
}

.add-activity-form label {
    margin-bottom: 0; /* Adjust label margin as gap handles spacing */
    margin-top: 0;
}

.add-activity-form input,
.add-activity-form select,
.add-activity-form textarea {
    width: 100%; /* Ensure full width within its context */
    margin-bottom: 0; /* Remove default margin-bottom from general input rules */
}

.add-activity-form .validation-feedback {
    margin-top: 5px; /* Adjust feedback margin for this form */
    margin-bottom: 10px;
}

.add-activity-btn {
    align-self: flex-end; /* Align button to the right */
    width: auto; /* Allow button to size to content */
    margin-top: 15px;
}

.activity-divider {
    border: none;
    border-top: 1px dashed #e0e0e0; /* Dashed line separator */
    margin: 30px 0;
}

/* Activity Timeline Display */
.activity-timeline {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Space between activity items */
}

.activity-item {
    background-color: #fdfdfd; /* Light background for each activity */
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 15px 20px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
}

.activity-header {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping on small screens */
    align-items: center;
    gap: 10px; /* Space between header elements */
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f0f0; /* Separator for header */
}

.activity-type-badge {
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 0.8em;
    font-weight: 600;
    white-space: nowrap;
    text-transform: uppercase;
    color: #fff; /* Default white text */
    background-color: #6c757d; /* Default gray for unknown type */
}

/* Specific colors for activity types */
.type-note { background-color: #66b3ff; } /* Blue for notes */
.type-call { background-color: #28a745; } /* Green for calls */
.type-email-sent { background-color: #ff9933; } /* Orange for emails */
.type-meeting { background-color: #9266ff; } /* Purple for meetings */
.type-status-change { background-color: #34495e; } /* Dark blue for status changes */
.type-other { background-color: #aaaaaa; } /* Gray for other */


.activity-meta {
    font-size: 0.85em;
    color: #777;
    flex-grow: 1; /* Allow meta to take remaining space */
    text-align: right; /* Align meta to right if space permits */
}

.activity-meta strong {
    color: #444;
}

.activity-created-at {
    font-size: 0.8em;
    color: #999;
    margin-left: 10px;
}

.activity-description {
    font-size: 0.9em;
    color: #333;
    line-height: 1.6;
    word-wrap: break-word; /* Ensure long words break */
}

.no-activities-message {
    text-align: center;
    padding: 20px;
    font-size: 1em;
    color: #666;
    background-color: #fdfdfd;
    border: 1px dashed #e0e0e0;
    border-radius: 8px;
}

.no-activities-message i {
    margin-right: 10px;
    color: #3498db;
    font-size: 1.1em;
}

/* --- New Styles for Next Action Column --- */

.next-action-cell {
    /* Basic styling for the cell */
    font-size: 0.9em;
    line-height: 1.4;
}

.next-action-cell .action-desc {
    display: block; /* Ensure description and date are on separate lines */
    font-weight: 500;
    color: #444;
}

.next-action-cell .action-date {
    display: block;
    font-size: 0.85em;
    color: #777;
    margin-top: 2px;
}

/* Color coding for Next Action Status */
.next-action-cell.status-overdue .action-date {
    color: #e74c3c; /* Red for overdue */
    font-weight: 600;
}
.next-action-cell.status-due-today .action-date {
    color: #f39c12; /* Orange/Amber for due today */
    font-weight: 600;
}
.next-action-cell.status-upcoming .action-date {
    color: #2ecc71; /* Green for upcoming */
}


/* Ensure data-label for next action on mobile */
@media (max-width: 768px) {
    /* ... (existing responsive rules) ... */

    /* Adjusted grid for .lead-row on mobile to accommodate new column */
    .leads-table .lead-row {
        /*
        Previous: grid-template-columns: 1fr auto; (5 columns total: Name, Empresa, Email, Fase, Acoes, Expander)
        Now: Name, Empresa, Email, Next Action, Fase, Acoes, Expander (7 total)
        */
        grid-template-columns: 1fr auto; /* Still 2 main columns for stacking */
        grid-template-rows: auto auto auto auto auto; /* Add an extra row for Next Action */
        gap: 5px 10px;
    }

    /* Assign grid areas for each cell on mobile */
    .leads-table .lead-row td:first-child { /* Nome */
        grid-column: 1 / 2;
        grid-row: 1 / 2;
    }
    .leads-table .lead-row td:nth-child(2) { /* Empresa */
        grid-column: 1 / 2;
        grid-row: 2 / 3;
    }
    .leads-table .lead-row td:nth-child(3) { /* Email */
        grid-column: 1 / 2;
        grid-row: 3 / 4;
    }
    .leads-table .lead-row td:nth-child(4) { /* Próxima Ação */
        grid-column: 1 / 2;
        grid-row: 4 / 5;
    }
    .leads-table .lead-row td:nth-child(5) { /* Fase */
        grid-column: 1 / 2;
        grid-row: 5 / 6;
    }
    .leads-table .lead-row td:nth-child(6) { /* Ações */
        grid-column: 2 / 3;
        grid-row: 1 / 5; /* Spans multiple rows now */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-end;
        gap: 8px;
    }
    .leads-table .lead-row td:nth-child(7) { /* Expander Icon */
        grid-column: 2 / 3;
        grid-row: 5 / 6;
        text-align: right;
    }

    /* Update data-labels for all 7 primary table columns */
    .leads-table td:nth-of-type(1)::before { content: "Nome:"; }
    .leads-table td:nth-of-type(2)::before { content: "Empresa:"; }
    .leads-table td:nth-of-type(3)::before { content: "Email:"; }
    .leads-table td:nth-of-type(4)::before { content: "Próxima Ação:"; } /* New data-label */
    .leads-table td:nth-of-type(5)::before { content: "Fase:"; }
    .leads-table td:nth-of-type(6)::before { content: "Ações:"; }
    .leads-table td:nth-of-type(7)::before { content: none; } /* Expander column has no label */
}


/* Responsive adjustments for Activity Log */
@media (max-width: 768px) {
    .add-activity-btn {
        width: 100%; /* Full width button on small screens */
        align-self: center;
    }
    .activity-header {
        flex-direction: column; /* Stack header elements */
        align-items: flex-start;
        text-align: left;
        gap: 5px;
    }
    .activity-meta {
        text-align: left; /* Align meta to left when stacked */
        width: 100%;
        font-size: 0.8em;
    }
    .activity-created-at {
        margin-left: 0; /* Remove left margin when stacked */
        display: block; /* Make it a block element */
    }
}

/* Responsive adjustments for Filter Bar */
@media (max-width: 768px) {
    .filter-bar {
        flex-direction: column; /* Stack filters vertically */
        align-items: stretch; /* Stretch items to full width */
        gap: 20px; /* Increase gap between stacked groups */
    }

    .filter-form {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-group {
        min-width: unset; /* Remove min-width to allow shrinking */
        width: 100%; /* Take full width */
    }

    .filter-bar .btn {
        width: 100%; /* Full width buttons */
        margin-top: 10px; /* Add margin above buttons */
    }

    /* Adjust data labels for responsive table view */
    .leads-table td:nth-of-type(1)::before { content: "Nome:"; }
    .leads-table td:nth-of-type(2)::before { content: "Empresa:"; }
    .leads-table td:nth-of-type(3)::before { content: "Email:"; }
    .leads-table td:nth-of-type(4)::before { content: "Fase:"; }
    .leads-table td:nth-of-type(5)::before { content: "Ações:"; }
    /* No data-label for the expander column on mobile */
    .leads-table td:nth-of-type(6)::before { content: none; } /* Explicitly hide for expander */

    /* Ensure specific data-label for details row works if needed, this is for original columns */
    .lead-details-row td p strong {
        display: inline-block; /* Keep label and value on same line, or adjust if stacking preferred */
        min-width: 80px; /* Give space for label */
    }
    .lead-details-row .details-meta span strong {
        min-width: 120px; /* Adjust for meta labels */
    }
}

@media (max-width: 480px) {
    .filter-bar {
        padding: 15px;
    }
}

/* ... existing CSS ... */

@media (max-width: 768px) {
    /* ... existing responsive rules ... */

    /* Leads Table Responsive adjustments (apply these to manage_users table too) */
    .leads-table thead {
        display: none;
    }

    .leads-table, .leads-table tbody, .leads-table tr, .leads-table td {
        display: block;
        width: 100%;
    }

    .leads-table tr {
        margin-bottom: 15px;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
        padding: 15px;
        background-color: #fff;
    }
    .leads-table tr:hover {
        background-color: #f1f6ff;
    }

    .leads-table td {
        text-align: right;
        padding: 10px 15px;
        border-bottom: 1px dashed #eee;
        position: relative;
        padding-left: 50%;
    }

    .leads-table td:last-child {
        border-bottom: none;
    }

    .leads-table td::before { /* General rule for all tables using this structure */
        content: attr(data-label);
        position: absolute;
        left: 15px;
        width: calc(50% - 30px);
        padding-right: 10px;
        white-space: nowrap;
        text-align: left;
        font-weight: 600;
        color: #333;
    }

    /* Specific data-labels for manage_users.php table columns */
    /* This overrides the general leads.php labels for this specific table if there's overlap in nth-of-type */
    .leads-table td:nth-of-type(1)::before { content: "ID:"; } /* For manage_users.php's ID column */
    .leads-table td:nth-of-type(2)::before { content: "Utilizador:"; } /* For manage_users.php's User column */
    .leads-table td:nth-of-type(3)::before { content: "Função:"; } /* For manage_users.php's Role column */
    .leads-table td:nth-of-type(4)::before { content: "Ações:"; } /* For manage_users.php's Actions column */

    /* Ensure actions column buttons don't float and are centered */
    .leads-table .actions-column {
        text-align: center; /* Center actions on mobile */
        display: flex; /* Use flexbox for button alignment */
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px; /* Space between buttons */
        padding-top: 15px;
    }
}

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

@media (max-width: 768px) {
    /* Existing responsive table styles for .leads-table tbody, tr, td are generally good. */
    /* Adjust specific data-labels to only show essential ones on mobile, others hidden in expandable view */
    
    .leads-table thead {
        display: none; /* Hide table headers on small screens */
    }

    /* Primary row on mobile */
    .leads-table .lead-row {
        display: grid; /* Use grid for more control on mobile */
        grid-template-columns: 1fr auto; /* Name/Company/Email take main width, actions on right */
        grid-template-rows: auto auto auto; /* Name, Company, Email on separate rows */
        gap: 5px 10px; /* Gap between grid items */
        padding: 15px 20px; /* Adjusted padding */
        position: relative;
    }
    
    .leads-table .lead-row td {
        border-bottom: none; /* Remove individual cell borders */
        padding: 0; /* Reset padding for grid cells */
        text-align: left; /* Default text align */
    }

    .leads-table .lead-row td:first-child { /* Name */
        font-weight: 600;
        font-size: 1.1em;
        grid-column: 1 / 2;
        grid-row: 1 / 2;
    }
    .leads-table .lead-row td:nth-child(2) { /* Empresa */
        grid-column: 1 / 2;
        grid-row: 2 / 3;
        color: #666;
        font-size: 0.9em;
    }
    .leads-table .lead-row td:nth-child(3) { /* Email */
        grid-column: 1 / 2;
        grid-row: 3 / 4;
        font-size: 0.9em;
        color: #3498db;
    }
    .leads-table .lead-row td:nth-child(4) { /* Fase de Follow-Up (Status Badge) */
        grid-column: 1 / 2;
        grid-row: 4 / 5;
        margin-top: 5px;
    }
    .leads-table .lead-row td:nth-child(5) { /* Ações */
        grid-column: 2 / 3;
        grid-row: 1 / 4;
        display: flex; /* Make buttons stack vertically */
        flex-direction: column;
        justify-content: center;
        align-items: flex-end; /* Align to right of grid area */
        gap: 8px; /* Space between buttons */
        padding-top: 0; /* Remove padding */
    }
    .leads-table .lead-row td:nth-child(6) { /* Expander Icon */
        grid-column: 2 / 3;
        grid-row: 4 / 5;
        text-align: right;
        padding-right: 0;
    }

    /* Hide data-label on mobile primary rows as we re-arranged with grid */
    .leads-table .lead-row td::before {
        content: none;
    }

    /* Details row on mobile */
    .lead-details-row td {
        padding: 15px 20px;
    }

    .lead-details-row .details-content {
        flex-direction: column; /* Ensure stacked for small screens */
        gap: 8px;
    }
    .lead-details-row .details-meta {
        flex-direction: column; /* Stack meta items vertically */
        gap: 10px;
    }
}

@media (max-width: 480px) {
    .container {
        margin: 15px;
        padding: 15px;
    }
    h2 {
        font-size: 1.5em;
    }
    .checkbox-group, .radio-group {
        flex-direction: column;
        gap: 8px;
    }
    .navbar .nav-links {
        gap: 10px;
    }
    .form-section h3 {
        font-size: 1.2em;
    }
}

/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
    .container {
        margin: 20px;
        padding: 20px;
    }
    h2 {
        font-size: 1.8em;
    }
    .submit-btn {
        padding: 12px 15px;
        font-size: 16px;
    }

    /* Navbar Responsiveness */
    .navbar {
        flex-direction: column; /* Stack logo and links on small screens */
        padding: 15px 20px;
    }

    .navbar .logo {
        margin-bottom: 15px; /* Space between logo and links */
    }

    .navbar .nav-links {
        flex-wrap: wrap; /* Allow links to wrap */
        justify-content: center; /* Center links when wrapped */
        gap: 15px;
    }

    .navbar .nav-links a {
        padding: 5px 10px; /* Adjust padding for smaller screens */
    }

    .form-section {
        padding: 20px;
    }
    .form-section h3 {
        font-size: 1.4em;
    }
}

@media (max-width: 480px) {
    .container {
        margin: 15px;
        padding: 15px;
    }
    h2 {
        font-size: 1.5em;
    }
    .checkbox-group, .radio-group {
        flex-direction: column;
        gap: 8px;
    }
    .navbar .nav-links {
        gap: 10px; /* Reduce gap further on very small screens */
    }
    .form-section h3 {
        font-size: 1.2em;
    }

    /* Login Page Responsiveness */
    .login-container {
        padding: 30px 20px; /* Adjust padding for very small screens */
    }
    .login-container .logo {
        max-width: 150px;
    }
    .login-container h2 {
        font-size: 1.8em;
    }
}

/* --- New Styles for Dashboard Summary --- */
.dashboard-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Responsive grid for cards */
    gap: 20px;
    margin-bottom: 30px;
    padding: 15px; /* Add padding to the container */
    background-color: #fcfcfc;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.summary-card {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
}

.summary-card i {
    font-size: 1.8em;
    color: #3498db; /* A default blue icon color */
    margin-bottom: 5px;
}

.summary-card span {
    font-size: 0.9em;
    color: #666;
}

.summary-card strong {
    font-size: 1.5em;
    color: #2c3e50;
    font-weight: 700;
}

/* Specific colors for summary cards */
.summary-card.total i { color: #34495e; } /* Dark blue/grey */
.summary-card.new i { color: #f39c12; } /* Orange */
.summary-card.in-progress i { color: #2980b9; } /* Deeper blue */
.summary-card.completed i { color: #27ae60; } /* Green */


/* --- New Styles for Reminder Alert --- */
.alert.reminder-alert {
    background-color: #fff3cd; /* Light yellow background */
    color: #856404; /* Dark yellow text */
    border: 1px solid #ffeeba; /* Yellow border */
    display: flex;
    flex-direction: column; /* Stack header and list */
    align-items: flex-start; /* Align text to left */
    gap: 10px; /* Space between alert header and list */
    margin-bottom: 25px; /* Space below alert */
    padding: 20px;
}

.alert.reminder-alert i.fa-bell {
    font-size: 1.5em;
    margin-right: 15px;
    color: #f39c12; /* Match the yellow theme */
}

.alert.reminder-alert .reminder-list {
    list-style: none; /* Remove default bullet points */
    padding: 0;
    margin: 0;
    width: 100%;
}

.alert.reminder-alert .reminder-list li {
    margin-bottom: 8px;
    font-size: 0.95em;
}

.alert.reminder-alert .reminder-list li a {
    color: inherit; /* Inherit text color from alert */
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.alert.reminder-alert .reminder-list li a:hover {
    text-decoration: underline;
    color: #4CAF50; /* A pleasant hover color */
}

.alert.reminder-alert .reminder-list li strong {
    color: #2c3e50; /* Stronger color for names/companies */
}

/* Specific colors for reminder list items */
.alert.reminder-alert .reminder-list li.overdue {
    color: #a70000; /* Darker red for overdue in alert */
}
.alert.reminder-alert .reminder-list li.due-today {
    color: #b06e01; /* Darker orange for due today in alert */
}
.alert.reminder-alert .reminder-list li.due-tomorrow {
    color: #1a5e1a; /* Darker green for due tomorrow in alert */
}
.alert.reminder-alert .reminder-list li .reminder-date {
    font-size: 0.8em;
    font-weight: normal;
    margin-left: 5px;
}

/* Close button for reminder alert */
.alert.reminder-alert .close-alert {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 2em; /* Make it more prominent */
    line-height: 1;
    cursor: pointer;
    background: none;
    border: none;
    color: #856404; /* Inherit dark yellow */
}

.alert.reminder-alert .close-alert:hover {
    color: #000;
}


/* Add new status for 'due tomorrow' in table */
.next-action-cell.status-due-tomorrow .action-date {
    color: #6495ED; /* Cornflower blue for due tomorrow */
    font-weight: 600;
}


/* Responsive adjustments for Dashboard Summary & Reminders */
@media (max-width: 768px) {
    .dashboard-summary {
        grid-template-columns: 1fr 1fr; /* 2 columns on tablets */
        gap: 15px;
        padding: 10px;
    }
    .summary-card {
        padding: 15px;
    }
    .summary-card i {
        font-size: 1.5em;
    }
    .summary-card strong {
        font-size: 1.2em;
    }

    .alert.reminder-alert {
        padding: 15px;
    }
    .alert.reminder-alert .fa-bell {
        margin-right: 10px;
        font-size: 1.2em;
    }
    .alert.reminder-alert .close-alert {
        font-size: 1.5em;
        top: 5px;
        right: 10px;
    }
}

@media (max-width: 480px) {
    .dashboard-summary {
        grid-template-columns: 1fr; /* Single column on mobile */
    }
    .summary-card {
        flex-direction: row; /* Align icon and text horizontally */
        justify-content: space-between;
        align-items: center;
        text-align: left;
    }
    .summary-card span {
        flex-grow: 1;
        margin-left: 10px;
    }
    .summary-card strong {
        white-space: nowrap; /* Prevent number from wrapping */
    }

    .alert.reminder-alert {
        font-size: 0.9em;
    }
    .alert.reminder-alert .reminder-list li {
        margin-bottom: 5px;
        font-size: 0.85em;
    }
    .alert.reminder-alert .reminder-list li .reminder-date {
        display: block; /* Force date to new line on very small screens */
    }
}

/* --- New Styles for Tabbed Interface --- */

.tabs-nav {
    display: flex;
    flex-wrap: wrap; /* Allows tabs to wrap on smaller screens */
    margin-bottom: 25px;
    border-bottom: 2px solid #e0e0e0; /* Underline for the tab navigation */
    gap: 5px; /* Small gap between buttons */
    overflow-x: auto; /* Enable horizontal scrolling for tabs if too many */
    -webkit-overflow-scrolling: touch; /* Smoother scrolling on iOS */
    padding-bottom: 5px; /* Space for the scrollbar/shadow if needed */
}

.tab-button {
    background-color: #f8f8f8; /* Light background for inactive tabs */
    color: #666;
    padding: 12px 20px;
    border: 1px solid #e0e0e0;
    border-bottom: none; /* No bottom border to blend with tab-nav underline */
    border-radius: 8px 8px 0 0; /* Rounded top corners */
    cursor: pointer;
    font-size: 0.95em;
    font-weight: 500;
    transition: all 0.3s ease;
    white-space: nowrap; /* Prevent tab text from wrapping */
    display: flex;
    align-items: center;
    gap: 8px; /* Space between icon and text */
}

.tab-button:hover {
    background-color: #eef2f5; /* Lighter background on hover */
    color: #3498db;
    border-color: #d0d0d0;
}

.tab-button.active {
    background-color: #ffffff; /* White background for active tab */
    color: #2c3e50; /* Darker text for active tab */
    border-color: #e0e0e0;
    border-bottom-color: #ffffff; /* Make bottom border white to "cut out" the nav underline */
    font-weight: 600;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05); /* Subtle shadow on active tab */
    position: relative;
    z-index: 1; /* Ensure active tab is above the line */
}

.tab-button i {
    font-size: 1.1em;
    color: inherit; /* Inherit color from button text */
}


.tab-panel {
    display: none; /* Hidden by default, JavaScript controls visibility */
    padding: 0; /* form-section inside will provide padding */
    /* No border or shadow here, form-section will provide it */
}

.tab-panel.active {
    display: block;
}

/* Ensure the submit button for the main form is positioned correctly within tabs */
.main-form-submit-btn {
    margin-top: 30px; /* Space above the button, outside the tab panels */
    display: block; /* Ensures it starts visible, JS will toggle */
}

/* Hide form-section heading margins within tab panels to reduce double spacing */
.tab-panel .form-section {
    margin-top: 0; /* Remove top margin if first element in tab-panel */
    margin-bottom: 0; /* Remove bottom margin if last element in tab-panel */
    box-shadow: none; /* Remove shadow from inner form-section */
    border: none; /* Remove border from inner form-section */
    padding: 0; /* Remove padding from inner form-section as tab-panel has it */
}
/* Re-add padding/shadow to the tab-panel itself if removing from inner form-section */
.tab-panel {
    padding: 25px; /* Padding for the tab content area */
    background-color: #ffffff;
    border: 1px solid #e0e0e0; /* Border around the entire tab panel content */
    border-top: none; /* No top border, as tab button provides it */
    border-radius: 0 0 8px 8px; /* Rounded bottom corners */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Consistent shadow for the content area */
    margin-bottom: 20px; /* Space below the tab panel */
}


/* Adjust small-text-hint style for better spacing */
.small-text-hint {
    font-size: 0.85em;
    color: #777;
    margin-top: -10px; /* Pull closer to the input it hints for */
    margin-bottom: 15px; /* Space before next label */
    display: block; /* Ensure it takes its own line */
}

/* Adjust checkbox group layout for small hints below them */
.checkbox-group + .small-text-hint {
    margin-top: -5px; /* Adjust if the hint is directly after a checkbox group */
}


/* Responsive adjustments for tabs */
@media (max-width: 768px) {
    .tabs-nav {
        flex-direction: column; /* Stack tabs vertically on mobile */
        border-bottom: none; /* No bottom border when stacked */
        gap: 1px; /* Closer together when stacked */
        padding-bottom: 0;
    }
    .tab-button {
        border-radius: 0; /* Square corners when stacked */
        border-bottom: 1px solid #e0e0e0; /* Add back bottom border between stacked tabs */
        width: 100%; /* Full width */
        justify-content: flex-start; /* Align text left */
    }
    .tab-button:last-child {
        border-bottom: none;
    }
    .tab-button.active {
        border-bottom-color: #e0e0e0; /* Keep border color consistent when active and stacked */
        box-shadow: none; /* No side shadow when stacked */
    }
    .tab-panel {
        border-radius: 8px; /* Maintain rounded corners for the whole panel */
        margin-top: 15px; /* Add some space above the panel itself */
        border-top: 1px solid #e0e0e0; /* Add top border back */
    }
}