/* =====================================================
   PARKCLEAN — BASE (Reset, Typo, Utilitaires)
   ===================================================== */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;600&display=swap');

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; scroll-behavior: smooth; overflow-x: hidden; }
body {
  min-height: 100%;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--clr-text);
  background: var(--clr-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
input, select, textarea { font-family: inherit; }
ul, ol { list-style: none; }

/* ── Typographie ── */
h1 { font-size: var(--text-2xl); font-weight: 700; line-height: 1.2; color: var(--clr-text); }
h2 { font-size: var(--text-xl);  font-weight: 700; line-height: 1.3; color: var(--clr-text); }
h3 { font-size: var(--text-lg);  font-weight: 600; line-height: 1.4; color: var(--clr-text); }
h4 { font-size: var(--text-md);  font-weight: 600; color: var(--clr-text); }
h5 { font-size: var(--text-base);font-weight: 600; color: var(--clr-text); }
p  { color: var(--clr-text-2); }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--clr-surface-3); border-radius: var(--r-full); }
::-webkit-scrollbar-thumb:hover { background: var(--clr-faint); }

/* ── Focus ── */
:focus-visible { outline: 2px solid var(--clr-accent); outline-offset: 2px; border-radius: var(--r-sm); }

/* ── Accessibility ── */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }

/* ── Spinner ── */
@keyframes pc-spin { to { transform: rotate(360deg); } }
@keyframes pc-pulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.06);opacity:.8} }
@keyframes pc-fade-in { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
@keyframes pc-slide-in { from{opacity:0;transform:translateX(-12px)} to{opacity:1;transform:translateX(0)} }

/* ══════════════════════════════════════
   UTILITAIRES
══════════════════════════════════════ */

/* Flex */
.flex        { display: flex; }
.flex-col    { display: flex; flex-direction: column; }
.flex-1      { flex: 1 1 0%; }
.items-center{ align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.flex-wrap   { flex-wrap: wrap; }
.gap-1 { gap: 4px; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-5 { gap: 20px; }
.gap-6 { gap: 24px; }

/* Grid */
.grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap: 16px; }

/* Spacing */
.m-0  { margin:  0; }
.mb-1 { margin-bottom:  4px; }
.mb-2 { margin-bottom:  8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
.mb-6 { margin-bottom: 24px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.p-0  { padding: 0; }
.p-3  { padding: 12px; }
.p-4  { padding: 16px; }
.p-5  { padding: 20px; }
.p-6  { padding: 24px; }

/* Text */
.text-xs    { font-size: var(--text-xs); }
.text-sm    { font-size: var(--text-sm); }
.text-base  { font-size: var(--text-base); }
.text-md    { font-size: var(--text-md); }
.text-lg    { font-size: var(--text-lg); }
.text-left  { text-align: left; }
.text-center{ text-align: center; }
.text-right { text-align: right; }
.font-mono  { font-family: var(--font-mono); }
.font-medium{ font-weight: 500; }
.font-semibold{ font-weight: 600; }
.font-bold  { font-weight: 700; }
.font-black { font-weight: 800; }
.uppercase  { text-transform: uppercase; letter-spacing: 0.05em; }
.truncate   { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Colors */
.text-primary  { color: var(--clr-accent) !important; }
.text-success  { color: var(--clr-success) !important; }
.text-warning  { color: var(--clr-warning) !important; }
.text-danger   { color: var(--clr-danger) !important; }
.text-muted    { color: var(--clr-muted) !important; }
.text-white    { color: #fff !important; }

/* Padding axis */
.py-2 { padding-top: 8px;  padding-bottom: 8px; }
.py-4 { padding-top: 16px; padding-bottom: 16px; }
.py-5 { padding-top: 20px; padding-bottom: 20px; }
.px-2 { padding-left: 8px;  padding-right: 8px; }
.px-4 { padding-left: 16px; padding-right: 16px; }
.ps-4 { padding-left: 16px; }

/* Text aliases */
.text-end   { text-align: right; }
.fw-bold    { font-weight: 700; }
.small      { font-size: var(--text-sm); }

/* Display */
[hidden]  { display: none !important; }
.hidden   { display: none !important; }
.block   { display: block; }
.inline  { display: inline; }
.relative{ position: relative; }
.w-full  { width: 100%; }
.w-auto  { width: auto; }
.overflow-hidden { overflow: hidden; }
.overflow-x-auto { overflow-x: auto; }
.min-w-0 { min-width: 0; }
.cursor-pointer { cursor: pointer; }
.mb-0 { margin-bottom: 0; }

/* ── Compact density mode ── */
[data-density="compact"] .pc-table th,
[data-density="compact"] .pc-table td { padding: 6px 12px; font-size: var(--text-xs); }
[data-density="compact"] .card { padding: 14px 16px; }
[data-density="compact"] .db-kpi { padding: 14px 16px 12px; }
[data-density="compact"] .db-kpi-value { font-size: 1.5rem; }

/* ══ Responsive grid utilities ══ */
@media (max-width: 640px) {
  /* !important nécessaire pour battre les styles inline (ex: accounting) */
  .grid-2 { grid-template-columns: 1fr !important; }
  /* re-aligner les contrôles "trier par" à gauche quand la grid collapse */
  .grid-2 > .flex.justify-end { justify-content: flex-start; }
}