/* =============================================================================
   PHARMASN — Système de design
   =============================================================================

   Cette feuille définit l'identité visuelle et se superpose au thème Stisla
   d'origine (Bootstrap 4), qu'elle neutralise progressivement.

   Organisation :
     1. Jetons          — couleurs, espacements, rayons, ombres
     2. Base            — réinitialisation douce, typographie
     3. Mise en page    — barre latérale, en-tête, contenu
     4. Composants      — cartes, boutons, champs, tableaux, badges
     5. Écran de login
     6. Détail de commande
     7. Mouvement       — transitions et animations
     8. Impression
   ============================================================================= */

/* =============================================================================
   1. JETONS
   ============================================================================= */

:root {
    /* --- Marque ---------------------------------------------------------
       Vert pharmacie, rappel discret du drapeau sénégalais (vert, jaune,
       rouge) sans le citer littéralement. */
    --ph-primary:          #0E8F5A;
    --ph-primary-hover:    #0B7A4C;
    --ph-primary-active:   #096540;
    --ph-primary-soft:     #E6F4EE;
    --ph-primary-border:   #BFE3D3;

    --ph-accent:           #F4B740;
    --ph-accent-soft:      #FDF3DF;

    /* --- États ---------------------------------------------------------- */
    --ph-success:          #0E8F5A;
    --ph-success-soft:     #E6F4EE;
    --ph-warning:          #B87503;
    --ph-warning-soft:     #FDF3DF;
    --ph-danger:           #C6362C;
    --ph-danger-soft:      #FBEAE8;
    --ph-info:             #1F6FB2;
    --ph-info-soft:        #E8F1F9;

    /* --- Surfaces ------------------------------------------------------- */
    --ph-bg:               #F5F7F6;
    --ph-surface:          #FFFFFF;
    --ph-surface-raised:   #FFFFFF;
    --ph-surface-sunken:   #F0F3F2;
    --ph-sidebar:          #10231C;
    --ph-sidebar-hover:    #1A382C;

    /* --- Texte ---------------------------------------------------------- */
    --ph-text:             #16211D;
    --ph-text-muted:       #5E6B66;
    --ph-text-subtle:      #8A9691;
    --ph-text-on-dark:     #E8EFEC;
    --ph-text-on-primary:  #FFFFFF;

    /* --- Bordures ------------------------------------------------------- */
    --ph-border:           #E1E7E4;
    --ph-border-strong:    #C9D3CF;

    /* --- Rayons --------------------------------------------------------- */
    --ph-radius-sm:        8px;
    --ph-radius:           12px;
    --ph-radius-lg:        18px;
    --ph-radius-pill:      999px;

    /* --- Ombres --------------------------------------------------------- */
    --ph-shadow-sm:        0 1px 2px rgba(16, 35, 28, .06);
    --ph-shadow:           0 2px 8px rgba(16, 35, 28, .08);
    --ph-shadow-lg:        0 12px 32px rgba(16, 35, 28, .14);

    /* --- Espacements ---------------------------------------------------- */
    --ph-space-1:          4px;
    --ph-space-2:          8px;
    --ph-space-3:          12px;
    --ph-space-4:          16px;
    --ph-space-5:          24px;
    --ph-space-6:          32px;
    --ph-space-7:          48px;

    /* --- Typographie ---------------------------------------------------- */
    --ph-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, sans-serif;
    --ph-font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;

    /* --- Mouvement ------------------------------------------------------ */
    --ph-ease:             cubic-bezier(.4, 0, .2, 1);
    --ph-duration:         180ms;
    --ph-duration-slow:    320ms;
}

/* --- Mode sombre --------------------------------------------------------
   Désactivé par défaut : le thème d'origine sur lequel repose le back-office
   ne l'accepte pas, et suivre automatiquement le réglage du système donnait
   des écrans à moitié sombres. Il ne s'applique que si l'élément <html>
   porte data-theme="dark". */
:root[data-theme="dark"] {
    --ph-primary-soft:   #12291F;
    --ph-primary-border: #1D4536;
    --ph-success-soft:   #12291F;
    --ph-warning-soft:   #2B2113;
    --ph-danger-soft:    #2B1715;
    --ph-info-soft:      #14232F;
    --ph-bg:             #0D1512;
    --ph-surface:        #141F1A;
    --ph-surface-raised: #1A2A23;
    --ph-surface-sunken: #101A15;
    --ph-sidebar:        #0A120E;
    --ph-sidebar-hover:  #16281F;
    --ph-text:           #E8EFEC;
    --ph-text-muted:     #A3B0AA;
    --ph-text-subtle:    #76837D;
    --ph-border:         #24352D;
    --ph-border-strong:  #32493E;
    --ph-shadow-sm:      0 1px 2px rgba(0, 0, 0, .4);
    --ph-shadow:         0 2px 8px rgba(0, 0, 0, .45);
    --ph-shadow-lg:      0 12px 32px rgba(0, 0, 0, .55);
}

