/*
   Feuille de styles principale - Application de Gestion des Salaires Le Sims
   Basée sur une palette de couleurs violette/magenta du logo
*/

:root {
    /* Palette de couleurs inspirée du logo */
    --primary: #9c27b0;         /* Violet principal */
    --primary-light: #d05ce3;   /* Violet clair */
    --primary-dark: #6a0080;    /* Violet foncé */
    --accent: #e91e63;          /* Accent magenta */
    --accent-light: #ff6090;    /* Magenta clair */
    --accent-dark: #b0003a;     /* Magenta foncé */

    /* Couleurs neutres */
    --dark: #1e1e2f;            /* Fond sombre */
    --dark-light: #2d2d42;      /* Fond sombre légèrement plus clair */
    --gray-dark: #444;          /* Gris foncé */
    --gray: #888;               /* Gris moyen */
    --gray-light: #ccc;         /* Gris clair */
    --light: #f8f9fa;           /* Blanc cassé */

    /* Couleurs fonctionnelles */
    --success: #4caf50;         /* Vert pour succès */
    --info: #2196f3;            /* Bleu pour info */
    --warning: #ff9800;         /* Orange pour avertissement */
    --danger: #f44336;          /* Rouge pour danger/erreur */

    /* Variables de mise en page */
    --sidebar-width: 260px;
    --header-height: 60px;
    --border-radius: 10px;
    --card-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(156, 39, 176, 0.4);
    --transition-speed: 0.3s;
}

/* Reset et styles de base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--dark);
    color: var(--light);
    font-size: 14px;
    line-height: 1.5;
    height: 100vh;
    overflow: hidden;
}

ul {
    list-style: none;
}

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

button {
    cursor: pointer;
    border: none;
    outline: none;
    background: none;
}

input, select, textarea {
    font-family: inherit;
    border: none;
    outline: none;
    background: none;
}

/* Structure principale de l'application */
.app-container {
    display: flex;
    height: 100vh;
    width: 100%;
}

/* Barre latérale (Sidebar) */
.sidebar {
    width: var(--sidebar-width);
    height: 100%;
    background: linear-gradient(to bottom, var(--primary-dark), var(--dark));
    display: flex;
    flex-direction: column;
    color: white;
    transition: all var(--transition-speed);
    position: relative;
    z-index: 10;
}

.sidebar-header {
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.logo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.sidebar-header h2 {
    font-size: 1.5rem;
    font-weight: 600;
}

.sidebar-menu {
    flex: 1;
    padding: 1rem 0;
    overflow-y: auto;
}

.sidebar-menu ul li {
    padding: 0.75rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
    transition: all var(--transition-speed);
    border-left: 4px solid transparent;
}

.sidebar-menu ul li i {
    font-size: 1.2rem;
    width: 24px;
    text-align: center;
}

.sidebar-menu ul li span {
    font-weight: 500;
}

.sidebar-menu ul li:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.sidebar-menu ul li.active {
    background-color: rgba(255, 255, 255, 0.2);
    border-left-color: var(--accent);
}

.sidebar-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.8rem;
    color: var(--gray-light);
    text-align: center;
}

/* Contenu principal */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    position: relative;
}

