/**
 * 🎨 ZANGAPRO DESIGN SYSTEM
 * Mobile-First ERP UI/UX
 * Version: 1.0.0
 */

/* ============================================
   VARIABLES CSS
   ============================================ */

:root {
    /* Couleurs principales — Bleu Royal */
    --zp-primary: #2563eb;
    --zp-primary-dark: #1d4ed8;
    --zp-primary-light: #3b82f6;

    /* Fond et surfaces */
    --zp-background: #F6F8FA;
    --zp-surface: #FFFFFF;
    --zp-surface-hover: #F9FAFB;

    /* Texte */
    --zp-text-primary: #1F2937;
    --zp-text-secondary: #6B7280;
    --zp-text-disabled: #9CA3AF;

    /* États */
    --zp-success: #16A34A;
    --zp-warning: #F59E0B;
    --zp-error: #DC2626;
    --zp-info: #3B82F6;

    /* Bordures */
    --zp-border: #E5E7EB;
    --zp-border-focus: #2563eb;

    /* Typographie */
    --zp-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --zp-text-xs: 0.75rem;
    /* 12px */
    --zp-text-sm: 0.875rem;
    /* 14px */
    --zp-text-base: 1rem;
    /* 16px */
    --zp-text-lg: 1.125rem;
    /* 18px */
    --zp-text-xl: 1.25rem;
    /* 20px */
    --zp-text-2xl: 1.5rem;
    /* 24px */
    --zp-text-3xl: 1.875rem;
    /* 30px */

    --zp-font-normal: 400;
    --zp-font-medium: 500;
    --zp-font-semibold: 600;
    --zp-font-bold: 700;

    /* Espacements */
    --zp-space-1: 0.25rem;
    /* 4px */
    --zp-space-2: 0.5rem;
    /* 8px */
    --zp-space-3: 0.75rem;
    /* 12px */
    --zp-space-4: 1rem;
    /* 16px */
    --zp-space-5: 1.25rem;
    /* 20px */
    --zp-space-6: 1.5rem;
    /* 24px */
    --zp-space-8: 2rem;
    /* 32px */
    --zp-space-10: 2.5rem;
    /* 40px */
    --zp-space-12: 3rem;
    /* 48px */

    /* Rayons de bordure */
    --zp-radius-sm: 0.375rem;
    /* 6px */
    --zp-radius-md: 0.5rem;
    /* 8px */
    --zp-radius-lg: 0.75rem;
    /* 12px */
    --zp-radius-xl: 1rem;
    /* 16px */
    --zp-radius-full: 9999px;

    /* Ombres */
    --zp-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --zp-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --zp-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --zp-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);

    /* Z-index */
    --zp-z-dropdown: 1000;
    --zp-z-sticky: 1020;
    --zp-z-fixed: 1030;
    --zp-z-modal-backdrop: 1040;
    --zp-z-modal: 1050;
    --zp-z-popover: 1060;
    --zp-z-tooltip: 1070;
}

/* ============================================
   RESET & BASE
   ============================================ */

* {
    box-sizing: border-box;
}

body {
    font-family: var(--zp-font-family);
    font-size: var(--zp-text-base);
    line-height: 1.5;
    color: var(--zp-text-primary);
    background-color: var(--zp-background);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   UTILITAIRES TEXTE
   ============================================ */

.zp-text-xs {
    font-size: var(--zp-text-xs);
}

.zp-text-sm {
    font-size: var(--zp-text-sm);
}

.zp-text-base {
    font-size: var(--zp-text-base);
}

.zp-text-lg {
    font-size: var(--zp-text-lg);
}

.zp-text-xl {
    font-size: var(--zp-text-xl);
}

.zp-text-2xl {
    font-size: var(--zp-text-2xl);
}

.zp-text-3xl {
    font-size: var(--zp-text-3xl);
}

.zp-font-normal {
    font-weight: var(--zp-font-normal);
}

.zp-font-medium {
    font-weight: var(--zp-font-medium);
}

.zp-font-semibold {
    font-weight: var(--zp-font-semibold);
}

.zp-font-bold {
    font-weight: var(--zp-font-bold);
}

.zp-text-primary {
    color: var(--zp-text-primary);
}

.zp-text-secondary {
    color: var(--zp-text-secondary);
}

.zp-text-success {
    color: var(--zp-success);
}

.zp-text-warning {
    color: var(--zp-warning);
}

.zp-text-error {
    color: var(--zp-error);
}

.zp-text-center {
    text-align: center;
}

.zp-text-left {
    text-align: left;
}

.zp-text-right {
    text-align: right;
}

/* ============================================
   UTILITAIRES ESPACEMENT
   ============================================ */

.zp-m-0 {
    margin: 0;
}

.zp-m-1 {
    margin: var(--zp-space-1);
}

.zp-m-2 {
    margin: var(--zp-space-2);
}

.zp-m-3 {
    margin: var(--zp-space-3);
}

.zp-m-4 {
    margin: var(--zp-space-4);
}

.zp-m-6 {
    margin: var(--zp-space-6);
}

.zp-mt-0 {
    margin-top: 0;
}

.zp-mt-2 {
    margin-top: var(--zp-space-2);
}

.zp-mt-4 {
    margin-top: var(--zp-space-4);
}

.zp-mt-6 {
    margin-top: var(--zp-space-6);
}

.zp-mb-0 {
    margin-bottom: 0;
}

.zp-mb-2 {
    margin-bottom: var(--zp-space-2);
}

.zp-mb-4 {
    margin-bottom: var(--zp-space-4);
}

.zp-mb-6 {
    margin-bottom: var(--zp-space-6);
}

.zp-p-0 {
    padding: 0;
}

.zp-p-2 {
    padding: var(--zp-space-2);
}

.zp-p-3 {
    padding: var(--zp-space-3);
}

.zp-p-4 {
    padding: var(--zp-space-4);
}

.zp-p-6 {
    padding: var(--zp-space-6);
}

/* ============================================
   CONTAINER & GRILLE
   ============================================ */

.zp-container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--zp-space-4);
}