/* =============================================================================
   2. BASE
   ============================================================================= */

body,
body.layout-4 {
    font-family: var(--ph-font);
    font-size: 15px;
    line-height: 1.6;
    color: var(--ph-text);
    background: var(--ph-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 650;
    letter-spacing: -.011em;
    color: var(--ph-text);
}

a {
    color: var(--ph-primary);
    text-decoration: none;
    transition: color var(--ph-duration) var(--ph-ease);
}

a:hover,
a:focus {
    color: var(--ph-primary-hover);
    text-decoration: none;
}

/* Anneau de focus visible au clavier, invisible à la souris. */
:focus-visible {
    outline: 2px solid var(--ph-primary);
    outline-offset: 2px;
    border-radius: var(--ph-radius-sm);
}

code, pre, .ph-mono {
    font-family: var(--ph-font-mono);
    font-size: .875em;
}

/* Masque visuellement sans retirer de l'arbre d'accessibilité. */
.ph-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* =============================================================================
   3. MISE EN PAGE
   =============================================================================
   La mise en page est entièrement prise en charge ici. Le thème d'origine
   (Stisla) dépendait de son propre script pour déplier les sous-menus et
   faire défiler la barre latérale ; ce script faisait partie du code
   obfusqué retiré. Les règles ci-dessous ne dépendent plus de lui.
   ============================================================================= */

:root {
    --ph-sidebar-width: 264px;
    --ph-navbar-height: 64px;
}

.main-wrapper {
    background: var(--ph-bg);
    min-height: 100vh;
}

.navbar-bg {
    display: none !important;
}

/* --- Barre latérale ------------------------------------------------------ */
.main-sidebar,
.main-sidebar.sidebar-style-2 {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0;
    width: var(--ph-sidebar-width) !important;
    height: 100vh !important;
    background: var(--ph-surface) !important;
    border-right: 1px solid var(--ph-border) !important;
    box-shadow: none !important;
    z-index: 1040;
    display: flex;
    flex-direction: column;
    transition: transform var(--ph-duration-slow) var(--ph-ease);
}

#sidebar-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

/* En-tête de la barre : fixe, le menu défile en dessous. */
.main-sidebar .sidebar-brand {
    flex-shrink: 0;
    height: var(--ph-navbar-height) !important;
    line-height: var(--ph-navbar-height) !important;
    padding: 0 var(--ph-space-5) !important;
    text-align: left !important;
    background: var(--ph-surface);
    border-bottom: 1px solid var(--ph-border);
}

.main-sidebar .sidebar-brand a {
    color: var(--ph-primary) !important;
    font-weight: 800;
    font-size: 1.25rem;
    letter-spacing: -.02em;
    text-transform: none !important;
}

.main-sidebar .sidebar-brand-sm {
    display: none !important;
}

/* Menu : c'est lui qui défile, avec une barre discrète. */
.main-sidebar .sidebar-menu {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto !important;
    overflow-x: hidden;
    padding: var(--ph-space-3) 0 var(--ph-space-6) !important;
    margin: 0;
    list-style: none;
    scrollbar-width: thin;
    scrollbar-color: var(--ph-border-strong) transparent;
    overscroll-behavior: contain;
}

.main-sidebar .sidebar-menu::-webkit-scrollbar { width: 6px; }
.main-sidebar .sidebar-menu::-webkit-scrollbar-track { background: transparent; }
.main-sidebar .sidebar-menu::-webkit-scrollbar-thumb {
    background: var(--ph-border-strong);
    border-radius: var(--ph-radius-pill);
}
.main-sidebar .sidebar-menu::-webkit-scrollbar-thumb:hover { background: var(--ph-text-subtle); }

.main-sidebar .sidebar-menu li {
    display: block;
    position: relative;
}

/* Intitulés de rubrique */
.main-sidebar .sidebar-menu li.menu-header {
    padding: var(--ph-space-5) var(--ph-space-5) var(--ph-space-2) !important;
    color: var(--ph-text-subtle) !important;
    font-size: .6875rem !important;
    font-weight: 700 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase;
    height: auto !important;
    line-height: 1.4 !important;
}

/* Liens de premier niveau */
.main-sidebar .sidebar-menu li > a {
    display: flex !important;
    align-items: center;
    gap: var(--ph-space-3);
    height: auto !important;
    min-height: 42px;
    margin: 2px var(--ph-space-3) !important;
    padding: 9px var(--ph-space-3) !important;
    border-radius: var(--ph-radius-sm);
    color: var(--ph-text-muted) !important;
    font-size: .9375rem !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    white-space: nowrap;
    background: transparent;
    transition: background var(--ph-duration) var(--ph-ease), color var(--ph-duration) var(--ph-ease);
}

.main-sidebar .sidebar-menu li > a > i {
    flex-shrink: 0;
    width: 20px !important;
    margin: 0 !important;
    font-size: 1rem !important;
    text-align: center;
    color: var(--ph-text-subtle);
    transition: color var(--ph-duration) var(--ph-ease);
}

.main-sidebar .sidebar-menu li > a > span {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
}

.main-sidebar .sidebar-menu li > a:hover {
    background: var(--ph-surface-sunken) !important;
    color: var(--ph-text) !important;
}

.main-sidebar .sidebar-menu li > a:hover > i { color: var(--ph-primary); }

/* Page courante */
.main-sidebar .sidebar-menu li > a.ph-active,
.main-sidebar .sidebar-menu li.ph-current > a {
    background: var(--ph-primary-soft) !important;
    color: var(--ph-primary) !important;
    font-weight: 600 !important;
}

.main-sidebar .sidebar-menu li > a.ph-active > i,
.main-sidebar .sidebar-menu li.ph-current > a > i {
    color: var(--ph-primary);
}

/* Le thème d'origine peignait l'élément « active » d'un fond plein : neutralisé. */
.main-sidebar .sidebar-menu li.active > a {
    box-shadow: none !important;
}

/* --- Sous-menus en accordéon --------------------------------------------- */
.main-sidebar .sidebar-menu a.has-dropdown::after {
    content: "";
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    margin-left: auto;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    opacity: .55;
    transition: transform var(--ph-duration) var(--ph-ease);
    /* Annule la flèche du thème d'origine. */
    position: static !important;
    top: auto !important;
    right: auto !important;
    font-family: inherit !important;
}

.main-sidebar .sidebar-menu li.ph-open > a.has-dropdown::after {
    transform: rotate(45deg);
}

.main-sidebar .sidebar-menu .ph-submenu {
    display: none;
    list-style: none;
    margin: 0 var(--ph-space-3) var(--ph-space-2) calc(var(--ph-space-3) + 19px);
    padding: 2px 0 2px var(--ph-space-3);
    border-left: 1px solid var(--ph-border);
}

.main-sidebar .sidebar-menu li.ph-open > .ph-submenu {
    display: block;
    animation: ph-fade var(--ph-duration) var(--ph-ease) both;
}

.main-sidebar .sidebar-menu .ph-submenu li > a {
    min-height: 36px;
    margin: 1px 0 !important;
    padding: 7px var(--ph-space-3) !important;
    font-size: .875rem !important;
    font-weight: 450 !important;
}

.main-sidebar .sidebar-menu .ph-submenu li > a::before { display: none !important; }

/* Pastilles de compteur */
.main-sidebar .sidebar-menu .ph-badge {
    margin-left: auto !important;
    padding: 2px 8px;
    font-size: .6875rem;
}

/* --- Barre supérieure ---------------------------------------------------- */
.main-navbar,
.navbar.main-navbar {
    position: fixed !important;
    top: 0 !important;
    left: var(--ph-sidebar-width) !important;
    right: 0 !important;
    height: var(--ph-navbar-height) !important;
    padding: 0 var(--ph-space-5) !important;
    background: var(--ph-surface) !important;
    border-bottom: 1px solid var(--ph-border);
    box-shadow: none !important;
    z-index: 1030;
    transition: left var(--ph-duration-slow) var(--ph-ease);
}

.main-navbar .nav-link {
    color: var(--ph-text-muted) !important;
    border-radius: var(--ph-radius-sm);
    transition: background var(--ph-duration) var(--ph-ease), color var(--ph-duration) var(--ph-ease);
}

.main-navbar .nav-link:hover {
    color: var(--ph-primary) !important;
    background: var(--ph-primary-soft);
}

.main-navbar .nav-link-user img {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border: 2px solid var(--ph-border);
}

.main-navbar .dropdown-menu {
    border: 1px solid var(--ph-border);
    border-radius: var(--ph-radius);
    box-shadow: var(--ph-shadow-lg);
    padding: var(--ph-space-2);
    background: var(--ph-surface);
}

.main-navbar .dropdown-item {
    border-radius: var(--ph-radius-sm);
    padding: 8px var(--ph-space-3);
    display: flex;
    align-items: center;
    gap: var(--ph-space-2);
}

/* --- Contenu principal --------------------------------------------------- */
.main-content {
    width: auto !important;
    min-height: 100vh;
    margin-left: var(--ph-sidebar-width) !important;
    padding: calc(var(--ph-navbar-height) + var(--ph-space-6)) var(--ph-space-6) var(--ph-space-7) !important;
    background: var(--ph-bg);
    transition: margin-left var(--ph-duration-slow) var(--ph-ease);
}

.main-content > .section { max-width: 1400px; margin: 0 auto; }

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--ph-space-3);
    margin: 0 0 var(--ph-space-5) !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.section-header h1 {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: var(--ph-text) !important;
    margin: 0;
}