/* En-tête */
.header {
    height: var(--header-height);
    background-color: var(--dark-light);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header-left {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.sidebar-toggle {
    color: var(--light);
    font-size: 1.2rem;
    display: none; /* Hidden by default, shown in media query */
}

.current-month h3 {
    font-size: 1rem;
    font-weight: 500;
    color: var(--gray-light);
}

.header-right {
    display: flex;
    align-items: center;
    gap: 1.5rem; /* Increased gap slightly */
}

.search-box {
    position: relative;
    /* Adjusted width or remove fixed width for flexibility */
    /* width: 300px; */
}

.search-box input {
    width: 100%;
    padding: 0.6rem 1rem 0.6rem 2.5rem;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    color: var(--light);
    transition: all var(--transition-speed);
    min-width: 200px; /* Added minimum width */
}

.search-box input::placeholder {
    color: var(--gray);
}

.search-box i {
    position: absolute;
    left: 0.8rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray);
}

.search-box input:focus {
    background-color: rgba(255, 255, 255, 0.15);
}

.actions {
    display: flex;
    gap: 0.5rem;
}

/* Boutons */
.btn {
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-weight: 500;
    display: inline-flex; /* Use inline-flex for better alignment */
    align-items: center;
    justify-content: center; /* Center content */
    gap: 0.5rem;
    transition: all var(--transition-speed);
    white-space: nowrap; /* Prevent button text wrapping */
}

.btn i {
    font-size: 0.9rem;
}

.btn-primary {
    background-color: var(--primary);
    color: white;
}

.btn-primary:hover {
    background-color: var(--primary-dark);
}

.btn-accent {
    background-color: var(--accent);
    color: white;
}

.btn-accent:hover {
    background-color: var(--accent-dark);
}

.btn-outline {
    border: 1px solid var(--primary);
    color: var(--primary);
    background: transparent;
}

.btn-outline:hover {
    background-color: rgba(156, 39, 176, 0.1);
}

/* --- Added: Button Small Size --- */
.btn-sm {
    padding: 0.25rem 0.75rem;
    font-size: 0.8rem;
}
.btn-sm i {
    font-size: 0.8rem;
}
/* --- End Button Small Size --- */

/* Zone de contenu */
.page-content {
    flex: 1;
    padding: 1.5rem;
    overflow-y: auto;
    background-color: var(--dark);
}

.page {
    display: none;
}

.page.active {
    display: block;
}

.page-header {
    margin-bottom: 1.5rem;
    display: flex; /* Added for alignment */
    justify-content: space-between; /* Added for alignment */
    align-items: center; /* Added for alignment */
    flex-wrap: wrap; /* Allow wrapping on small screens */
    gap: 1rem; /* Add gap between title and actions */
}

.page-header h1 {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--light);
}

.page-actions {
    display: flex;
    gap: 0.5rem;
}

/* Cartes statistiques */
.dashboard-stats, .stats-cards { /* Combined rule */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Adjusted min width */
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.stat-card {
    background: linear-gradient(to right, var(--dark-light), var(--dark));
    border-radius: var(--border-radius);
    padding: 1.5rem;
    display: flex;
    align-items: center;
    box-shadow: var(--card-shadow);
    transition: transform 0.3s;
    overflow: hidden; /* Prevent icon overflow */
}

.stat-card:hover {
    transform: translateY(-5px);
}

.stat-icon {
    flex-shrink: 0; /* Prevent icon from shrinking */
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(to bottom right, var(--primary), var(--primary-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(156, 39, 176, 0.4);
}

.stat-icon i {
    font-size: 1.5rem;
    color: white;
}

.stat-info {
     overflow: hidden; /* Prevent text overflow */
}

.stat-info h4 {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--gray-light);
    margin-bottom: 0.3rem;
    white-space: nowrap; /* Prevent wrapping */
    overflow: hidden;
    text-overflow: ellipsis;
}

.stat-info h2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--light);
    white-space: nowrap; /* Prevent wrapping */
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Graphiques */
.dashboard-charts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Adjusted min width */
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.chart-card {
    background-color: var(--dark-light);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    box-shadow: var(--card-shadow);
}

.chart-card h3 {
    font-size: 1.2rem;
    font-weight: 500;
    margin-bottom: 1rem;
    color: var(--light);
}

.chart-container {
    height: 300px;
    width: 100%;
    position: relative;
}

/* Placeholder for Charts */
.chart-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--gray);
    border: 2px dashed var(--gray-dark);
    border-radius: var(--border-radius);
}
.chart-placeholder i {
    font-size: 3rem;
    margin-bottom: 1rem;
}
.chart-placeholder p {
    font-size: 0.9rem;
}

/* Activité récente */
.recent-activity {
    background-color: var(--dark-light);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    box-shadow: var(--card-shadow);
}

