/*
 * ════════════════════════════════════════════════════════════════
 *  SEYVO UI — Source de vérité unique des composants réutilisables
 *  Couche composants. S'appuie UNIQUEMENT sur les tokens de seyvo-tokens.css.
 *
 *  Ordre de chargement obligatoire :
 *    bootstrap.min.css → seyvo-tokens.css → seyvo-base.css
 *    → seyvo-ui.css (CE FICHIER) → app-shell.css → pages/[nom].css
 *
 *  Règle absolue : JAMAIS de valeur hex ici. Uniquement var(--seyvo-*) ou var(--sv-*).
 *  Remplace et absorbe : seyvo-design-system.css + seyvo-app.css
 * ════════════════════════════════════════════════════════════════
 */

/* ────────────────────────────────────────────────────────────────
   0. SHELL FONT + BODY SCOPE
   ──────────────────────────────────────────────────────────────── */

.seyvo-shell,
.seyvo-admin-shell {
  font-family: var(--seyvo-font);
}

/* ────────────────────────────────────────────────────────────────
   1. SHELL LAYOUT — viewport safety (migré depuis seyvo-app.css)
   ──────────────────────────────────────────────────────────────── */

.seyvo-shell-body,
.seyvo-app-shell-body,
.seyvo-shell-body .seyvo-shell,
.seyvo-shell-body .seyvo-shell-content,
.seyvo-shell-body main,
.seyvo-shell-body .container,
.seyvo-shell-body .container-fluid,
.seyvo-shell-body .row,
.seyvo-shell-body [class*="col-"] {
  min-width: 0;
}

.seyvo-shell-body,
.seyvo-app-shell-body {
  width: 100% !important;
  max-width: 100vw;
  overflow-x: hidden;
  background: var(--sv-bg);
  color: var(--sv-text);
}

.seyvo-shell-body .seyvo-shell,
.seyvo-admin-shell-body .seyvo-admin-shell {
  width: 100% !important;
  max-width: 100%;
}

.seyvo-shell-body .container,
.seyvo-shell-body .container-fluid {
  max-width: 100%;
}

.seyvo-shell-body iframe,
.seyvo-shell-body canvas,
.seyvo-shell-body img,
.seyvo-shell-body video,
.seyvo-shell-body textarea,
.seyvo-shell-body input,
.seyvo-shell-body select {
  max-width: 100%;
}

.link-settings-container,
.link-settings-wrapper,
.biolink-settings-wrapper {
  min-width: 0;
  max-width: 100%;
}

/* ────────────────────────────────────────────────────────────────
   2. SURFACE PRIMITIVES (migré depuis seyvo-design-system.css)
   ──────────────────────────────────────────────────────────────── */

.sv-surface {
  background: var(--seyvo-white);
  border: 1px solid var(--seyvo-border);
  border-radius: var(--seyvo-radius-md);
  box-shadow: var(--seyvo-shadow-xs);
}

.sv-surface-soft {
  background: var(--seyvo-soft);
  border: 1px solid var(--seyvo-border);
  border-radius: var(--seyvo-radius-md);
}

/* ────────────────────────────────────────────────────────────────
   3. CARDS
   ──────────────────────────────────────────────────────────────── */

.seyvo-shell-body .card,
.seyvo-shell-body .seyvo-card,
.seyvo-shell-body .app-card,
.seyvo-shell-body .module-card,
.seyvo-shell-body .dashboard-card {
  border-color: var(--sv-border);
  border-radius: var(--seyvo-radius-md);
  box-shadow: var(--seyvo-shadow-xs);
  background: var(--sv-surface);
}

.seyvo-shell-body .card-body,
.seyvo-shell-body .card-header,
.seyvo-shell-body .card-footer {
  min-width: 0;
  border-color: var(--sv-border);
}

/* ────────────────────────────────────────────────────────────────
   4. BOUTONS — compléments à seyvo-base.css
   ──────────────────────────────────────────────────────────────── */

.btn-custom {
  background: var(--sv-primary);
  color: var(--seyvo-white);
  border: none;
  border-radius: var(--seyvo-radius-sm);
  padding: .44rem 1rem;
  font-weight: 600;
  font-size: .875rem;
  transition: background .15s ease, box-shadow .15s ease;
  cursor: pointer;
}

.btn-custom:hover,
.btn-custom:focus {
  background: var(--sv-primary-hover);
  color: var(--seyvo-white);
  box-shadow: 0 0 0 .2rem rgba(var(--seyvo-primary-rgb), .18);
}

.btn-custom-outline {
  background: transparent;
  color: var(--sv-primary);
  border: 1px solid var(--sv-primary);
  border-radius: var(--seyvo-radius-sm);
  padding: .4rem 1rem;
  font-weight: 600;
  font-size: .875rem;
  transition: background .15s ease, color .15s ease;
  cursor: pointer;
}