.ph-page-subtitle {
    color: var(--ph-text-muted);
    font-size: .9375rem;
    margin: var(--ph-space-1) 0 0;
}

/* --- Barre repliée (ordinateur) ------------------------------------------ */
body.ph-sidebar-collapsed .main-sidebar { transform: translateX(-100%); }
body.ph-sidebar-collapsed .main-navbar  { left: 0 !important; }
body.ph-sidebar-collapsed .main-content { margin-left: 0 !important; }

/* Voile du menu mobile */
.ph-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(16, 35, 28, .45);
    z-index: 1035;
    opacity: 0;
    transition: opacity var(--ph-duration-slow) var(--ph-ease);
}

/* --- Tablette et mobile -------------------------------------------------- */
@media (max-width: 991.98px) {
    .main-sidebar { transform: translateX(-100%); box-shadow: var(--ph-shadow-lg) !important; }
    .main-navbar  { left: 0 !important; }
    .main-content { margin-left: 0 !important; padding: calc(var(--ph-navbar-height) + var(--ph-space-4)) var(--ph-space-4) var(--ph-space-6) !important; }

    body.ph-sidebar-open .main-sidebar { transform: translateX(0); }
    body.ph-sidebar-open .ph-sidebar-overlay { display: block; opacity: 1; }
    body.ph-sidebar-open { overflow: hidden; }
}