.recent-activity h3 {
    font-size: 1.2rem;
    font-weight: 500;
    margin-bottom: 1rem;
    color: var(--light);
}

.activity-list {
    max-height: 300px;
    overflow-y: auto;
    /* Custom scrollbar (optional) */
    scrollbar-width: thin;
    scrollbar-color: var(--primary-dark) transparent;
}

.activity-item {
    padding: 0.8rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
}
.activity-item:last-child {
    border-bottom: none;
}

.activity-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    flex-shrink: 0; /* Prevent shrinking */
}

/* Colors for different activity types */
.activity-icon.add, .activity-icon.create, .activity-icon.import, .activity-icon.upload {
    background-color: rgba(76, 175, 80, 0.2); color: var(--success);
}
.activity-icon.edit, .activity-icon.update {
    background-color: rgba(33, 150, 243, 0.2); color: var(--info);
}
.activity-icon.delete, .activity-icon.remove {
    background-color: rgba(244, 67, 54, 0.2); color: var(--danger);
}
.activity-icon.login, .activity-icon.sign-in-alt {
    background-color: rgba(156, 39, 176, 0.2); color: var(--primary);
}
/* Add more specific types as needed */

.activity-content {
    flex: 1;
    overflow: hidden; /* Prevent overflow */
}

.activity-title {
    font-weight: 500;
    margin-bottom: 0.2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.activity-time {
    font-size: 0.8rem;
    color: var(--gray);
}

.empty-message {
    padding: 2rem;
    text-align: center;
    color: var(--gray);
}

/* Modales */
.modal-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6); /* Slightly darker backdrop */
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px; /* Add padding for smaller screens */
}

.modal-container.active {
    display: flex;
}

.modal {
    background-color: var(--dark-light);
    border-radius: var(--border-radius);
    width: 600px; /* Default width */
    max-width: 95%; /* Increased max-width */
    max-height: 90vh;
    display: flex; /* Use flex for layout */
    flex-direction: column; /* Stack header/body/footer */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
    animation: modalOpen 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* Smoother animation */
    overflow: hidden; /* Prevent content overflow before scroll */
}

/* Modal Sizes */
.modal.modal-large { width: 800px; }
.modal.modal-xlarge { width: 1100px; }


@keyframes modalOpen {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.modal-header {
    padding: 1rem 1.5rem; /* Adjusted padding */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0; /* Prevent header shrinking */
}

.modal-header h3 {
    font-size: 1.2rem;
    font-weight: 600;
}

.modal-close {
    color: var(--gray);
    font-size: 1.2rem;
    cursor: pointer;
    transition: color var(--transition-speed);
}

.modal-close:hover {
    color: var(--light);
}

.modal-body {
    padding: 1.5rem;
    overflow-y: auto; /* Enable scroll only for body */
    flex-grow: 1; /* Allow body to take up space */
}

.modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    flex-shrink: 0; /* Prevent footer shrinking */
    background-color: var(--dark-light); /* Ensure background matches modal */
}

/* Formulaires */
.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.form-control {
    width: 100%;
    padding: 0.8rem 1rem;
    background-color: rgba(0, 0, 0, 0.2); /* Darker input background */
    border: 1px solid rgba(255, 255, 255, 0.1); /* Subtle border */
    border-radius: var(--border-radius);
    color: var(--light);
    transition: all var(--transition-speed);
}

.form-control:focus {
    background-color: rgba(0, 0, 0, 0.3);
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(156, 39, 176, 0.3); /* Focus outline */
}

.form-control::placeholder {
    color: var(--gray);
}

/* Input types */
input[type="date"].form-control,
input[type="month"].form-control,
select.form-control {
    appearance: none; /* Remove default styling */
    padding-right: 2.5rem; /* Space for custom arrow */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23cccccc' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E"); /* Custom arrow */
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1em;
    color-scheme: dark; /* Hint for date picker theme */
}
input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0.5; /* Make default date picker arrow less prominent */
    cursor: pointer;
}

textarea.form-control {
    resize: vertical; /* Allow vertical resize */
    min-height: 80px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Responsive grid */
    gap: 1.5rem; /* Increased gap */
}

