body {
    font-family: sans-serif;
    line-height: 1.6;
    margin: 20px;
    background-color: #f4f4f4;
    color: #333;
}

h1, h2, h3 {
    color: #0056b3;
}

a {
    color: #0056b3;
    text-decoration: none;
}
a:hover {
    /* text-decoration: underline; */ /* Remove underline for general links if buttons handle it */
    opacity: 0.8; /* Slight fade on hover for non-button links */
}

/* --- Button Styles --- */
.btn {
    display: inline-block; /* Allows padding and margins */
    padding: 8px 15px;
    margin: 5px 5px 5px 0; /* Add some spacing */
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none; /* Remove underline from links styled as buttons */
    font-size: 0.95em;
    text-align: center;
    vertical-align: middle;
    transition: background-color 0.2s ease-in-out, opacity 0.2s ease-in-out;
    color: white; /* Default text color for buttons */
    background-color: #6c757d; /* Default background (grey) */
}

.btn:hover {
    opacity: 0.85; /* Consistent hover effect */
    text-decoration: none; /* Ensure no underline on hover */
}

/* Specific Button Colors */
.btn-primary {
    background-color: #007bff;
    color: white;
}
.btn-primary:hover {
    background-color: #0056b3;
    opacity: 1; /* Override general hover opacity if changing background */
}

.btn-secondary {
    background-color: #6c757d;
    color: white;
}
.btn-secondary:hover {
    background-color: #5a6268;
     opacity: 1;
}

.btn-success {
    background-color: #28a745;
    color: white;
}
.btn-success:hover {
    background-color: #218838;
     opacity: 1;
}

.btn-warning {
    background-color: #ffa500;
    font-weight: bold;
}
.btn-warning:hover {
    background-color: #e0a800;
     opacity: 1;
}

.btn-danger {
    background-color: #dc3545;
    color: white;
}
.btn-danger:hover {
    background-color: #c82333;
     opacity: 1;
}

.btn-info {
    background-color: #17a2b8;
    color: white;
}
.btn-info:hover {
    background-color: #138496;
     opacity: 1;
}

/* Delete Button Specific Style */
.btn-delete {
    background-color: #dc3545; /* Red color */
    color: white;
}
.btn-delete:hover {
    background-color: #c82333; /* Darker red on hover */
    opacity: 1;
}


/* Adjust existing search button to use the new style */
.search button {
    /* Remove specific styles, rely on .btn classes */
}


/* --- Layout & Other Styles --- */

/* Remove old combined container style */
/*
.stats-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-bottom: 30px;
    padding: 15px;
    background-color: #e9ecef;
    border-radius: 5px;
}
*/

/* New Row Styles */
.top-bar, .category-section, .action-buttons-section {
    background-color: #e9ecef;
    padding: 15px;
    margin-bottom: 20px; /* Space between rows */
    border-radius: 5px;
}

.top-bar {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    justify-content: space-between; /* Push items to ends */
    align-items: flex-start; /* Align items to the top */
    gap: 20px; /* Space between stats and search */
}

.stats-count {
    /* Takes necessary space */
    flex: 1; /* Adjust as needed */
}
.stats-count h2, .search h2 {
    margin-top: 0; /* Remove default top margin */
}

.search {
    flex: 1; /* Allow search to take more space if needed */
}

.category-section h3 {
    margin-top: 0;
    margin-bottom: 15px;
}

.action-buttons-section {
    /* Simple container for buttons */
    background-color: #e9ecef; /* Match other sections */
}
.action-buttons-section .btn {
    margin-right: 10px; /* Space between buttons */
}


/* Keep existing stats list styling if needed, but it's now inside category-grid */
/*
.stats ul {
    list-style: none;
    padding: 0;
}
.stats li {
    margin-bottom: 5px;
}

/* Style for Category Grid Layout */
.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); /* Adjust minmax as needed */
    gap: 10px; /* Spacing between grid items */
    list-style: none; /* Ensure no bullet points */
    padding: 0; /* Ensure no default padding */
    margin-top: 10px; /* Add some space above the grid */
}

.category-grid li {
    background-color: #fff; /* Give items a background */
    /* padding: 10px; */ /* Remove padding from li */
    border: 1px solid #ddd;
    border-radius: 4px;
    text-align: center;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    margin-bottom: 0; /* Override the default margin from .stats li */
}

