/* ==========================================================================
CLIENT PORTAL — FEUILLE DE STYLE GLOBALE
==========================================================================
Centralise :
1. Les design tokens (--cp-*) : couleurs, ombres, rayons, etc.
2. Les classes utilitaires partagées : cartes, sections, tableaux,
inputs, en-têtes de détail,
états vides, métriques, helpers texte.
Convention de nommage des classes :
.acc-* composants partagés des pages "Mon compte" (cartes, tables, inputs, sections)
.adh-* en-tête de page de détail (Account Detail Header)
.detail-* primitives partagées entre toutes les pages de détail
.text-* utilitaires de texte (alignement, couleur sémantique)
Préfixes spécifiques (NE PAS mettre ici, restent dans la page concernée) :
.db-* Dashboard
.bat-* Bon à tirer (PrintProofDetail)
.cmd-* Commande (OrderDetail)
.pd-* ProductDetail
.home-* Home
.products-* Liste de produits
.company-* Page Société
.team-* Page Équipe
.contact-* Page Contact
Ce fichier est chargé via index.html (cf. ).
Tous les composants `My*` peuvent referencer ces variables et classes.
========================================================================== */
/* ==========================================================================
1. DESIGN TOKENS — deplacees dans Naruto.SharedUI/wwwroot/css/global.css
--------------------------------------------------------------------------
Les variables --cp-* sont desormais declarees dans global.css pour etre
disponibles dans les 3 apps. Utiliser var(--cp-xxx) partout.
========================================================================== */
/* ==========================================================================
2. CARTE (.acc-card)
--------------------------------------------------------------------------
Déplacé dans global.css — disponible dans les 3 apps.
========================================================================== */
/* En-tête à l'intérieur d'une .acc-card : libellé à gauche + lien "voir tout" à droite.
Utilisé sur Dashboard, QuoteDetail, InvoiceDetail, PrintProofDetail. */
.db-section-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 14px;
}
.db-see-all {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.75rem;
font-weight: 700;
color: var(--cp-primary);
text-decoration: none;
transition: color 0.15s, gap 0.2s;
}
.db-see-all:hover { color: var(--cp-primary-dark); gap: 8px; }
.db-see-all-arrow { display: inline-flex !important; transition: transform 0.2s ease; }
.db-see-all:hover .db-see-all-arrow { transform: translateX(4px); }
/* ==========================================================================
3. LIBELLÉ DE SECTION (.acc-section-label)
--------------------------------------------------------------------------
Petite étiquette en majuscules, espacée, gris pâle, qui titre une section
à l'intérieur d'une .acc-card. Exemple : "DERNIERS DEVIS", "ARTICLES".
========================================================================== */
.acc-section-label {
font-size: 0.62rem;
font-weight: 900;
letter-spacing: 2px;
color: var(--cp-subtle);
text-transform: uppercase;
margin: 0;
}
/* ==========================================================================
4. TABLEAU (.acc-table) + wrapper de défilement
--------------------------------------------------------------------------
Tableau standard du portail (devis, commandes, factures, articles).
========================================================================== */
.acc-table-wrapper {
overflow-x: auto;
}
.acc-table {
width: 100%;
border-collapse: collapse;
font-size: 0.875rem;
}
.acc-table thead tr {
border-bottom: 2px solid var(--cp-border-light);
}
.acc-table th {
padding: 10px 14px;
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.8px;
text-transform: uppercase;
color: var(--cp-subtle);
text-align: left;
white-space: nowrap;
}
.acc-table td {
padding: 13px 14px;
color: #444;
border-bottom: 1px solid #f7f7f7;
white-space: nowrap;
}
.acc-table tbody tr:last-child td { border-bottom: none; }
.acc-table tbody tr:hover td { background: #fafafa; }
/* Référence en gras (n° de commande, code produit) */
.acc-table-ref { font-weight: 700; color: #373854; }
/* ==========================================================================
5. CHAMPS DE FORMULAIRE
--------------------------------------------------------------------------
Deux variantes :
.acc-input input/textarea standard (pages MonCompte, formulaires)
.acc-form-input variante plus dense pour barre de recherche dans listes
========================================================================== */
.acc-input {
width: 100%;
padding: 10px 14px;
border: 1.5px solid #e8e8e8;
border-radius: 10px;
font-size: 0.9rem;
font-family: inherit;
color: var(--cp-dark);
outline: none;
resize: none;
transition: border-color 0.2s;
background: white;
box-sizing: border-box;
}
.acc-input:focus { border-color: var(--cp-primary); }
.acc-form-input {
width: 100%;
padding: 9px 14px;
border: 1.5px solid #e8e8e8;
border-radius: 10px;
font-size: 0.85rem;
color: var(--cp-dark);
outline: none;
transition: border-color 0.2s;
background: white;
box-sizing: border-box;
}
.acc-form-input:focus { border-color: var(--cp-primary); }
/* ==========================================================================
6. EN-TÊTE DE PAGE DE DÉTAIL (.adh-* — Account Detail Header)
--------------------------------------------------------------------------
Bloc lien "retour", titre + chip de statut, sous-titre, info text.
Rendu par , mais classes utilisées également dans
les squelettes de chargement des pages détail.
========================================================================== */
.adh-header { margin-bottom: 20px; }
.adh-back {
display: inline-flex;
align-items: center;
gap: 6px;
color: #999;
font-size: 0.8rem;
font-weight: 600;
font-family: inherit;
text-decoration: none;
margin-bottom: 14px;
transition: color 0.15s, gap 0.15s;
}
.adh-back:hover { color: var(--cp-primary); gap: 10px; }
.adh-title-row {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
margin-bottom: 4px;
}
.adh-ref {
font-size: 1.7rem;
font-weight: 900;
font-family: inherit;
color: var(--cp-dark);
margin: 0;
letter-spacing: -0.5px;
}
.adh-subtitle {
font-size: 0.95rem;
font-family: inherit;
color: #777;
margin: 4px 0 0;
}
.adh-info-text {
display: inline-flex;
align-items: center;
gap: 6px;
margin: 10px 0 0;
font-size: 0.8rem;
font-weight: 600;
font-family: inherit;
color: var(--cp-muted);
}
.adh-info-icon {
font-size: 0.95rem !important;
color: var(--cp-subtle);
flex-shrink: 0;
}
/* ==========================================================================
7. PAGE DÉTAIL — ENTITÉ INTROUVABLE
--------------------------------------------------------------------------
Affiché lorsque l'entité (devis, commande, BAT, facture) demandée n'existe
pas. Centre verticalement avec un message court et un lien retour.
========================================================================== */
.detail-not-found {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 300px;
text-align: center;
color: var(--cp-subtle);
gap: 8px;
}
.detail-not-found p { margin: 0; font-size: 1rem; font-family: inherit; }
/* ==========================================================================
8. BARRE D'ACTIONS DE PAGE DÉTAIL (.detail-actions)
--------------------------------------------------------------------------
Conteneur flex pour aligner les boutons d'action principaux d'une page
détail (Approuver, Refuser, Télécharger, etc.).
========================================================================== */
.detail-actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
/* ==========================================================================
10. UTILITAIRES TEXTE
--------------------------------------------------------------------------
Helpers d'alignement et de couleur sémantique. Réservés à des usages
ponctuels (cellules de tableau, état dégradé).
========================================================================== */
.text-right { text-align: right; }
.text-danger { color: var(--cp-danger); font-weight: 700; }
.text-success { color: var(--cp-success); font-weight: 700; }
/* ==========================================================================
11. LISTE D'ÉLÉMENTS (.dil-* — Data Item List)
--------------------------------------------------------------------------
Pattern de liste d'items dans une carte (Dashboard : derniers devis,
dernières commandes, factures à régler, BAT en attente). Chaque ligne :
référence + sous-titre à gauche, contenu (chip / montant / bouton) à
droite, séparateur fin entre les lignes.
Composant associé : rend une ligne complète,
rend l'en-tête de la liste.
========================================================================== */
.dil-list { display: flex; flex-direction: column; }
.dil-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 8px;
margin: 0 -8px;
border-bottom: 1px solid #f5f5f5;
border-radius: 10px;
text-decoration: none;
transition: background 0.12s;
color: inherit;
}
.dil-item:last-child { border-bottom: none; }
.dil-item:hover { background: #fafafa; }
.dil-item--danger { background: #fff9f9; }
.dil-item--danger:hover { background: #fef4f4; }
.dil-item--action { cursor: default; }
.dil-item--action:hover { background: transparent; }
.dil-item-left { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.dil-item-ref { font-size: 0.875rem; font-weight: 700; color: #373854; font-family: inherit; }
.dil-item-sub { font-size: 0.72rem; color: var(--cp-subtle); font-weight: 500; font-family: inherit; }
.dil-item-warning {
font-size: 1rem !important;
color: var(--cp-danger);
vertical-align: middle;
margin-right: 4px;
}
.dil-item-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.dil-item-amount { font-size: 0.875rem; font-weight: 700; color: #373854; white-space: nowrap; font-family: inherit; }
/* ==========================================================================
12. VIEWER PDF (.cp-pdf-viewer)
--------------------------------------------------------------------------
Partage entre InvoiceDetail et QuoteDetail.
========================================================================== */
.cp-pdf-viewer {
height: 700px;
border-radius: 12px;
overflow: hidden;
border: 1px solid var(--cp-border-light);
}