/* ==========================================================================
   SIS — Feuille de style du module PHARMACIE
   --------------------------------------------------------------------------
   Grille de gestion des stocks (80 médicaments × colonnes de stock),
   pastilles de péremption, tableaux du catalogue et du tableau de bord.
   Les couleurs « sombre » correspondantes sont dans css/theme-sombre.css.
   ========================================================================== */

/* ------------------------- Grille des stocks ------------------------- */
.ph-cadre {
    overflow: auto;
    max-height: 70vh;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #f8fafc;
}

.ph-table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    font-size: 12px;
}

.ph-table thead th {
    position: sticky;
    top: 0;
    z-index: 20;
    background: #0c4a6e;
    color: #e0f2fe;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .2px;
    padding: 7px 4px;
    white-space: nowrap;
    border-right: 1px solid #075985;
}

.ph-table tbody td {
    border-bottom: 1px solid #e2e8f0;
    border-right: 1px solid #eef2f7;
    padding: 2px;
    text-align: center;
    background: #fff;
}

.ph-table tbody tr:hover td { background: #f8fafc; }
.ph-table tbody tr:hover td.ph-nom { background: #f1f5f9; }

.ph-table tfoot td {
    position: sticky;
    bottom: 0;
    z-index: 15;
    background: #fef3c7;
    color: #78350f;
    font-weight: 800;
    font-size: 11px;
    padding: 6px 4px;
    border-top: 2px solid #f59e0b;
    text-align: center;
}

/* Colonne du libellé : figée à gauche pendant le défilement */
.ph-table .ph-nom {
    position: sticky;
    left: 0;
    z-index: 10;
    background: #fff;
    text-align: left;
    padding: 5px 8px;
    min-width: 250px;
    max-width: 320px;
    font-weight: 600;
    color: #1e293b;
}
.ph-table thead .ph-nom { z-index: 30; background: #0c4a6e; color: #e0f2fe; }
.ph-table tfoot .ph-nom { background: #fef3c7; }

.ph-sous { display: block; font-size: 10px; font-weight: 500; color: #64748b; }
.ph-traceur {
    display: inline-block; margin-left: 4px; padding: 0 4px; border-radius: 4px;
    font-size: 9px; font-weight: 800; background: #e0f2fe; color: #075985;
    vertical-align: middle;
}

/* Marqueur coloré à gauche du libellé (péremption) */
.ph-marque::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: #cbd5e1;
}
.ph-marque { position: relative; }
.ph-marque.m-vert::before { background: #22c55e; }
.ph-marque.m-orange::before { background: #f97316; }
.ph-marque.m-rouge::before { background: #ef4444; }
.ph-marque.m-noir::before { background: #7f1d1d; }

/* ------------------------- Champs de saisie ------------------------- */
.ph-in {
    width: 100%;
    min-width: 52px;
    padding: 4px 2px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: #334155;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    outline: none;
}
.ph-in::placeholder { color: #94a3b8; }
/* Stock début reporté automatiquement du mois fin précédent */
.ph-in.ph-in-auto { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
.ph-in:focus { border-color: #0284c7; background: #f0f9ff; box-shadow: 0 0 0 2px rgba(2, 132, 199, .15); }
.ph-in.ph-in-perime { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.ph-in.ph-date { width: 128px; min-width: 128px; font-size: 11px; padding: 3px 2px; }
.ph-in.ph-date.ph-date-rouge { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.ph-in.ph-date.ph-date-orange { background: #ffedd5; color: #9a3412; border-color: #fdba74; }
.ph-in.ph-date.ph-date-vert { background: #dcfce7; color: #166534; border-color: #86efac; }
.ph-in.ph-date.ph-date-noir { background: #7f1d1d; color: #fff; border-color: #7f1d1d; }

.ph-select {
    width: 100%;
    min-width: 132px;
    padding: 4px 2px;
    font-size: 11px;
    font-weight: 600;
    color: #334155;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    outline: none;
}
.ph-select:focus { border-color: #0284c7; }

.ph-fin {
    display: inline-block; min-width: 46px; padding: 4px 6px; border-radius: 4px;
    background: #e0f2fe; color: #0c4a6e; font-weight: 800;
}
.ph-fin.ph-fin-zero { background: #fee2e2; color: #991b1b; }

/* ------------------------- Pastilles d'alerte ------------------------- */
.ph-chip {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 10px; font-weight: 800; padding: 2px 7px;
    border-radius: 999px; white-space: nowrap;
}
.ph-chip.ph-vert   { background: #dcfce7; color: #166534; }
.ph-chip.ph-orange { background: #ffedd5; color: #9a3412; }
.ph-chip.ph-rouge  { background: #fee2e2; color: #991b1b; }
.ph-chip.ph-noir   { background: #7f1d1d; color: #ffffff; }
.ph-chip.ph-gris   { background: #f1f5f9; color: #64748b; }
.ph-chip.ph-bleu   { background: #e0f2fe; color: #075985; }
.ph-chip.ph-violet { background: #f3e8ff; color: #6b21a8; }

/* ------------------------- Légende des pastilles ------------------------- */
.ph-legende { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; font-size: 11px; color: #475569; }

/* ------------------------- Cartes d'indicateurs ------------------------- */
.ph-kpi { display: flex; flex-direction: column; gap: 2px; }
.ph-kpi .ph-kpi-titre { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; }
.ph-kpi .ph-kpi-valeur { font-size: 22px; font-weight: 800; line-height: 1.15; }
.ph-kpi .ph-kpi-note { font-size: 10px; font-weight: 600; }

.ph-zone-graphique { position: relative; height: 260px; }

/* ------------------------- Catalogue ------------------------- */
.ph-cat-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.ph-cat-table th {
    background: #f1f5f9; color: #475569; font-size: 10px; text-transform: uppercase;
    padding: 8px; border-bottom: 1px solid #e2e8f0; text-align: left; white-space: nowrap;
}
.ph-cat-table td { border-bottom: 1px solid #eef2f7; padding: 3px 6px; }
.ph-cat-table tbody tr:hover { background: #f8fafc; }

/* ------------------------- Libellé modifiable dans la grille ------------------------- */
.ph-nom-in {
    display: inline-block;
    width: calc(100% - 24px);
    vertical-align: middle;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 1px 4px;
    font-size: 12px;
    font-weight: 700;
    color: #1e293b;
    outline: none;
    transition: background .15s, border-color .15s;
}
.ph-nom-in:hover { border-color: #bae6fd; background: #f0f9ff; }
.ph-nom-in:focus { border-color: #0284c7; background: #fff; box-shadow: 0 0 0 2px rgba(2, 132, 199, .15); }

/* ------------------------- Pagination des grilles ------------------------- */
.ph-pagination {
    display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center;
    justify-content: space-between; margin-top: 10px; padding: 8px 4px 2px 4px;
    border-top: 1px solid #e2e8f0;
}
.ph-pagination .ph-page-info {
    display: flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 700; color: #475569;
}
.ph-pagination select { width: auto; min-width: 62px; }
.ph-pages { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.ph-page {
    min-width: 30px; padding: 4px 9px; border: 1px solid #cbd5e1; background: #fff;
    color: #0f172a; border-radius: 6px; font-size: 11px; font-weight: 700; cursor: pointer;
    transition: background .15s, border-color .15s;
}
.ph-page:hover:not(:disabled) { background: #f0f9ff; border-color: #7dd3fc; }
.ph-page-active {
    min-width: 30px; padding: 4px 9px; border: 1px solid #0284c7; background: #0284c7;
    color: #fff; border-radius: 6px; font-size: 11px; font-weight: 700; cursor: default;
}
.ph-page.ph-page-off, .ph-page:disabled { opacity: .45; cursor: not-allowed; }