/* Checkbox custom style */
.checkbox-wrapper {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.checkbox-wrapper input[type="checkbox"] {
  appearance: none;
  width: 18px;
  height: 18px;
  border: 1px solid var(--primary);
  border-radius: 4px;
  margin-right: 0.75rem;
  position: relative;
  transition: background-color 0.2s, border-color 0.2s;
  cursor: pointer;
}
.checkbox-wrapper input[type="checkbox"]:checked {
  background-color: var(--primary);
  border-color: var(--primary);
}
.checkbox-wrapper input[type="checkbox"]:checked::before {
  content: '\\f00c'; /* FontAwesome check icon */
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  color: white;
  font-size: 12px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.checkbox-wrapper label {
  margin-bottom: 0; /* Reset margin */
  font-weight: normal; /* Adjust weight if needed */
  user-select: none; /* Prevent text selection */
}

/* Tableaux */
.table-responsive {
    overflow-x: auto;
    width: 100%;
}

.table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px; /* Ensure table has min width for responsiveness */
    background-color: var(--dark-light); /* Table background */
    border-radius: var(--border-radius); /* Rounded corners for table */
    overflow: hidden; /* Clip content to rounded corners */
    box-shadow: 0 2px 10px rgba(0,0,0,0.2); /* Subtle shadow */
}

.table thead th {
    background-color: rgba(0, 0, 0, 0.3); /* Darker header */
    padding: 0.8rem 1rem;
    text-align: left;
    font-weight: 600;
    color: var(--light);
    border-bottom: 2px solid var(--primary-dark); /* Accent border */
}

.table tbody td {
    padding: 0.8rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08); /* Subtle row separator */
    vertical-align: middle; /* Align content vertically */
}

.table tbody tr {
    transition: background-color var(--transition-speed);
}

.table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.table tbody tr:last-child td {
    border-bottom: none; /* Remove border on last row */
}

/* Employee Name/Avatar in tables */
.employee-name {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(to bottom right, var(--primary), var(--accent));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    flex-shrink: 0;
}
.employee-fullname {
    font-weight: 500;
    color: var(--light);
}
.employee-position, .employee-id {
    font-size: 0.8rem;
    color: var(--gray);
}


.table-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center; /* Align buttons vertically */
}

.action-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-light); /* Default color */
    background-color: rgba(255, 255, 255, 0.1); /* Default background */
    transition: all var(--transition-speed);
}
.action-btn:hover {
    transform: scale(1.1);
}
.action-btn i {
     font-size: 0.9rem;
}

/* Specific button colors */
.action-btn.view-employee, .action-btn.view-salary { color: var(--info); }
.action-btn.view-employee:hover, .action-btn.view-salary:hover { background-color: var(--info); color: white; }

.action-btn.edit-employee, .action-btn.edit-salary, .action-btn.edit-advance, .action-btn.edit-debt, .action-btn.edit-sanction { color: var(--primary); }
.action-btn.edit-employee:hover, .action-btn.edit-salary:hover, .action-btn.edit-advance:hover, .action-btn.edit-debt:hover, .action-btn.edit-sanction:hover { background-color: var(--primary); color: white; }

.action-btn.delete-employee, .action-btn.delete-salary, .action-btn.delete-advance, .action-btn.delete-debt, .action-btn.delete-sanction { color: var(--danger); }
.action-btn.delete-employee:hover, .action-btn.delete-salary:hover, .action-btn.delete-advance:hover, .action-btn.delete-debt:hover, .action-btn.delete-sanction:hover { background-color: var(--danger); color: white; }

.action-btn.mark-paid, .action-btn.pay-salary { color: var(--success); }
.action-btn.mark-paid:hover, .action-btn.pay-salary:hover { background-color: var(--success); color: white; }

.action-btn.print-salary { color: var(--gray-light); }
.action-btn.print-salary:hover { background-color: var(--gray-dark); color: white; }


