/* ============================================================
   ShopIna — DESIGN SYSTEM (bibliothèque centralisée)
   ------------------------------------------------------------
   Toutes les classes utilisables PARTOUT dans le projet.
   Préfixe `.s-` = ShopIna. Préfixe `.t-` = typographie.
   Aucune classe Bootstrap n'est écrasée → 100 % additif.
   Usage Blade :
     <button class="s-btn s-btn-primary">Sale</button>
     <input class="s-input" />
     <h1 class="t-h1">Titre</h1>
     <span class="s-chip s-chip-success">Payé</span>
   ============================================================ */

/* ============================================================
   1. TYPOGRAPHIE
   ============================================================ */
.t-display { font-size: var(--fs-display); font-weight: var(--fw-bold);     line-height: var(--lh-tight);  color: var(--text-primary); font-variant-numeric: tabular-nums; }
.t-h1      { font-size: var(--fs-h1);      font-weight: var(--fw-semibold); line-height: var(--lh-snug);   color: var(--text-primary); margin: 0; }
.t-h2      { font-size: var(--fs-h2);      font-weight: var(--fw-black);    line-height: var(--lh-snug);   color: var(--text-primary); margin: 0; }
.t-h3      { font-size: var(--fs-h3);      font-weight: var(--fw-semibold); line-height: var(--lh-snug);   color: var(--text-primary); margin: 0; }
.t-body    { font-size: var(--fs-body);    font-weight: var(--fw-regular);  line-height: var(--lh-normal); color: var(--text-secondary); }
.t-small   { font-size: var(--fs-small);   font-weight: var(--fw-regular);  line-height: var(--lh-normal); color: var(--text-secondary); }
.t-caption { font-size: var(--fs-caption); font-weight: var(--fw-semibold); line-height: var(--lh-normal); color: var(--text-tertiary); }
.t-overline{ font-size: var(--fs-overline);font-weight: var(--fw-bold);     letter-spacing: var(--ls-overline); text-transform: uppercase; color: var(--text-tertiary); }
.t-mono    { font-variant-numeric: tabular-nums; }
.t-strong  { font-weight: var(--fw-black); color: var(--text-primary); }
.t-muted   { color: var(--text-tertiary); }
.t-primary { color: var(--shopina-primary); }
.t-success { color: var(--color-success-text); }
.t-error   { color: var(--color-error-text); }
.t-warning { color: #92400E; }

/* ============================================================
   2. BOUTONS
   Tailles : .s-btn (48px) · .s-btn-lg (56px) · .s-btn-sm (40px)
   Variantes : -primary, -accent, -neutral, -outline, -ghost, -danger
   Icône seule : .s-btn-icon
   ============================================================ */
.s-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    padding: 0 18px;
    border-radius: var(--radius-md);
    font-family: var(--font-family);
    font-weight: var(--fw-bold);
    font-size: 15px;
    line-height: 1;
    border: 1.5px solid transparent;
    background: none;
    color: inherit;
    cursor: pointer;
    text-decoration: none;
    transition: filter var(--dur-fast), transform var(--dur-fast),
                background var(--dur-fast), border-color var(--dur-fast),
                box-shadow var(--dur-fast);
}
.s-btn:disabled, .s-btn[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; }
.s-btn-lg { height: 56px; font-size: 16px; font-weight: var(--fw-black); }
.s-btn-sm { height: 40px; font-size: 13.5px; padding: 0 14px; }
.s-btn-block { width: 100%; }

