:root {
  /* Colors */
  --color-background: rgba(252, 252, 249, 1);
  --color-surface: rgba(255, 255, 253, 1);
  --color-text: rgba(19, 52, 59, 1);
  --color-text-secondary: rgba(98, 108, 113, 1);
  --color-primary: rgba(33, 128, 141, 1);
  --color-primary-hover: rgba(29, 116, 128, 1);
  --color-primary-active: rgba(26, 104, 115, 1);
  --color-secondary: rgba(94, 82, 64, 0.12);
  --color-secondary-hover: rgba(94, 82, 64, 0.2);
  --color-secondary-active: rgba(94, 82, 64, 0.25);
  --color-border: rgba(94, 82, 64, 0.2);
  --color-btn-primary-text: rgba(252, 252, 249, 1);
  --color-card-border: rgba(94, 82, 64, 0.12);
  --color-card-border-inner: rgba(94, 82, 64, 0.12);
  --color-error: rgba(192, 21, 47, 1);
  --color-success: rgba(33, 128, 141, 1);
  --color-warning: rgba(168, 75, 47, 1);
  --color-info: rgba(98, 108, 113, 1);
  --color-focus-ring: rgba(33, 128, 141, 0.4);
  --color-select-caret: rgba(19, 52, 59, 0.8);

  /* RGB versions for opacity control */
  --color-success-rgb: 33, 128, 141;
  --color-error-rgb: 192, 21, 47;
  --color-warning-rgb: 168, 75, 47;
  --color-info-rgb: 98, 108, 113;

  /* Typography & Spacing */
  --font-family-base: "FKGroteskNeue", "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-size-base: 14px;
  --font-weight-medium: 500;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --radius-base: 8px;
  --radius-full: 9999px;
  --focus-outline: 2px solid var(--color-primary);
}

/* Base styles */
html {
  font-size: var(--font-size-base);
  font-family: var(--font-family-base);
  color: var(--color-text);
  background-color: var(--color-background);
  box-sizing: border-box;
}
body { margin: 0; padding: 0; }
*, *::before, *::after { box-sizing: inherit; }
h1 { font-size: 2rem; }
a { color: var(--color-primary); text-decoration: none; }
.container { width: 100%; margin: auto; padding: 0 var(--space-16); max-width: 1280px; }
.py-16 { padding-top: var(--space-16); padding-bottom: var(--space-16); }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.gap-4 { gap: var(--space-4); }
.gap-16 { gap: var(--space-16); }
.mb-8 { margin-bottom: var(--space-8); }
.mx-8 { margin-left: var(--space-8); margin-right: var(--space-8); }
.flex-wrap { flex-wrap: wrap; }
.cursor-pointer { cursor: pointer; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  padding: var(--space-8) var(--space-16);
  border-radius: var(--radius-base);
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
}
.btn--primary { background: var(--color-primary); color: var(--color-btn-primary-text); }
.btn--outline { border-color: var(--color-border); }

/* Status indicators */
.status {
  display: inline-flex;
  align-items: center;
  padding: var(--space-8) var(--space-12);
  border-radius: var(--radius-full);
  font-weight: var(--font-weight-medium);
  font-size: 12px;
  border: 1px solid transparent;
}
.status--success { background-color: rgba(var(--color-success-rgb), 0.1); color: var(--color-success); border-color: rgba(var(--color-success-rgb), 0.2); }
.status--warning { background-color: rgba(var(--color-warning-rgb), 0.1); color: var(--color-warning); border-color: rgba(var(--color-warning-rgb), 0.2); }
.status--info { background-color: rgba(var(--color-info-rgb), 0.1); color: var(--color-info); border-color: rgba(var(--color-info-rgb), 0.2); }

/* --- MODIFICATION: Styles pour les conteneurs de compteurs --- */
.counters-container {
    display: flex;
    flex-direction: column; /* Par défaut: les groupes sont empilés verticalement (mobile) */
    gap: var(--space-16);
    align-items: flex-start;
}

.counters-row {
    display: flex;
    flex-wrap: wrap; /* Permet aux compteurs de passer à la ligne si besoin */
    gap: var(--space-16);
}

/* Pour les écrans plus larges (tablettes et ordinateurs) */
@media (min-width: 1024px) {
    .counters-container {
        flex-direction: row; /* Les groupes sont côte à côte */
        align-items: center;
    }
}


/* Table styles */
.table-container {
  overflow-x: auto;
  max-width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
}
#addresses-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 800px;
}
#addresses-table th, #addresses-table td {
  padding: var(--space-8) var(--space-12);
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}
#addresses-table thead th {
  background-color: rgba(0,0,0,0.03);
  text-align: left;
  position: sticky; top: 0;
}
tr.delivered { background-color: rgba(var(--color-success-rgb), 0.05); }
.numeric { text-align: right; }
.comment-input {
  width: 100%;
  padding: var(--space-8);
  border-radius: var(--radius-base);
  border: 1px solid var(--color-border);
}
.comment-input:focus { outline: var(--focus-outline); }
body.hide-delivered tr.delivered { display: none; }
input[type="checkbox"] { width: 1.25em; height: 1.25em; accent-color: var(--color-primary); }