.btn-custom-outline:hover {
  background: var(--sv-primary);
  color: var(--seyvo-white);
}

.btn-ghost-sv {
  background: transparent;
  color: var(--sv-muted);
  border: 1px solid var(--seyvo-border);
  border-radius: var(--seyvo-radius-sm);
  padding: .4rem .875rem;
  font-size: .875rem;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
  cursor: pointer;
}

.btn-ghost-sv:hover {
  background: var(--seyvo-soft);
  color: var(--sv-text);
  border-color: var(--seyvo-border-strong);
}

/* ────────────────────────────────────────────────────────────────
   5. BADGES & PILLS
   ──────────────────────────────────────────────────────────────── */

.sv-badge {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  padding: .2em .65em;
  border-radius: 100px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.4;
}

.sv-badge-primary   { background: rgba(var(--seyvo-primary-rgb), .10); color: var(--sv-primary); }
.sv-badge-success   { background: var(--seyvo-success-soft);           color: var(--seyvo-success); }
.sv-badge-warning   { background: var(--seyvo-warning-soft);           color: var(--seyvo-accent-gold-dark); }
.sv-badge-danger    { background: var(--seyvo-danger-soft);            color: var(--seyvo-danger); }
.sv-badge-info      { background: var(--seyvo-accent-sky-soft);        color: var(--seyvo-accent-sky-dark); }
.sv-badge-violet    { background: var(--seyvo-accent-violet-soft);     color: var(--seyvo-accent-violet-dark); }
.sv-badge-neutral   { background: var(--seyvo-soft-2);                 color: var(--seyvo-muted); }

/* ────────────────────────────────────────────────────────────────
   6. FORMULAIRES
   ──────────────────────────────────────────────────────────────── */

.sv-form-label {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--sv-text);
  margin-bottom: .35rem;
}

.sv-form-control {
  display: block;
  width: 100%;
  padding: .44rem .75rem;
  font-size: .875rem;
  font-family: var(--seyvo-font);
  color: var(--sv-text);
  background: var(--seyvo-white);
  border: 1px solid var(--seyvo-border-strong);
  border-radius: var(--seyvo-radius-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
  line-height: 1.5;
}

.sv-form-control:focus {
  outline: 0;
  border-color: var(--sv-primary);
  box-shadow: 0 0 0 .18rem rgba(var(--seyvo-primary-rgb), .14);
}

.sv-form-control::placeholder { color: var(--seyvo-muted-2); }

.sv-form-hint {
  font-size: .75rem;
  color: var(--seyvo-muted);
  margin-top: .25rem;
}

/* ────────────────────────────────────────────────────────────────
   7. TABLES
   ──────────────────────────────────────────────────────────────── */

.seyvo-shell-body .table-responsive,
.seyvo-shell-body .sv-table-scroll,
.seyvo-shell-body .sv-overflow-x-auto {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--seyvo-radius-sm);
}

.seyvo-shell-body table       { max-width: 100%; }
.seyvo-shell-body .table th,
.seyvo-shell-body .table td   { vertical-align: middle; }

.sv-table thead th {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--seyvo-muted);
  border-bottom: 1px solid var(--seyvo-border);
  background: var(--seyvo-soft);
}

.sv-table tbody tr:hover { background: var(--seyvo-cream); }

/* ────────────────────────────────────────────────────────────────
   8. NAVIGATION — tabs/pills scroll
   ──────────────────────────────────────────────────────────────── */

.seyvo-shell-body .nav-pills,
.seyvo-shell-body .nav-tabs,
.seyvo-shell-body .sv-scroll-tabs {
  min-width: 0;
}

.seyvo-shell-body .sv-scroll-tabs {
  overflow-x: auto;
  flex-wrap: nowrap;
  -webkit-overflow-scrolling: touch;
}

.seyvo-shell-body .sv-scroll-tabs .nav-link { white-space: nowrap; }

/* ────────────────────────────────────────────────────────────────
   9. ICÔNES MODULES (migré depuis seyvo-design-system.css)
   ──────────────────────────────────────────────────────────────── */

.sv-module-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  flex-shrink: 0;
}

.sv-module-icon-wrap.size-sm { width: 40px; height: 40px; font-size: 16px; border-radius: 14px; }
.sv-module-icon-wrap.size-md { width: 50px; height: 50px; font-size: 18px; border-radius: 18px; }
.sv-module-icon-wrap.size-lg { width: 60px; height: 60px; font-size: 22px; border-radius: 20px; }

