/* 
 * Yapla Design System v1.0.0
 * A comprehensive CSS design system for Yapla BI Platform
 * Built to coexist with Bootstrap 5.3.0
 */

/* Design Tokens - Foundation */
@import url('tokens/colors.css');
@import url('tokens/typography.css');
@import url('tokens/spacing.css');
@import url('tokens/breakpoints.css');

/* Base Styles */
@import url('base/reset.css');

/* Component Styles */
@import url('components/buttons.css');
@import url('components/forms.css');
@import url('components/inline-notice.css');
@import url('components/cards.css');
@import url('components/accordion.css');
@import url('components/tables.css');
@import url('components/filters.css');
@import url('components/mrr-by-plan-chart.css');
@import url('components/clients-inactifs-table.css');
@import url('components/tabs.css');
@import url('components/rich-text.css');
@import url('components/markdown.css');
@import url('components/dropdown.css');
@import url('components/modal.css');
@import url('components/yapla-tooltip.css');
@import url('components/yapla-searchable-select.css');

/* Layout Systems */
@import url('layouts/grid.css');
@import url('layouts/flexbox.css');

/* Page-specific Styles */
@import url('pages/events.css');
@import url('pages/settings.css');
@import url('pages/mappings.css');
@import url('pages/webhook_config.css');
@import url('pages/rules.css');
@import url('pages/explication.css');
@import url('pages/profil.css');
@import url('pages/aide.css');
@import url('pages/demande-evolution.css');

/* Utility Classes */

/* Spacing Utilities */
.yapla-m-0 { margin: 0 !important; }
.yapla-m-1 { margin: var(--yapla-spacing-1) !important; }
.yapla-m-2 { margin: var(--yapla-spacing-2) !important; }
.yapla-m-3 { margin: var(--yapla-spacing-3) !important; }
.yapla-m-4 { margin: var(--yapla-spacing-4) !important; }
.yapla-m-5 { margin: var(--yapla-spacing-5) !important; }
.yapla-m-auto { margin: auto !important; }

.yapla-mt-0 { margin-top: 0 !important; }
.yapla-mt-1 { margin-top: var(--yapla-spacing-1) !important; }
.yapla-mt-2 { margin-top: var(--yapla-spacing-2) !important; }
.yapla-mt-3 { margin-top: var(--yapla-spacing-3) !important; }
.yapla-mt-4 { margin-top: var(--yapla-spacing-4) !important; }
.yapla-mt-5 { margin-top: var(--yapla-spacing-5) !important; }

.yapla-mb-0 { margin-bottom: 0 !important; }
.yapla-mb-1 { margin-bottom: var(--yapla-spacing-1) !important; }
.yapla-mb-2 { margin-bottom: var(--yapla-spacing-2) !important; }
.yapla-mb-3 { margin-bottom: var(--yapla-spacing-3) !important; }
.yapla-mb-4 { margin-bottom: var(--yapla-spacing-4) !important; }
.yapla-mb-5 { margin-bottom: var(--yapla-spacing-5) !important; }

.yapla-ms-0 { margin-left: 0 !important; }
.yapla-ms-1 { margin-left: var(--yapla-spacing-1) !important; }
.yapla-ms-2 { margin-left: var(--yapla-spacing-2) !important; }
.yapla-ms-3 { margin-left: var(--yapla-spacing-3) !important; }
.yapla-ms-4 { margin-left: var(--yapla-spacing-4) !important; }
.yapla-ms-5 { margin-left: var(--yapla-spacing-5) !important; }

.yapla-me-0 { margin-right: 0 !important; }
.yapla-me-1 { margin-right: var(--yapla-spacing-1) !important; }
.yapla-me-2 { margin-right: var(--yapla-spacing-2) !important; }
.yapla-me-3 { margin-right: var(--yapla-spacing-3) !important; }
.yapla-me-4 { margin-right: var(--yapla-spacing-4) !important; }
.yapla-me-5 { margin-right: var(--yapla-spacing-5) !important; }

.yapla-mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.yapla-mx-1 { margin-left: var(--yapla-spacing-1) !important; margin-right: var(--yapla-spacing-1) !important; }
.yapla-mx-2 { margin-left: var(--yapla-spacing-2) !important; margin-right: var(--yapla-spacing-2) !important; }
.yapla-mx-3 { margin-left: var(--yapla-spacing-3) !important; margin-right: var(--yapla-spacing-3) !important; }
.yapla-mx-4 { margin-left: var(--yapla-spacing-4) !important; margin-right: var(--yapla-spacing-4) !important; }
.yapla-mx-5 { margin-left: var(--yapla-spacing-5) !important; margin-right: var(--yapla-spacing-5) !important; }