/* =============================================================================
   4. COMPOSANTS
   ============================================================================= */

/* --- Cartes -------------------------------------------------------------- */
.card,
.ph-card {
    background: var(--ph-surface);
    border: 1px solid var(--ph-border);
    border-radius: var(--ph-radius);
    box-shadow: var(--ph-shadow-sm);
    transition: box-shadow var(--ph-duration) var(--ph-ease),
                transform var(--ph-duration) var(--ph-ease);
}

.card:hover,
.ph-card:hover {
    box-shadow: var(--ph-shadow);
}

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--ph-border);
    padding: var(--ph-space-4) var(--ph-space-5);
    min-height: auto;
}

.card-header h4,
.card-header h2 {
    font-size: 1.0625rem;
    font-weight: 650;
    margin: 0;
}

.card-body {
    padding: var(--ph-space-5);
}

.card-footer {
    background: var(--ph-surface-sunken);
    border-top: 1px solid var(--ph-border);
    padding: var(--ph-space-4) var(--ph-space-5);
}

/* --- Tuiles de statistique ----------------------------------------------- */
.ph-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: var(--ph-space-4);
    margin-bottom: var(--ph-space-5);
}

.ph-stat {
    background: var(--ph-surface);
    border: 1px solid var(--ph-border);
    border-radius: var(--ph-radius);
    padding: var(--ph-space-5);
    box-shadow: var(--ph-shadow-sm);
    display: flex;
    align-items: flex-start;
    gap: var(--ph-space-4);
    transition: transform var(--ph-duration) var(--ph-ease),
                box-shadow var(--ph-duration) var(--ph-ease);
}

.ph-stat:hover {
    transform: translateY(-2px);
    box-shadow: var(--ph-shadow);
}

.ph-stat__icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: var(--ph-radius-sm);
    font-size: 1.125rem;
    background: var(--ph-primary-soft);
    color: var(--ph-primary);
}