/* primaire — CTA principal (spécificité 2 pour battre les classes legacy) */
.s-btn.s-btn-primary { background: var(--shopina-primary); color: #fff; border-color: var(--shopina-primary); box-shadow: var(--shadow-primary); }
.s-btn.s-btn-primary:hover:not(:disabled)  { filter: brightness(1.08); background: var(--shopina-primary); color: #fff; }
.s-btn.s-btn-primary:active:not(:disabled) { transform: translateY(1px); }

/* accent — action mise en avant (orange) */
.s-btn.s-btn-accent { background: var(--shopina-accent); color: #fff; border-color: var(--shopina-accent); box-shadow: var(--shadow-accent); }
.s-btn.s-btn-accent:hover:not(:disabled) { filter: brightness(1.06); background: var(--shopina-accent); color: #fff; }

/* neutre — secondaire (ex. Annuler) */
.s-btn.s-btn-neutral { background: var(--surface); border-color: var(--border); color: var(--text-secondary); }
.s-btn.s-btn-neutral:hover:not(:disabled) { border-color: var(--color-error); color: var(--color-error); background: var(--surface); }

/* contour primaire */
.s-btn.s-btn-outline { background: transparent; border-color: var(--shopina-primary); color: var(--shopina-primary); }
.s-btn.s-btn-outline:hover:not(:disabled) { background: var(--shopina-primary-50); color: var(--shopina-primary); }

/* ghost — texte sans fond */
.s-btn.s-btn-ghost { background: transparent; color: var(--shopina-primary); border-color: transparent; }
.s-btn.s-btn-ghost:hover:not(:disabled) { background: var(--shopina-primary-50); color: var(--shopina-primary); }

/* danger — destructif */
.s-btn.s-btn-danger { background: var(--color-error); color: #fff; border-color: var(--color-error); }
.s-btn.s-btn-danger:hover:not(:disabled) { filter: brightness(1.06); background: var(--color-error); color: #fff; }

/* succès */
.s-btn.s-btn-success { background: var(--color-success); color: #fff; border-color: var(--color-success); }
.s-btn.s-btn-success:hover:not(:disabled) { filter: brightness(1.06); background: var(--color-success); color: #fff; }

/* icône seule (carré 48x48, sans s-btn de base) */
.s-btn.s-btn-icon,
.s-btn-icon {
    width: var(--tap-min);
    height: var(--tap-min);
    min-width: var(--tap-min);
    padding: 0;
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--dur-fast);
}
/* l'icône reprend la couleur du variant si combiné (ex. s-btn-primary s-btn-icon) */
.s-btn-icon:not(.s-btn-primary):not(.s-btn-accent):not(.s-btn-danger):not(.s-btn-success):not(.s-btn-outline) {
    color: var(--text-secondary);
    background: transparent;
    border: none;
}
.s-btn-icon:not(.s-btn-primary):not(.s-btn-accent):not(.s-btn-danger):not(.s-btn-success):not(.s-btn-outline):hover {
    background: var(--surface-2);
}
/* l'image SVG fournie comme contenu reste blanche sur les boutons colorés */
.s-btn.s-btn-primary > img,
.s-btn.s-btn-accent  > img,
.s-btn.s-btn-danger  > img,
.s-btn.s-btn-success > img {
    filter: brightness(0) invert(1);
}

/* badges colorés discrets pour quick actions (spécificité 2) */
.s-btn.s-btn-soft-success { background: #E7F6EC; color: #157347; border-color: transparent; }
.s-btn.s-btn-soft-violet  { background: #EEE9FB; color: #6D44C9; border-color: transparent; }
.s-btn.s-btn-soft-primary { background: var(--shopina-primary-100); color: var(--shopina-primary); border-color: transparent; }
.s-btn.s-btn-soft-danger  { background: #FBE7EA; color: #C9252B; border-color: transparent; }
.s-btn.s-btn-soft-success:hover,
.s-btn.s-btn-soft-violet:hover,
.s-btn.s-btn-soft-primary:hover,
.s-btn.s-btn-soft-danger:hover { filter: brightness(0.96); transform: translateY(-1px); }

/* ============================================================
   3. CHAMPS DE SAISIE
   ============================================================ */
.s-field { display: flex; flex-direction: column; gap: 6px; }

.s-field-label {
    font-size: var(--fs-caption);
    font-weight: var(--fw-bold);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: .6px;
}

.s-input,
.s-select,
.s-textarea {
    width: 100%;
    height: 48px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    padding: 0 14px;
    font-family: var(--font-family);
    font-size: 14.5px;
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
    outline: none;
    transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}

.s-input:focus,
.s-select:focus,
.s-textarea:focus {
    border-color: var(--shopina-primary);
    box-shadow: 0 0 0 3px var(--shopina-primary-50);
}

.s-input::placeholder,
.s-textarea::placeholder {
    color: var(--text-tertiary);
    font-weight: var(--fw-regular);
}

.s-input[readonly],
.s-input.s-input-ro {
    background: var(--surface-2);
    color: var(--text-secondary);
}

.s-input-sm { height: 36px; padding: 0 10px; font-size: 13px; }
.s-input-num { text-align: right; font-variant-numeric: tabular-nums; }
.s-input-hl-success { background: var(--color-success-bg); border-color: transparent; color: #047857; }

.s-textarea { height: auto; min-height: 70px; padding: 10px 14px; resize: none; }

.s-select {
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    padding-right: 38px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23828282' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

/* groupe input + bouton à droite (ex. select client + bouton +) */
.s-field-group { display: flex; gap: 8px; align-items: stretch; }
.s-field-group > .s-input,
.s-field-group > .s-select,
.s-field-group > .s-textarea { flex: 1; min-width: 0; }

/* ============================================================
   4. CHIPS / BADGES
   ============================================================ */
.s-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 12px;
    border-radius: var(--radius-pill);
    font-size: var(--fs-caption);
    font-weight: var(--fw-bold);
}
.s-chip-success { background: var(--color-success-bg); color: var(--color-success-text); }
.s-chip-error   { background: var(--color-error-bg);   color: var(--color-error-text); }
.s-chip-warning { background: var(--color-warning-bg); color: #92400E; }
.s-chip-info    { background: var(--shopina-primary-100); color: var(--shopina-primary); }
.s-chip-neutral { background: var(--surface-2); color: var(--text-secondary); }

/* compteur (notif, panier) */
.s-badge {
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: var(--radius-pill);
    background: var(--color-error);
    color: #fff;
    font-size: 11px;
    font-weight: var(--fw-black);
    display: grid;
    place-items: center;
}

/* ============================================================
   5. CARTES
   ============================================================ */
.s-card {
    background: var(--surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: var(--card-padding);
}

.s-card-hero {
    background: var(--shopina-primary);
    color: var(--text-on-primary);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-primary);
    padding: 18px;
}

.s-card-soft {
    background: var(--surface-2);
    border: 1px solid var(--divider);
    border-radius: var(--radius-lg);
    padding: var(--card-padding);
}

/* carte KPI catégorielle (couleur via inline style ou modifier) */
.s-card-kpi {
    border-radius: 5px;
    padding: 8px;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ============================================================
   6. TABLEAUX
   ============================================================ */
.s-table {
    width: 100%;
    border-collapse: collapse;
}
.s-table thead th {
    background: var(--surface-2);
    font-size: 11.5px;
    font-weight: var(--fw-black);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: .5px;
    text-align: left;
    padding: 12px 14px;
    border: none;
    border-bottom: 1px solid var(--divider);
    white-space: nowrap;
}
.s-table tbody td {
    padding: 10px 14px;
    border: none;
    border-bottom: 1px solid var(--divider);
    font-size: var(--fs-body);
    vertical-align: middle;
    color: var(--text-primary);
}
.s-table tbody tr:last-child td { border-bottom: none; }
.s-table tbody tr:hover { background: var(--surface-2); }
.s-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.s-table .ctr { text-align: center; }

/* wrapper avec bord + radius pour les tables */
.s-table-wrap {
    border: 1px solid var(--divider);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

/* ============================================================
   6b. BOUTONS RAPIDES CASH (.s-pay-quick)
   ------------------------------------------------------------
   Rangée de raccourcis pour incrémenter un montant.
   `.exact` = bouton qui copie le montant à payer exact (mis en avant).
   Usage :
     <div class="s-pay-quick">
       <button class="exact">= 0</button>
       <button data-add="1000">+1 000</button>
       ...
     </div>
   ============================================================ */
.s-pay-quick {
    display: flex;
    gap: var(--space-1);
    flex-wrap: wrap;
}
.s-pay-quick button {
    flex: 1;
    min-width: 60px;
    height: 32px;
    padding: 0 var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    border: 1.5px solid var(--border);
    font-family: var(--font-family);
    font-size: 12.5px;
    font-weight: var(--fw-bold);
    color: var(--text-secondary);
    cursor: pointer;
    transition: border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast);
}
.s-pay-quick button:hover {
    border-color: var(--shopina-primary);
    color: var(--shopina-primary);
}
.s-pay-quick button.exact {
    background: var(--shopina-primary-50);
    border-color: var(--shopina-primary-100);
    color: var(--shopina-primary);
}
.s-pay-quick button.exact:hover {
    background: var(--shopina-primary-100);
}

/* ============================================================
   7. STEPPER QUANTITÉ (+ / −)
   ============================================================ */
.s-stepper {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.s-stepper button {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    color: var(--shopina-primary);
    background: var(--shopina-primary-50);
    border: none;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background var(--dur-fast);
}
.s-stepper button:hover { background: var(--shopina-primary-100); }
.s-stepper input,
.s-stepper .s-stepper-val {
    width: 56px;
    height: 32px;
    text-align: center;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-weight: var(--fw-black);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    background: var(--surface);
    padding: 0 4px;
    outline: none;
}
.s-stepper input:focus { border-color: var(--shopina-primary); }

/* ============================================================
   8. HELPERS LAYOUT FRÉQUENTS
   ============================================================ */
.s-divider     { height: 1px; background: var(--divider); border: none; margin: var(--space-3) 0; }
.s-divider-v   { width: 1px; background: var(--divider); align-self: stretch; }
.s-stack       { display: flex; flex-direction: column; }
.s-row         { display: flex; align-items: center; }
.s-row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.s-spacer      { flex: 1; }

/* gaps */
.s-gap-1 { gap: var(--space-1); }
.s-gap-2 { gap: var(--space-2); }
.s-gap-3 { gap: var(--space-3); }
.s-gap-4 { gap: var(--space-4); }
.s-gap-5 { gap: var(--space-5); }
.s-gap-6 { gap: var(--space-6); }

/* fonds & textes thématiques (utilitaires) */
.s-bg-primary { background: var(--shopina-primary) !important; color: var(--text-on-primary); }
.s-bg-accent  { background: var(--shopina-accent)  !important; color: #fff; }
.s-bg-surface { background: var(--surface)   !important; }
.s-bg-soft    { background: var(--surface-2) !important; }
.s-text-primary  { color: var(--shopina-primary) !important; }
.s-text-accent   { color: var(--shopina-accent)  !important; }
.s-text-success  { color: var(--color-success-text) !important; }
.s-text-error    { color: var(--color-error-text) !important; }
.s-text-tertiary { color: var(--text-tertiary) !important; }

/* ============================================================
   FIN — Étendre ce fichier dès qu'un nouveau composant
   réutilisable est identifié dans le projet.
   ============================================================ */