.yapla-my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.yapla-my-1 { margin-top: var(--yapla-spacing-1) !important; margin-bottom: var(--yapla-spacing-1) !important; }
.yapla-my-2 { margin-top: var(--yapla-spacing-2) !important; margin-bottom: var(--yapla-spacing-2) !important; }
.yapla-my-3 { margin-top: var(--yapla-spacing-3) !important; margin-bottom: var(--yapla-spacing-3) !important; }
.yapla-my-4 { margin-top: var(--yapla-spacing-4) !important; margin-bottom: var(--yapla-spacing-4) !important; }
.yapla-my-5 { margin-top: var(--yapla-spacing-5) !important; margin-bottom: var(--yapla-spacing-5) !important; }

/* Padding Utilities */
.yapla-p-0 { padding: 0 !important; }
.yapla-p-1 { padding: var(--yapla-spacing-1) !important; }
.yapla-p-2 { padding: var(--yapla-spacing-2) !important; }
.yapla-p-3 { padding: var(--yapla-spacing-3) !important; }
.yapla-p-4 { padding: var(--yapla-spacing-4) !important; }
.yapla-p-5 { padding: var(--yapla-spacing-5) !important; }

.yapla-pt-0 { padding-top: 0 !important; }
.yapla-pt-1 { padding-top: var(--yapla-spacing-1) !important; }
.yapla-pt-2 { padding-top: var(--yapla-spacing-2) !important; }
.yapla-pt-3 { padding-top: var(--yapla-spacing-3) !important; }
.yapla-pt-4 { padding-top: var(--yapla-spacing-4) !important; }
.yapla-pt-5 { padding-top: var(--yapla-spacing-5) !important; }

.yapla-pb-0 { padding-bottom: 0 !important; }
.yapla-pb-1 { padding-bottom: var(--yapla-spacing-1) !important; }
.yapla-pb-2 { padding-bottom: var(--yapla-spacing-2) !important; }
.yapla-pb-3 { padding-bottom: var(--yapla-spacing-3) !important; }
.yapla-pb-4 { padding-bottom: var(--yapla-spacing-4) !important; }
.yapla-pb-5 { padding-bottom: var(--yapla-spacing-5) !important; }

.yapla-ps-0 { padding-left: 0 !important; }
.yapla-ps-1 { padding-left: var(--yapla-spacing-1) !important; }
.yapla-ps-2 { padding-left: var(--yapla-spacing-2) !important; }
.yapla-ps-3 { padding-left: var(--yapla-spacing-3) !important; }
.yapla-ps-4 { padding-left: var(--yapla-spacing-4) !important; }
.yapla-ps-5 { padding-left: var(--yapla-spacing-5) !important; }

.yapla-pe-0 { padding-right: 0 !important; }
.yapla-pe-1 { padding-right: var(--yapla-spacing-1) !important; }
.yapla-pe-2 { padding-right: var(--yapla-spacing-2) !important; }
.yapla-pe-3 { padding-right: var(--yapla-spacing-3) !important; }
.yapla-pe-4 { padding-right: var(--yapla-spacing-4) !important; }
.yapla-pe-5 { padding-right: var(--yapla-spacing-5) !important; }

.yapla-px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.yapla-px-1 { padding-left: var(--yapla-spacing-1) !important; padding-right: var(--yapla-spacing-1) !important; }
.yapla-px-2 { padding-left: var(--yapla-spacing-2) !important; padding-right: var(--yapla-spacing-2) !important; }
.yapla-px-3 { padding-left: var(--yapla-spacing-3) !important; padding-right: var(--yapla-spacing-3) !important; }
.yapla-px-4 { padding-left: var(--yapla-spacing-4) !important; padding-right: var(--yapla-spacing-4) !important; }
.yapla-px-5 { padding-left: var(--yapla-spacing-5) !important; padding-right: var(--yapla-spacing-5) !important; }

.yapla-py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.yapla-py-1 { padding-top: var(--yapla-spacing-1) !important; padding-bottom: var(--yapla-spacing-1) !important; }
.yapla-py-2 { padding-top: var(--yapla-spacing-2) !important; padding-bottom: var(--yapla-spacing-2) !important; }
.yapla-py-3 { padding-top: var(--yapla-spacing-3) !important; padding-bottom: var(--yapla-spacing-3) !important; }
.yapla-py-4 { padding-top: var(--yapla-spacing-4) !important; padding-bottom: var(--yapla-spacing-4) !important; }
.yapla-py-5 { padding-top: var(--yapla-spacing-5) !important; padding-bottom: var(--yapla-spacing-5) !important; }

/* Text Utilities */
.yapla-text-start { text-align: left !important; }
.yapla-text-end { text-align: right !important; }
.yapla-text-center { text-align: center !important; }

.yapla-text-primary { color: var(--yapla-color-primary) !important; }
.yapla-text-secondary { color: var(--yapla-color-secondary) !important; }
.yapla-text-success { color: var(--yapla-color-success) !important; }
.yapla-text-danger { color: var(--yapla-color-danger) !important; }
.yapla-text-warning { color: var(--yapla-color-warning) !important; }
.yapla-text-info { color: var(--yapla-color-info) !important; }
.yapla-text-light { color: var(--yapla-text-light) !important; }
.yapla-text-dark { color: var(--yapla-text-primary) !important; }
.yapla-text-muted { color: var(--yapla-text-muted) !important; }
.yapla-text-white { color: var(--yapla-color-white) !important; }