.ph-stat__icon--warning { background: var(--ph-warning-soft); color: var(--ph-warning); }
.ph-stat__icon--danger  { background: var(--ph-danger-soft);  color: var(--ph-danger); }
.ph-stat__icon--info    { background: var(--ph-info-soft);    color: var(--ph-info); }
.ph-stat__icon--accent  { background: var(--ph-accent-soft);  color: #9A6E05; }

.ph-stat__body { min-width: 0; }

.ph-stat__label {
    display: block;
    font-size: .8125rem;
    font-weight: 500;
    color: var(--ph-text-muted);
    margin-bottom: var(--ph-space-1);
}

.ph-stat__value {
    display: block;
    font-size: 1.625rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.02em;
    /* Chiffres de largeur fixe : les colonnes ne sautent pas au rafraîchissement. */
    font-variant-numeric: tabular-nums;
}

.ph-stat__hint {
    display: block;
    font-size: .8125rem;
    color: var(--ph-text-subtle);
    margin-top: var(--ph-space-1);
}

/* --- Boutons ------------------------------------------------------------- */
.ph-btn,
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ph-space-2);
    font-family: var(--ph-font);
    font-size: .9375rem;
    font-weight: 550;
    line-height: 1.2;
    padding: 10px var(--ph-space-4);
    border-radius: var(--ph-radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--ph-duration) var(--ph-ease),
                border-color var(--ph-duration) var(--ph-ease),
                color var(--ph-duration) var(--ph-ease),
                transform var(--ph-duration) var(--ph-ease),
                box-shadow var(--ph-duration) var(--ph-ease);
}

.ph-btn:active,
.btn:active {
    transform: translateY(1px);
}

.ph-btn--primary,
.btn-primary {
    background: var(--ph-primary);
    border-color: var(--ph-primary);
    color: var(--ph-text-on-primary);
    box-shadow: 0 1px 3px rgba(14, 143, 90, .3);
}

.ph-btn--primary:hover,
.btn-primary:hover,
.btn-primary:focus {
    background: var(--ph-primary-hover);
    border-color: var(--ph-primary-hover);
    color: var(--ph-text-on-primary);
    box-shadow: 0 3px 10px rgba(14, 143, 90, .35);
}

.ph-btn--ghost {
    background: var(--ph-surface);
    border-color: var(--ph-border-strong);
    color: var(--ph-text);
}

.ph-btn--ghost:hover {
    background: var(--ph-primary-soft);
    border-color: var(--ph-primary-border);
    color: var(--ph-primary);
}

.ph-btn--danger,
.btn-danger {
    background: var(--ph-danger);
    border-color: var(--ph-danger);
    color: #FFFFFF;
}

.ph-btn--danger:hover,
.btn-danger:hover {
    filter: brightness(.93);
    color: #FFFFFF;
}

.ph-btn--block {
    width: 100%;
}

.ph-btn--sm {
    padding: 6px var(--ph-space-3);
    font-size: .8125rem;
}

.ph-btn[disabled],
.btn[disabled],
.ph-btn.is-loading {
    opacity: .6;
    pointer-events: none;
}

/* --- Champs de formulaire ------------------------------------------------ */
.ph-field {
    margin-bottom: var(--ph-space-4);
}

.ph-field__label,
.form-group > label,
label.control-label {
    display: block;
    font-size: .875rem;
    font-weight: 550;
    color: var(--ph-text);
    margin-bottom: var(--ph-space-2);
}

.ph-field__control {
    position: relative;
    display: flex;
    align-items: center;
}

.ph-field__icon {
    position: absolute;
    left: var(--ph-space-4);
    color: var(--ph-text-subtle);
    font-size: .9375rem;
    pointer-events: none;
    transition: color var(--ph-duration) var(--ph-ease);
}

.ph-field__control:focus-within .ph-field__icon {
    color: var(--ph-primary);
}

.ph-input,
.form-control {
    width: 100%;
    font-family: var(--ph-font);
    font-size: .9375rem;
    color: var(--ph-text);
    background: var(--ph-surface);
    border: 1px solid var(--ph-border-strong);
    border-radius: var(--ph-radius-sm);
    padding: 11px var(--ph-space-4);
    height: auto;
    transition: border-color var(--ph-duration) var(--ph-ease),
                box-shadow var(--ph-duration) var(--ph-ease);
}

.ph-field__icon ~ .ph-input {
    padding-left: 42px;
}

.ph-input:focus,
.form-control:focus {
    outline: none;
    border-color: var(--ph-primary);
    box-shadow: 0 0 0 3px rgba(14, 143, 90, .14);
    background: var(--ph-surface);
    color: var(--ph-text);
}

.ph-input::placeholder,
.form-control::placeholder {
    color: var(--ph-text-subtle);
}

.ph-field__toggle {
    position: absolute;
    right: var(--ph-space-2);
    background: none;
    border: none;
    color: var(--ph-text-subtle);
    padding: var(--ph-space-2);
    cursor: pointer;
    border-radius: var(--ph-radius-sm);
    transition: color var(--ph-duration) var(--ph-ease);
}

.ph-field__toggle:hover {
    color: var(--ph-primary);
}

.ph-field__hint {
    display: block;
    font-size: .8125rem;
    color: var(--ph-text-muted);
    margin-top: var(--ph-space-1);
}

.ph-field__error {
    display: block;
    font-size: .8125rem;
    color: var(--ph-danger);
    margin-top: var(--ph-space-1);
}