.zp-grid {
    display: grid;
    gap: var(--zp-space-4);
}

.zp-grid-cols-1 {
    grid-template-columns: repeat(1, 1fr);
}

.zp-grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.zp-grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.zp-grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

.zp-gap-2 {
    gap: var(--zp-space-2);
}

.zp-gap-3 {
    gap: var(--zp-space-3);
}

.zp-gap-4 {
    gap: var(--zp-space-4);
}

.zp-gap-6 {
    gap: var(--zp-space-6);
}

/* ============================================
   FLEX UTILITAIRES
   ============================================ */

.zp-flex {
    display: flex;
}

.zp-inline-flex {
    display: inline-flex;
}

.zp-flex-col {
    flex-direction: column;
}

.zp-flex-row {
    flex-direction: row;
}

.zp-items-start {
    align-items: flex-start;
}

.zp-items-center {
    align-items: center;
}

.zp-items-end {
    align-items: flex-end;
}

.zp-justify-start {
    justify-content: flex-start;
}

.zp-justify-center {
    justify-content: center;
}

.zp-justify-end {
    justify-content: flex-end;
}

.zp-justify-between {
    justify-content: space-between;
}

.zp-flex-1 {
    flex: 1;
}

.zp-flex-wrap {
    flex-wrap: wrap;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {

    .zp-grid-cols-2,
    .zp-grid-cols-3,
    .zp-grid-cols-4 {
        grid-template-columns: 1fr;
    }

    .zp-md-hidden {
        display: none !important;
    }
}

@media (min-width: 769px) {
    .zp-md-visible {
        display: block !important;
    }

    .zp-mobile-only {
        display: none !important;
    }
}

/* ============================================
   UTILITAIRES AFFICHAGE
   ============================================ */

.zp-hidden {
    display: none !important;
}

.zp-block {
    display: block;
}

.zp-inline-block {
    display: inline-block;
}

.zp-w-full {
    width: 100%;
}

.zp-h-full {
    height: 100%;
}

.zp-rounded-sm {
    border-radius: var(--zp-radius-sm);
}

.zp-rounded-md {
    border-radius: var(--zp-radius-md);
}

.zp-rounded-lg {
    border-radius: var(--zp-radius-lg);
}

.zp-rounded-xl {
    border-radius: var(--zp-radius-xl);
}

.zp-rounded-full {
    border-radius: var(--zp-radius-full);
}

.zp-shadow-sm {
    box-shadow: var(--zp-shadow-sm);
}

.zp-shadow-md {
    box-shadow: var(--zp-shadow-md);
}

.zp-shadow-lg {
    box-shadow: var(--zp-shadow-lg);
}

/* ============================================
   BACKGROUNDS
   ============================================ */

.zp-bg-primary {
    background-color: var(--zp-primary);
}

.zp-bg-surface {
    background-color: var(--zp-surface);
}

.zp-bg-background {
    background-color: var(--zp-background);
}

.zp-bg-success {
    background-color: var(--zp-success);
}

.zp-bg-warning {
    background-color: var(--zp-warning);
}

.zp-bg-error {
    background-color: var(--zp-error);
}

/* ============================================
   POSITION
   ============================================ */

.zp-relative {
    position: relative;
}

.zp-absolute {
    position: absolute;
}

.zp-fixed {
    position: fixed;
}

.zp-sticky {
    position: sticky;
}

.zp-top-0 {
    top: 0;
}

.zp-bottom-0 {
    bottom: 0;
}

.zp-left-0 {
    left: 0;
}

.zp-right-0 {
    right: 0;
}

/* ============================================
   TRANSITIONS
   ============================================ */

.zp-transition {
    transition: all 0.15s ease;
}

.zp-transition-fast {
    transition: all 0.1s ease;
}

.zp-transition-slow {
    transition: all 0.3s ease;
}

/* ============================================
   CURSEUR
   ============================================ */

.zp-cursor-pointer {
    cursor: pointer;
}

.zp-cursor-not-allowed {
    cursor: not-allowed;
}

/* ============================================
   OVERFLOW
   ============================================ */

.zp-overflow-hidden {
    overflow: hidden;
}

.zp-overflow-auto {
    overflow: auto;
}

.zp-overflow-x-auto {
    overflow-x: auto;
}

.zp-overflow-y-auto {
    overflow-y: auto;
}

/* ============================================
   PRINT
   ============================================ */

@media print {
    .zp-no-print {
        display: none !important;
    }
}