.category-grid li a {
    text-decoration: none;
    color: #0056b3;
    font-weight: bold;
    display: block; /* Make the link fill the item */
    padding: 10px; /* Add padding to the link itself */
    height: 100%; /* Ensure link fills the height */
    box-sizing: border-box; /* Include padding in height calculation */
}
.category-grid li a:hover {
    text-decoration: underline;
    opacity: 1; /* Override general link hover */
}

.category-grid li span { /* Style for the count */
    display: block;
    font-size: 0.9em;
    color: #555;
    margin-top: 3px;
}

/* Ensure the "Voir toutes les catégories" link is handled - maybe outside the grid? */
/* Or style it differently if it remains inside */
.category-grid li.all-categories-link {
    background-color: #e9ecef; /* Different background */
    border: 1px dashed #ccc;
}
.category-grid li.all-categories-link a {
    font-weight: normal;
}


.search form {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}
.search input[type="text"] {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    flex: 1;
}
.search button {
    padding: 8px 15px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
/* Remove specific hover for search button */
/* .search button:hover {
    background-color: #0056b3;
} */

.clip-list {
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
}

th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

th {
    background-color: #f2f2f2;
    font-weight: bold;
}

tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}
tbody tr:hover {
    background-color: #eaf6ff;
}

/* Specific styles from manage_categories.php to integrate or override */
/* These might be redundant now with .btn classes */
/*
.form-section button { padding: 10px 15px; background-color: #28a745; color: white; border: none; border-radius: 4px; cursor: pointer; margin-right: 10px; }
.form-section button:hover { background-color: #218838; }
.form-section .cancel-button { padding: 10px 15px; background-color: #6c757d; color: white; border: none; border-radius: 4px; cursor: pointer; text-decoration: none; }
.form-section .cancel-button:hover { background-color: #5a6268; }
.action-links a { margin-right: 10px; text-decoration: none; }
.action-links a.activate { color: green; }
.action-links a.deactivate { color: orange; }
.action-links a.delete { color: red; }
*/

/* Ensure action links in tables also look like buttons if desired */
.action-links .btn {
    padding: 5px 10px; /* Smaller padding for table buttons */
    font-size: 0.9em;
}

/* --- Scroll to Top Button --- */
#scrollTopBtn {
    display: none; /* Hidden by default */
    position: fixed; /* Keep it in place */
    bottom: 20px; /* Distance from bottom */
    right: 30px; /* Distance from right */
    z-index: 99; /* Make sure it's on top */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: #007bff; /* Primary button color */
    color: white; /* White text */
    cursor: pointer; /* Pointer/hand icon */
    padding: 10px 12px; /* Some padding */
    border-radius: 50%; /* Circular shape */
    font-size: 18px; /* Increase font size */
    box-shadow: 0 2px 5px rgba(0,0,0,0.3); /* Add shadow */
    transition: opacity 0.3s, visibility 0.3s; /* Smooth transition */
    opacity: 0; /* Start invisible for transition */
    visibility: hidden;
}

#scrollTopBtn:hover {
    background-color: #0056b3; /* Darker blue on hover */
    opacity: 1; /* Ensure full opacity on hover */
}

#scrollTopBtn.show {
    display: block; /* Make it visible */
    opacity: 1;
    visibility: visible;
}

/* --- Pagination Styles --- */
.pagination {
    margin-top: 20px;
    text-align: center;
}
.pagination span {
    display: block;
    margin-bottom: 10px;
    color: #555;
    font-size: 0.9em;
}
.pagination ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: inline-block; /* Center the list */
}
.pagination li {
    display: inline-block; /* Display items horizontally */
    margin: 0 3px; /* Spacing between items */
}
.pagination li a,
.pagination li span { /* Style both links and spans (like '...') */
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-decoration: none;
    transition: background-color 0.2s;
}
.pagination li a:hover {
    background-color: #00cc77;
    text-decoration: none;
    color: white;
    opacity: 1;
}
.pagination li.active span.current-page {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
    cursor: default;
}
.pagination li.disabled span {
    color: #6c757d;
    background-color: #e9ecef;
    border-color: #ddd;
    cursor: default;
    opacity: 0.6;
}
/* Ensure buttons within pagination look consistent */
.pagination li a.btn,
.pagination li span.btn {
    padding: 6px 12px; /* Adjust padding if needed */
    margin: 0; /* Remove default btn margin */
}
.pagination li.disabled span.btn.disabled {
     opacity: 0.6; /* Ensure disabled buttons are faded */
}