/* --- Alertes ------------------------------------------------------------- */
.ph-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--ph-space-3);
    padding: var(--ph-space-4);
    border-radius: var(--ph-radius-sm);
    border: 1px solid transparent;
    font-size: .9375rem;
    margin-bottom: var(--ph-space-4);
}

.ph-alert i { margin-top: 2px; flex-shrink: 0; }

.ph-alert--danger  { background: var(--ph-danger-soft);  border-color: var(--ph-danger);  color: var(--ph-danger); }
.ph-alert--success { background: var(--ph-success-soft); border-color: var(--ph-success); color: var(--ph-success); }
.ph-alert--warning { background: var(--ph-warning-soft); border-color: var(--ph-warning); color: var(--ph-warning); }
.ph-alert--info    { background: var(--ph-info-soft);    border-color: var(--ph-info);    color: var(--ph-info); }

/* --- Badges -------------------------------------------------------------- */
.ph-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--ph-space-1);
    padding: 4px 10px;
    border-radius: var(--ph-radius-pill);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .01em;
    white-space: nowrap;
}

.ph-badge--success { background: var(--ph-success-soft); color: var(--ph-success); }
.ph-badge--warning { background: var(--ph-warning-soft); color: var(--ph-warning); }
.ph-badge--danger  { background: var(--ph-danger-soft);  color: var(--ph-danger); }
.ph-badge--info    { background: var(--ph-info-soft);    color: var(--ph-info); }
.ph-badge--primary { background: var(--ph-primary-soft); color: var(--ph-primary); }
.ph-badge--muted   { background: var(--ph-surface-sunken); color: var(--ph-text-muted); }

/* --- Tableaux ------------------------------------------------------------ */
.ph-table-wrap {
    overflow-x: auto;
    border-radius: var(--ph-radius);
    -webkit-overflow-scrolling: touch;
}

.ph-table,
.table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .9375rem;
    color: var(--ph-text);
}

.ph-table thead th,
.table thead th {
    background: var(--ph-surface-sunken);
    color: var(--ph-text-muted);
    font-size: .75rem;
    font-weight: 650;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: var(--ph-space-3) var(--ph-space-4);
    border: none;
    border-bottom: 1px solid var(--ph-border);
    white-space: nowrap;
    text-align: left;
}

.ph-table tbody td,
.table tbody td {
    padding: var(--ph-space-3) var(--ph-space-4);
    border: none;
    border-bottom: 1px solid var(--ph-border);
    vertical-align: middle;
}

.ph-table tbody tr,
.table tbody tr {
    transition: background var(--ph-duration) var(--ph-ease);
}

.ph-table tbody tr:hover,
.table tbody tr:hover {
    background: var(--ph-primary-soft);
}

.ph-table tbody tr:last-child td {
    border-bottom: none;
}

/* Colonnes de nombres : alignées à droite, chiffres de largeur fixe. */
.ph-num,
.ph-table .ph-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ph-empty {
    text-align: center;
    color: var(--ph-text-subtle);
    padding: var(--ph-space-7) var(--ph-space-4);
    font-style: italic;
}

/* --- Actions en ligne de tableau ----------------------------------------- */
.ph-actions {
    display: flex;
    gap: var(--ph-space-2);
    justify-content: flex-end;
}

.ph-icon-btn {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: var(--ph-radius-sm);
    border: 1px solid var(--ph-border);
    background: var(--ph-surface);
    color: var(--ph-text-muted);
    font-size: .875rem;
    cursor: pointer;
    transition: all var(--ph-duration) var(--ph-ease);
}

.ph-icon-btn:hover {
    background: var(--ph-primary-soft);
    border-color: var(--ph-primary-border);
    color: var(--ph-primary);
}

.ph-icon-btn--danger:hover {
    background: var(--ph-danger-soft);
    border-color: var(--ph-danger);
    color: var(--ph-danger);
}

/* --- Vignettes ----------------------------------------------------------- */
.ph-thumb {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: var(--ph-radius-sm);
    border: 1px solid var(--ph-border);
    background: var(--ph-surface-sunken);
}

/* --- Modales ------------------------------------------------------------- */
.modal-content {
    border: none;
    border-radius: var(--ph-radius-lg);
    box-shadow: var(--ph-shadow-lg);
    background: var(--ph-surface);
}

.modal-header {
    border-bottom: 1px solid var(--ph-border);
    padding: var(--ph-space-5);
}

.modal-body {
    padding: var(--ph-space-5);
}

/* =============================================================================
   5. ÉCRAN DE CONNEXION
   ============================================================================= */