.sv-module-icon-wrap.tone-coral  { background: var(--seyvo-accent-warm-soft);   color: var(--seyvo-accent-warm-dark); }
.sv-module-icon-wrap.tone-sky    { background: var(--seyvo-accent-sky-soft);    color: var(--seyvo-accent-sky-dark); }
.sv-module-icon-wrap.tone-jade   { background: var(--seyvo-success-soft);       color: var(--seyvo-primary-600); }
.sv-module-icon-wrap.tone-gold   { background: var(--seyvo-accent-gold-soft);   color: var(--seyvo-accent-gold-dark); }
.sv-module-icon-wrap.tone-violet { background: var(--seyvo-accent-violet-soft); color: var(--seyvo-accent-violet-dark); }
.sv-module-icon-wrap.tone-ink    { background: rgba(var(--seyvo-primary-rgb), .07); color: var(--seyvo-ink); }

/* ────────────────────────────────────────────────────────────────
   10. ÉTATS VIDES (empty state)
   ──────────────────────────────────────────────────────────────── */

.sv-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem 1.5rem;
  color: var(--seyvo-muted);
}

.sv-empty-state-icon {
  font-size: 2.25rem;
  margin-bottom: 1rem;
  opacity: .55;
}

.sv-empty-state-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--sv-text);
  margin-bottom: .4rem;
}

.sv-empty-state-text {
  font-size: .875rem;
  max-width: 28rem;
  line-height: 1.55;
}

/* ────────────────────────────────────────────────────────────────
   11. PAGE HEADER / SECTION TITLE
   ──────────────────────────────────────────────────────────────── */

.sv-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.sv-page-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--seyvo-ink);
  margin: 0;
  line-height: 1.3;
}

.sv-page-subtitle {
  font-size: .875rem;
  color: var(--seyvo-muted);
  margin: .2rem 0 0;
}

.sv-section-title {
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--seyvo-muted);
  margin-bottom: .75rem;
}

/* ────────────────────────────────────────────────────────────────
   12. FOOTER APP (migré depuis seyvo-app.css)
   ──────────────────────────────────────────────────────────────── */

.seyvo-footer {
  margin-top: 1.5rem;
  color: var(--sv-muted);
}

.seyvo-footer > .seyvo-page-container {
  padding-top: 0;
  padding-bottom: 1.5rem;
}

.seyvo-footer footer,
.seyvo-footer .footer,
.seyvo-footer .container,
.seyvo-footer .container-fluid {
  min-width: 0;
}

.seyvo-footer footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--sv-border);
  color: var(--sv-muted);
  font-size: .84rem;
}

.seyvo-footer footer a,
.seyvo-footer a {
  color: var(--sv-muted);
  text-decoration: none;
  transition: color .15s ease;
}

.seyvo-footer footer a:hover,
.seyvo-footer a:hover {
  color: var(--sv-primary);
}

.seyvo-footer img {
  max-height: 24px;
  opacity: .72;
  filter: grayscale(1);
}

.seyvo-admin-footer {
  background: transparent;
  border: 0;
}

/* ────────────────────────────────────────────────────────────────
   13. UTILITAIRES TEXTE & COULEURS
   ──────────────────────────────────────────────────────────────── */

.sv-muted      { color: var(--seyvo-muted); }
.sv-text       { color: var(--seyvo-text); }
.sv-ink        { color: var(--seyvo-ink); }
.sv-link-primary       { color: var(--sv-primary); }
.sv-link-primary:hover { color: var(--sv-primary-hover); }

.sv-focus-ring:focus {
  outline: 0;
  box-shadow: 0 0 0 .2rem rgba(var(--seyvo-primary-rgb), .14);
}

/* ────────────────────────────────────────────────────────────────
   14. UTILITAIRES LAYOUT
   ──────────────────────────────────────────────────────────────── */

.sv-divider {
  border: none;
  border-top: 1px solid var(--seyvo-border);
  margin: 1.25rem 0;
}

.sv-gap-xs { gap: .375rem; }
.sv-gap-sm { gap: .625rem; }
.sv-gap-md { gap: 1rem; }
.sv-gap-lg { gap: 1.5rem; }

.sv-stack { display: flex; flex-direction: column; }
.sv-row   { display: flex; flex-direction: row; align-items: center; }

/* ────────────────────────────────────────────────────────────────
   15. RESPONSIVE
   ──────────────────────────────────────────────────────────────── */

@media (max-width: 767.98px) {
  .seyvo-footer footer {
    justify-content: center;
    text-align: center;
  }

  .sv-page-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Share buttons */
.sv-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--seyvo-text-muted);
    background-color: var(--seyvo-soft);
    border: 1px solid var(--seyvo-border);
    transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}

.sv-share-btn:hover {
    color: var(--sv-primary);
    background-color: var(--seyvo-primary-soft);
    border-color: rgba(var(--sv-primary-rgb), .18);
    transform: translateY(-1px);
}