/* États et badges */
.badge {
    display: inline-block;
    padding: 0.25rem 0.6rem; /* Slightly more padding */
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: capitalize; /* Capitalize status text */
}

.badge-success {
    background-color: rgba(76, 175, 80, 0.2);
    color: var(--success);
}

.badge-warning {
    background-color: rgba(255, 152, 0, 0.2);
    color: var(--warning);
}

.badge-danger {
    background-color: rgba(244, 67, 54, 0.2);
    color: var(--danger);
}

.badge-info {
    background-color: rgba(33, 150, 243, 0.2);
    color: var(--info);
}

/* Card component */
.card {
    background-color: var(--dark-light);
    border-radius: var(--border-radius);
    box-shadow: var(--card-shadow);
    margin-bottom: 1.5rem;
    overflow: hidden; /* Ensure content respects border-radius */
}
.card-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.card-header h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
}
.card-body {
    padding: 1.5rem;
}
.card-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background-color: rgba(0,0,0,0.1);
}

/* Filters */
.filters {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}
.filter-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.filter-group label {
     margin-bottom: 0; /* Override default form label margin */
     font-size: 0.9rem;
     color: var(--gray-light);
}
.filters .search-box { /* Target search box inside filters */
    flex-grow: 1; /* Allow search to take available space */
    min-width: 200px;
}
.filters .search-box input {
    background-color: rgba(0, 0, 0, 0.2); /* Darker background for filter inputs */
     border: 1px solid rgba(255, 255, 255, 0.1);
}
.filters select.form-control {
     min-width: 150px; /* Give selects a minimum width */
     background-color: rgba(0, 0, 0, 0.2);
     border: 1px solid rgba(255, 255, 255, 0.1);
}
.filter-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-left: auto; /* Push actions to the right if space allows */
}


/* Loading Spinners */
.loading-spinner-inline {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: var(--primary);
  animation: spin 1s ease-in-out infinite;
  margin-right: 8px;
  vertical-align: middle;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Error Message */
.error-message {
    color: var(--danger);
    background-color: rgba(244, 67, 54, 0.1);
    border: 1px solid var(--danger);
    padding: 1rem;
    border-radius: var(--border-radius);
    text-align: center;
}

/* Confirmation Details (in Modals) */
.confirm-details {
    margin-top: 1rem;
    padding: 1rem;
    background-color: rgba(0,0,0,0.1);
    border-radius: var(--border-radius);
}
.detail-row {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.detail-row:last-child {
    border-bottom: none;
}
.detail-label {
    color: var(--gray-light);
    font-weight: 500;
}
.detail-value {
    color: var(--light);
}

/* --- START: Styles for Sync/Pending indicators --- */
#sync-status-container {
    display: flex;
    align-items: center;
    gap: 10px; /* Space between indicators */
    /* Removed margin-left to let flexbox handle spacing */
}

#pending-changes-count {
    background-color: var(--warning); /* Orange */
    color: var(--dark-light); /* Dark text for contrast */
    font-size: 0.75rem;
    font-weight: bold;
    border-radius: 50%;
    width: 22px; /* Slightly larger */
    height: 22px;
    display: none; /* Hidden by default, shown via JS */
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    flex-shrink: 0; /* Prevent shrinking */
    cursor: default; /* Indicate it's not clickable (unless you add functionality) */
}

#sync-indicator {
    font-size: 0.8rem;
    padding: 4px 10px; /* Adjusted padding */
    border-radius: 15px; /* Pill shape */
    display: none; /* Hidden by default */
    transition: all 0.3s ease-in-out;
    opacity: 0; /* Start hidden for transitions */
    white-space: nowrap;
    flex-shrink: 0; /* Prevent shrinking */
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

#sync-indicator.syncing,
#sync-indicator.synced,
#sync-indicator.sync-error {
    display: inline-flex; /* Use flex for icon alignment */
    align-items: center;
    opacity: 1; /* Make visible */
}