.ph-auth-body {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(1000px 600px at 12% -10%, rgba(14, 143, 90, .16), transparent 60%),
        radial-gradient(800px 500px at 100% 110%, rgba(244, 183, 64, .12), transparent 55%),
        var(--ph-bg);
}

.ph-auth {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--ph-space-5) var(--ph-space-4);
    gap: var(--ph-space-5);
}

.ph-auth__panel {
    width: 100%;
    max-width: 420px;
    background: var(--ph-surface);
    border: 1px solid var(--ph-border);
    border-radius: var(--ph-radius-lg);
    box-shadow: var(--ph-shadow-lg);
    padding: var(--ph-space-6);
    animation: ph-rise var(--ph-duration-slow) var(--ph-ease) both;
}

.ph-auth__brand {
    text-align: center;
    margin-bottom: var(--ph-space-6);
}

.ph-auth__logo {
    max-width: 130px;
    max-height: 64px;
    object-fit: contain;
    margin-bottom: var(--ph-space-4);
}

.ph-auth__mark {
    display: inline-grid;
    place-items: center;
    width: 60px;
    height: 60px;
    border-radius: var(--ph-radius);
    background: var(--ph-primary);
    color: #FFFFFF;
    font-size: 1.6rem;
    margin-bottom: var(--ph-space-4);
    box-shadow: 0 6px 18px rgba(14, 143, 90, .35);
}

.ph-auth__title {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -.02em;
    margin: 0;
}

.ph-auth__subtitle {
    color: var(--ph-text-muted);
    font-size: .9375rem;
    margin: var(--ph-space-1) 0 0;
}

.ph-auth__form {
    margin-bottom: var(--ph-space-4);
}

.ph-auth__footnote {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ph-space-2);
    font-size: .8125rem;
    color: var(--ph-text-subtle);
    margin: 0;
}

.ph-auth__legal {
    font-size: .8125rem;
    color: var(--ph-text-subtle);
    margin: 0;
}

/* =============================================================================
   6. DÉTAIL DE COMMANDE
   ============================================================================= */

.ph-order__toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: var(--ph-space-4);
}

.ph-order__sheet {
    background: var(--ph-surface);
}

.ph-order__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ph-space-4);
    padding-bottom: var(--ph-space-4);
    border-bottom: 1px solid var(--ph-border);
    margin-bottom: var(--ph-space-4);
}

.ph-order__label {
    display: block;
    font-size: .75rem;
    font-weight: 650;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ph-text-muted);
}

.ph-order__id strong {
    font-size: 1.375rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.ph-order__meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--ph-space-4);
    margin: 0 0 var(--ph-space-5);
}

.ph-order__meta dt {
    font-size: .75rem;
    font-weight: 650;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ph-text-muted);
    margin-bottom: var(--ph-space-1);
}

.ph-order__meta dd {
    margin: 0;
    font-size: .9375rem;
    color: var(--ph-text);
}

.ph-order__product {
    min-width: 180px;
}

.ph-order__product-name {
    display: block;
    font-weight: 550;
}

.ph-order__product-variant {
    display: block;
    font-size: .8125rem;
    color: var(--ph-text-muted);
}

.ph-order__thumb {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: var(--ph-radius-sm);
    border: 1px solid var(--ph-border);
}

.ph-summary {
    list-style: none;
    margin: var(--ph-space-5) 0 0;
    padding: 0;
    border: 1px solid var(--ph-border);
    border-radius: var(--ph-radius);
    overflow: hidden;
}

.ph-summary li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ph-space-4);
    padding: var(--ph-space-3) var(--ph-space-4);
    border-bottom: 1px solid var(--ph-border);
    font-size: .9375rem;
}

.ph-summary li:last-child { border-bottom: none; }