/* Background Utilities */
.yapla-bg-primary { background-color: var(--yapla-color-primary) !important; }
.yapla-bg-secondary { background-color: var(--yapla-color-secondary) !important; }
.yapla-bg-success { background-color: var(--yapla-color-success) !important; }
.yapla-bg-danger { background-color: var(--yapla-color-danger) !important; }
.yapla-bg-warning { background-color: var(--yapla-color-warning) !important; }
.yapla-bg-info { background-color: var(--yapla-color-info) !important; }
.yapla-bg-light { background-color: var(--yapla-bg-secondary) !important; }
.yapla-bg-dark { background-color: var(--yapla-color-gray-900) !important; }
.yapla-bg-white { background-color: var(--yapla-color-white) !important; }

/* Border Utilities */
.yapla-border { border: 1px solid var(--yapla-border-default) !important; }
.yapla-border-0 { border: 0 !important; }
.yapla-border-top { border-top: 1px solid var(--yapla-border-default) !important; }
.yapla-border-end { border-right: 1px solid var(--yapla-border-default) !important; }
.yapla-border-bottom { border-bottom: 1px solid var(--yapla-border-default) !important; }
.yapla-border-start { border-left: 1px solid var(--yapla-border-default) !important; }

.yapla-border-primary { border-color: var(--yapla-color-primary) !important; }
.yapla-border-secondary { border-color: var(--yapla-color-secondary) !important; }
.yapla-border-success { border-color: var(--yapla-color-success) !important; }
.yapla-border-danger { border-color: var(--yapla-color-danger) !important; }
.yapla-border-warning { border-color: var(--yapla-color-warning) !important; }
.yapla-border-info { border-color: var(--yapla-color-info) !important; }
.yapla-border-light { border-color: var(--yapla-border-light) !important; }
.yapla-border-dark { border-color: var(--yapla-border-dark) !important; }
.yapla-border-white { border-color: var(--yapla-color-white) !important; }

/* Border Radius Utilities */
.yapla-rounded { border-radius: var(--yapla-radius-md) !important; }
.yapla-rounded-0 { border-radius: 0 !important; }
.yapla-rounded-1 { border-radius: var(--yapla-radius-sm) !important; }
.yapla-rounded-2 { border-radius: var(--yapla-radius-md) !important; }
.yapla-rounded-3 { border-radius: var(--yapla-radius-lg) !important; }
.yapla-rounded-circle { border-radius: 50% !important; }
.yapla-rounded-pill { border-radius: var(--yapla-radius-full) !important; }

/* Shadow Utilities */
.yapla-shadow-sm { box-shadow: var(--yapla-shadow-sm) !important; }
.yapla-shadow { box-shadow: var(--yapla-shadow-md) !important; }
.yapla-shadow-lg { box-shadow: var(--yapla-shadow-lg) !important; }
.yapla-shadow-none { box-shadow: none !important; }

/* Display Utilities */
.yapla-d-none { display: none !important; }
.yapla-d-inline { display: inline !important; }
.yapla-d-inline-block { display: inline-block !important; }
.yapla-d-block { display: block !important; }
.yapla-d-grid { display: grid !important; }
.yapla-d-table { display: table !important; }
.yapla-d-table-row { display: table-row !important; }
.yapla-d-table-cell { display: table-cell !important; }
.yapla-d-flex { display: flex !important; }
.yapla-d-inline-flex { display: inline-flex !important; }

/* Position Utilities */
.yapla-position-static { position: static !important; }
.yapla-position-relative { position: relative !important; }
.yapla-position-absolute { position: absolute !important; }
.yapla-position-fixed { position: fixed !important; }
.yapla-position-sticky { position: sticky !important; }

/* Width & Height Utilities */
.yapla-w-25 { width: 25% !important; }
.yapla-w-50 { width: 50% !important; }
.yapla-w-75 { width: 75% !important; }
.yapla-w-100 { width: 100% !important; }
.yapla-w-auto { width: auto !important; }

.yapla-h-25 { height: 25% !important; }
.yapla-h-50 { height: 50% !important; }
.yapla-h-75 { height: 75% !important; }
.yapla-h-100 { height: 100% !important; }
.yapla-h-auto { height: auto !important; }

/* Overflow Utilities */
.yapla-overflow-auto { overflow: auto !important; }
.yapla-overflow-hidden { overflow: hidden !important; }
.yapla-overflow-visible { overflow: visible !important; }
.yapla-overflow-scroll { overflow: scroll !important; }

/* Visibility Utilities */
.yapla-visible { visibility: visible !important; }
.yapla-invisible { visibility: hidden !important; }

/* Print Styles */
@media print {
  .yapla-d-print-none { display: none !important; }
  .yapla-d-print-block { display: block !important; }
  .yapla-d-print-inline { display: inline !important; }
  .yapla-d-print-inline-block { display: inline-block !important; }
}