#sync-indicator.syncing {
    background-color: var(--info); /* Blue */
    color: white;
}
#sync-indicator.synced {
    background-color: var(--success); /* Green */
    color: white;
}
#sync-indicator.sync-error {
    background-color: var(--danger); /* Red */
    color: white;
}
#sync-indicator.idle {
     display: none;
     opacity: 0;
}

/* Spinner inside sync indicator */
#sync-indicator.syncing::before {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-right: 6px;
    vertical-align: middle;
    flex-shrink: 0; /* Prevent spinner shrinking */
}
/* --- END: Styles for Sync/Pending indicators --- */


/* Utilitaires */
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.text-warning { color: var(--warning); }
.text-info { color: var(--info); }

.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }
.mt-5 { margin-top: 3rem; }

.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }
.mb-5 { margin-bottom: 3rem; }

/* Media Queries */
@media (max-width: 992px) {
    .sidebar {
        transform: translateX(-100%);
        position: fixed;
        box-shadow: 5px 0 15px rgba(0,0,0,0.2); /* Add shadow when overlaying */
    }

    .sidebar.active {
        transform: translateX(0);
    }

    .main-content {
        /* margin-left: 0; Removed - structure doesn't push content */
        width: 100%; /* Ensure main content takes full width */
    }

    .sidebar-toggle {
        display: block;
    }

    .header-right {
        gap: 1rem; /* Reduce gap on smaller screens */
    }

    .actions {
         /* Maybe hide text on smaller screens */
        /* .btn span { display: none; } */
        /* .btn { padding: 0.5rem; } */
    }
}

@media (max-width: 768px) {
    :root {
        --sidebar-width: 240px; /* Slightly smaller sidebar */
    }

    .dashboard-stats,
    .dashboard-charts,
    .stats-cards {
        grid-template-columns: 1fr; /* Stack cards */
    }

    .search-box input {
        min-width: 150px;
    }

    .header {
         padding: 0 1rem; /* Reduce header padding */
    }

     .page-content {
         padding: 1rem; /* Reduce page padding */
     }

     .modal.modal-large { width: 95%; } /* Make large modals take more width */
     .modal.modal-xlarge { width: 95%; }
}

@media (max-width: 576px) {
    .header {
        flex-direction: column;
        height: auto;
        padding: 1rem;
        gap: 1rem; /* Add gap between rows */
    }

    .header-left,
    .header-right {
        width: 100%;
        justify-content: space-between;
    }

    .header-right {
        margin-top: 0; /* Remove top margin */
        flex-wrap: wrap; /* Allow wrapping */
        gap: 0.5rem; /* Reduce gap */
    }

    .search-box {
        width: 100%; /* Full width search */
        order: -1; /* Move search box up potentially */
        margin-bottom: 0.5rem; /* Add spacing */
    }
     #sync-status-container {
         order: 1; /* Ensure sync status comes after search */
     }
     .actions {
          order: 2;
     }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .modal {
        width: calc(100% - 20px); /* Near full width on mobile */
        max-width: none;
        margin: 10px;
    }
    .modal-body { padding: 1rem; }
    .modal-header { padding: 0.8rem 1rem; }
    .modal-footer { padding: 0.8rem 1rem; }


    .stat-card { padding: 1rem; }
    .stat-icon { width: 50px; height: 50px; margin-right: 0.8rem;}
    .stat-icon i { font-size: 1.2rem; }
    .stat-info h2 { font-size: 1.3rem;}

    .page-header h1 { font-size: 1.5rem; }

    /* Ensure buttons are usable */
     /* Update Notification */
.update-notification {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--accent);
    color: white;
    padding: 15px 20px;
    border-radius: var(--border-radius);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    gap: 15px;
    z-index: 2000;
    animation: slideIn 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.update-notification button {
    background-color: white;
    color: var(--accent);
    border: none;
    padding: 8px 15px;
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.update-notification button:hover {
    background-color: #f0f0f0;
}

@keyframes slideIn {
    from {
        bottom: -100px;
        opacity: 0;
    }
    to {
        bottom: 20px;
        opacity: 1;
    }
}

     .btn { padding: 0.6rem 1rem; }

}