@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap');

:root {
    --color-white: #ffffff;
    --color-light-gray: #f8f8f8;
    --color-soft-green: #4CAF50; /* Materialize Green */
    --color-dark-gray: #333333;
    --color-medium-gray: #666666;
    --border-radius-soft: 12px; /* Custom, can be applied selectively */
    --box-shadow-light: 0 4px 8px rgba(0, 0, 0, 0.05); /* Custom */
}

/* Global Resets and Base Styles */
* {
    box-sizing: border-box;
    /* Materialize handles margin/padding resets for most elements */
}

body {
    font-family: 'Open Sans', sans-serif; /* Overrides Materialize's Roboto if Open Sans is preferred */
    line-height: 1.6;
    color: var(--color-dark-gray);
    background-color: var(--color-white);
    display: flex; /* For sticky footer with Materialize */
    min-height: 100vh;
    flex-direction: column;
}

main {
    flex: 1 0 auto; /* For sticky footer with Materialize */
}

body.no-scroll { /* Used by Materialize sidenav JS */
    overflow: hidden;
}

/* Keep custom h1-h6 styles if Materialize defaults are not preferred */
/* Or remove if Materialize defaults are fine */
h1, h2, h3, h4, h5, h6 {
    color: var(--color-dark-gray);
    /* Materialize provides its own heading styles and margins */
    /* Add custom margins if needed, e.g., margin-top: 1.5rem; margin-bottom: 1rem; */
}


p {
    /* Materialize provides base paragraph styling */
    /* margin-bottom: 15px; */ /* Adjust if needed */
}

a {
    color: var(--color-soft-green);
    text-decoration: none;
}

a:hover {
    /* text-decoration: underline; */ /* Materialize might handle this differently */
}

/* Custom Styles for Materialize Integration - PAME Academy Specific */

/* Logo (from previous inline style in layout) */
#site-logo-materialize {
    height: 130px;
    margin-top: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    margin-left: 20px; /* Updated left margin */
    vertical-align: middle; /* Helps align if next to text */
}

/* Header Banner (from previous inline style in layout) */
.header-banner-materialize {
    width: 100%;
    height: 250px;
    overflow: hidden;
}

.header-banner-materialize img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Main Navigation Bar (Materialize) */
nav.main-nav-materialize {
    background-color: var(--color-soft-green); /* Theme color */
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2); /* Standard Materialize shadow */
}

nav.main-nav-materialize .brand-logo { /* For text logo if used */
    padding-left: 20px;
}
nav.main-nav-materialize ul a {
    font-size: 1rem; /* Materialize default, adjust if needed */
}
nav.main-nav-materialize ul a:hover {
    background-color: rgba(0,0,0,0.1); /* Standard Materialize hover */
}


/* Footer (from previous inline style in layout) */
footer.page-footer.pame-footer { /* Be specific to override Materialize defaults if needed */
    background-color: var(--color-dark-gray);
    color: var(--color-light-gray);
    padding-top: 20px; /* Materialize page-footer has padding */
    padding-bottom: 20px;
}
.pame-footer .container p {
    margin: 0;
    text-align: center;
}


/* Custom Card Styling (if Materialize defaults need override) */
.card, .card-panel {
    border-radius: var(--border-radius-soft); /* Apply custom border-radius */
    /* box-shadow: var(--box-shadow-light); */ /* Materialize has its own shadows, use this to override if needed */
}

/* Custom Button Styling (if Materialize defaults need override) */
/* Example: Forcing custom border radius on Materialize buttons */
.btn, .btn-large, .btn-small {
    border-radius: var(--border-radius-soft);
    /* text-transform: none; */ /* Materialize buttons are uppercase by default */
}
.btn.green, .btn-large.green, .btn-small.green {
    background-color: var(--color-soft-green) !important; /* Ensure theme color is used */
}
.btn.green:hover, .btn-large.green:hover, .btn-small.green:hover {
    background-color: #45a049 !important; /* Darker shade of theme green */
}


/* Styles for Backend (Non-Materialize) - Copied from old style.css if they were there */
/* These styles are for the backend layout which is NOT using MaterializeCSS */
/* The backend layout has its own inline styles, so these might not be needed unless shared */

/* Example: If backend had specific .container, it would be different from Materialize .container */
/* .backend-container { ... } */


/* General utility classes (if any were custom and still needed) */
/* .center-align is a Materialize class */
/* .responsive-img is a Materialize class */


/* --- Styles from old style.css that might be for backend or general utilities --- */
/* These are kept in case backend relies on them, review and remove if not used by backend */

/* Forms (old custom, backend might use if not using Materialize forms) */
/*
.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: var(--border-radius-soft);
    font-family: 'Open Sans', sans-serif;
    font-size: 1em;
}

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

/* Responsive Utilities (old custom, backend might use) */
/*
.flex-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}
.grid-container.two-columns {
    grid-template-columns: 1fr 1fr;
}
*/

/* The backend layout uses its own inline styles for .sidebar, .main-content, .toggle-btn */
/* So, no need to repeat them here unless those inline styles are removed from backend.php */

/* --- Backend Sidenav Styles --- */
.backend-layout ul.sidenav {
    background-color: #333;
}
.backend-layout .sidenav .logo-container {
    padding: 20px;
    text-align: center;
    background-color: #ffffff; /* Ajout d'un fond blanc */
    margin: 15px; /* Ajout de marge */
    border-radius: 8px; /* Bords arrondis */
}
.backend-layout .sidenav .logo {
    max-width: 100%;
    height: auto;
}
.backend-layout .sidenav li > a, .backend-layout .sidenav .collapsible-header {
    color: #fff;
    font-weight: 500;
    padding: 0 32px;
    display: flex;
    align-items: center;
    height: 48px;
    line-height: 48px;
}
.backend-layout .sidenav .material-icons {
    color: #fff;
}
.backend-layout .sidenav .material-icons {
    color: #fff;
    margin-right: 24px;
}
.backend-layout .sidenav .collapsible-header .material-icons {
    margin-right: 0;
}
.backend-layout .sidenav li > a:hover, .backend-layout .sidenav .collapsible-header:hover {
    background-color: rgba(255, 255, 255, 0.1);
}
.backend-layout .sidenav li.active > a {
    background-color: #1a2a6c;
}
.backend-layout .sidenav .collapsible-body {
    background-color: #2a2a2a;
}
.backend-layout .sidenav .collapsible-body li a {
    padding: 0 48px;
    color: rgba(255, 255, 255, 0.8);
}
.backend-layout .sidenav .divider {
    background-color: rgba(255, 255, 255, 0.2);
}
.backend-layout .main-content {
    flex-grow: 1;
    padding-left: 300px;
}
.backend-layout .main-content header {
    padding: 0 24px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.backend-layout .content-area {
    padding: 24px;
}
.backend-layout .sidenav-trigger {
    color: #333;
}
@media (max-width: 992px) {
    .backend-layout .main-content {
        padding-left: 0;
    }
}

@media (min-width: 993px) {
    .sidenav-trigger {
        display: none !important;
    }
}

/* --- Custom Pagination Styles for Materialize (v4) --- */
.pagination {
    background-color: transparent !important;
}
.pagination li {
    background-color: transparent;
}
.pagination li.active {
    background-color: var(--color-soft-green);
}
.pagination li.active a {
    color: #fff;
}
.pagination li a {
    color: var(--color-dark-gray);
    font-size: 1rem;
    padding: 0 10px;
}
.pagination li.disabled a {
    color: #9e9e9e;
}
.pagination li i {
    font-size: 2rem;
    vertical-align: middle;
}