/* src/pages/Dashboard/Dashboard.module.css */ .page { padding: 24px; max-width: 1400px; margin: 0 auto; } .pageHeader { display: flex; justify-content: space-between; align-items: center; margin-bottom: 32px; } .title { font-size: 28px; font-weight: 600; color: var(--color-text); margin: 0; } .refreshBtn { display: flex; align-items: center; gap: 6px; padding: 8px 14px; background: transparent; border: 1px solid var(--color-border, #333); border-radius: var(--radius); color: var(--color-text); cursor: pointer; font-size: 13px; transition: opacity 0.2s; } .refreshBtn:disabled { opacity: 0.5; cursor: not-allowed; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .spinning { animation: spin 1s linear infinite; } .kpiGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin-bottom: 32px; } .filtres { display: flex; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; } .select { padding: 8px 12px; background: var(--color-white); border: 1px solid var(--color-border, #333); border-radius: var(--radius); color: var(--color-text); font-size: 13px; cursor: pointer; min-width: 180px; } .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; } .empty { color: var(--color-muted, #888); font-size: 14px; padding: 32px 0; text-align: center; } /* Responsive */ @media (max-width: 640px) { .page { padding: 12px; } .pageHeader { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 20px; } .title { font-size: 20px; } .kpiGrid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .filtres { flex-direction: column; } .select { width: 100%; min-width: unset; } .grid { grid-template-columns: 1fr; } } @media (min-width: 1280px) { .grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); } }