/* Static color cleanup utilities */
.sv-text-strong {
    color: var(--seyvo-text) !important;
}

.sv-text-muted-soft {
    color: var(--seyvo-text-muted) !important;
}

.sv-text-success {
    color: var(--seyvo-success) !important;
}

.sv-text-danger {
    color: var(--seyvo-danger) !important;
}

.sv-icon-primary,
.sv-verified-icon {
    color: var(--sv-primary) !important;
}

.sv-kpill-info {
    background: rgba(var(--sv-primary-rgb), .1) !important;
    color: var(--sv-primary) !important;
}

.sv-kpill-success {
    background: rgba(16, 185, 129, .1) !important;
    color: var(--seyvo-success) !important;
}

/* Cleanup utilities — modules */
.sv-icon-bubble-primary {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, var(--sv-primary), var(--seyvo-text));
    color: var(--seyvo-white);
}

.sv-code-panel {
    background: var(--seyvo-ink) !important;
    border: 1px solid var(--seyvo-border-strong) !important;
}

.sv-code-text {
    color: var(--seyvo-accent-sky) !important;
}

.sv-code-text-soft {
    color: var(--seyvo-accent-violet) !important;
}

.sv-alert-success-soft {
    background: rgba(16, 185, 129, .1) !important;
    border: 1px solid rgba(16, 185, 129, .2) !important;
    color: var(--seyvo-success) !important;
    border-radius: 1rem;
}

.sv-badge-soft {
    border-radius: 50px;
    font-weight: 500;
    font-size: .75rem;
    background: rgba(0, 0, 0, .05);
    color: var(--seyvo-text-muted);
    border: 1px solid rgba(0, 0, 0, .05);
}

.sv-stat-success {
    color: var(--seyvo-success) !important;
}

.sv-stat-warning {
    color: var(--seyvo-accent-warm) !important;
}

.sv-stat-muted {
    color: var(--seyvo-text-muted) !important;
}

.sv-stat-danger {
    color: var(--seyvo-danger) !important;
}

.sv-danger-label {
    color: var(--seyvo-danger) !important;
}

.sv-muted-zero {
    color: var(--seyvo-text-muted) !important;
}

/* Cleanup utilities — small static views */
.sv-small-muted {
    color: var(--seyvo-text-muted) !important;
}

.sv-small-danger {
    color: var(--seyvo-danger) !important;
}

.sv-soft-danger-avatar {
    background: rgba(239, 68, 68, .12) !important;
    color: var(--seyvo-danger) !important;
}

.sv-danger-pill {
    background: var(--seyvo-danger) !important;
    color: var(--seyvo-white) !important;
    border-radius: 5px;
    padding: 2px 8px;
    font-size: .75rem;
    font-weight: 700;
}

.sv-account-soft {
    margin: 1rem 0;
    background: var(--seyvo-soft);
    box-shadow: none;
}

.sv-featured-tag {
    background: var(--seyvo-ink) !important;
    color: var(--seyvo-white) !important;
    border-color: var(--seyvo-ink) !important;
}

.sv-seychat-empty-icon {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--sv-primary), var(--seyvo-accent-violet));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    box-shadow: 0 12px 28px rgba(var(--sv-primary-rgb), .22);
}

/* Cleanup utilities — hero/static modules */
.sv-hero-pill-light {
    background: rgba(255, 255, 255, .14) !important;
    color: var(--seyvo-white) !important;
    border: 1px solid rgba(255, 255, 255, .2) !important;
}

.sv-hero-muted-light {
    color: rgba(255, 255, 255, .75) !important;
    max-width: 760px;
}

.sv-hero-button-light {
    background: var(--seyvo-white) !important;
    color: var(--sv-primary) !important;
    box-shadow: none !important;
}

.sv-product-image-placeholder {
    height: 220px;
    background-color: var(--seyvo-soft);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

/* Cleanup utilities — marketing dots and dynamic-safe badges */
.sv-dot-orange {
    --dot: #F9735B;
    --dot-bg: #FFF0EC;
}

.sv-dot-jade {
    --dot: #20BFA9;
    --dot-bg: #E8FBF7;
}

.sv-dot-blue {
    --dot: #6475F7;
    --dot-bg: #EEF1FF;
}

.sv-dot-lime {
    --dot: #B1E346;
    --dot-bg: #F3FBE3;
}

.sv-badge-conversion {
    border-radius: 50px;
    padding: .4em .8em;
    background: rgba(16, 185, 129, .1);
    color: var(--seyvo-success);
    border: 1px solid rgba(16, 185, 129, .2);
}

.sv-badge-neutral-soft {
    border-radius: 50px;
    padding: .4em .8em;
    background: rgba(108, 117, 125, .1);
    color: var(--seyvo-text-muted);
    border: 1px solid rgba(108, 117, 125, .2);
}