.ph-summary__value {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ph-summary--credit .ph-summary__value { color: var(--ph-success); }

.ph-summary--total {
    background: var(--ph-primary-soft);
    font-weight: 650;
}

.ph-summary--total .ph-summary__value {
    font-size: 1.125rem;
    color: var(--ph-primary);
}

/* =============================================================================
   7. MOUVEMENT
   ============================================================================= */

@keyframes ph-rise {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes ph-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes ph-spin {
    to { transform: rotate(360deg); }
}

.ph-rise { animation: ph-rise var(--ph-duration-slow) var(--ph-ease) both; }
.ph-fade { animation: ph-fade var(--ph-duration-slow) var(--ph-ease) both; }

/* Apparition décalée des cartes : donne du rythme sans ralentir la page. */
.ph-stagger > * { animation: ph-rise var(--ph-duration-slow) var(--ph-ease) both; }
.ph-stagger > *:nth-child(1) { animation-delay:  0ms; }
.ph-stagger > *:nth-child(2) { animation-delay: 45ms; }
.ph-stagger > *:nth-child(3) { animation-delay: 90ms; }
.ph-stagger > *:nth-child(4) { animation-delay: 135ms; }
.ph-stagger > *:nth-child(5) { animation-delay: 180ms; }
.ph-stagger > *:nth-child(6) { animation-delay: 225ms; }

.ph-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: ph-spin 600ms linear infinite;
}

/* Respecte le réglage système « réduire les animations » : indispensable
   pour les personnes sensibles au mouvement. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* =============================================================================
   8. IMPRESSION
   ============================================================================= */

@media print {
    .main-sidebar,
    .main-navbar,
    .ph-order__toolbar,
    .ph-actions,
    .modal-header,
    .no-print {
        display: none !important;
    }

    body,
    .main-content,
    .modal-content {
        background: #FFFFFF !important;
        color: #000000 !important;
        box-shadow: none !important;
    }

    .ph-table thead th {
        background: #F0F0F0 !important;
        color: #000000 !important;
    }

    .ph-summary--total {
        background: #F0F0F0 !important;
    }

    a[href]::after { content: none !important; }
}

/* =============================================================================
   RÉACTIVITÉ
   ============================================================================= */

@media (max-width: 768px) {
    body { font-size: 14px; }

    .main-content { padding-top: var(--ph-space-4); }

    .section-header h1 { font-size: 1.25rem; }

    .card-body,
    .ph-auth__panel { padding: var(--ph-space-4); }

    .ph-stats { grid-template-columns: 1fr; }

    .ph-order__header {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Le tableau défile horizontalement plutôt que de déborder la page. */
    .ph-table-wrap { margin: 0 calc(var(--ph-space-4) * -1); padding: 0 var(--ph-space-4); }
}

/* =============================================================================
   CORRECTIFS DE MISE EN PAGE
   ============================================================================= */

/* Pastilles de compteur : largeur ajustée au contenu, jamais étirées. */
.main-sidebar .sidebar-menu li > a > span.ph-badge {
    flex: 0 0 auto;
    margin-left: auto !important;
}

/* Flèche des rubriques : remplace celle du thème d'origine, conçue pour
   Font Awesome 5 et positionnée en absolu. */
.main-sidebar .sidebar-menu li > a.has-dropdown::after {
    content: "" !important;
    position: static !important;
    display: block;
    flex: 0 0 auto;
    width: 7px !important;
    height: 7px !important;
    margin: 0 2px 0 auto !important;
    border-right: 2px solid currentColor !important;
    border-bottom: 2px solid currentColor !important;
    font-size: 0 !important;
    transform: rotate(-45deg) !important;
    opacity: .5;
    transition: transform var(--ph-duration) var(--ph-ease) !important;
}

.main-sidebar .sidebar-menu li.ph-open > a.has-dropdown::after {
    transform: rotate(45deg) !important;
    opacity: .8;
}

/* Trait violet du thème d'origine sur l'élément actif : retiré. */
.main-sidebar .sidebar-menu li > a::before { display: none !important; }

/* Montants longs (« 1 245 500 FCFA ») : taille adaptée plutôt que retour à la ligne. */
.ph-stat__value {
    font-size: clamp(1.125rem, 1.35vw + .5rem, 1.625rem);
    white-space: nowrap;
}

.ph-stat__body { min-width: 0; overflow: hidden; }

/* Le thème d'origine impose « width: 100% » à tous les textes du menu,
   pastilles comprises : le libellé était écrasé à zéro. */
.main-sidebar .sidebar-menu li > a > span {
    width: auto !important;
    margin-top: 0 !important;
}

/* Montant : retour à la ligne autorisé entre le nombre et la devise plutôt
   qu'un texte coupé. */
.ph-stat__value {
    white-space: normal;
    overflow-wrap: anywhere;
}
.ph-stat__body { overflow: visible; }

/* Les liens du thème font « width: 100% » : ajoutée aux marges, cette
   largeur les faisait déborder de la barre. */
.main-sidebar .sidebar-menu li > a { width: auto !important; }

/* Barre supérieure : la règle générale (.navbar.main-navbar) était plus
   spécifique que la règle mobile, qui ne s'appliquait donc pas. */
body.ph-sidebar-collapsed .navbar.main-navbar { left: 0 !important; }

@media (max-width: 991.98px) {
    .navbar.main-navbar,
    .main-navbar { left: 0 !important; }

    /* L'ombre n'apparaît que menu ouvert : masqué, il laissait un liseré. */
    .main-sidebar { box-shadow: none !important; }
    body.ph-sidebar-open .main-sidebar { box-shadow: var(--ph-shadow-lg) !important; }
}