/* ============================================================
   SIS Digital Factory — shared-pages.css
   Composants partagés entre les pages authentifiées + CGV
   ============================================================ */

/* ----- Champ de formulaire verre ----- */
.input-glass {
  width: 100%;
  padding: 0.625rem 0.875rem;
  border-radius: 10px;
  background: var(--sis-glass-bg);
  border: 1px solid var(--sis-glass-border);
  color: var(--sis-text-primary);
  font-size: 0.9375rem;
  outline: none;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.input-glass::placeholder { color: var(--sis-text-muted); }
.input-glass:focus {
  border-color: var(--sis-glass-border-accent);
  box-shadow: 0 0 0 3px rgba(31, 108, 247, 0.10);
}
select.input-glass {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23475569' 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 0.75rem center;
  padding-right: 2.5rem;
}

/* ----- Badges ----- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.625rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
}
.badge--success  { background: var(--sis-success-soft); color: #065F46; border: 1px solid rgba(74,222,128,0.25); }
.badge--info     { background: var(--sis-info-soft); color: var(--sis-blue-700); border: 1px solid var(--sis-glass-border-accent); }
.badge--warning  { background: rgba(251,191,36,0.15); color: #92400E; border: 1px solid rgba(251,191,36,0.25); }
.badge--danger   { background: rgba(248,113,113,0.12); color: #991B1B; border: 1px solid rgba(248,113,113,0.25); }
.badge--muted    { background: rgba(71,85,105,0.12); color: var(--sis-text-muted); border: 1px solid rgba(71,85,105,0.20); }

/* ----- Tableaux data ----- */
.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.875rem;
}
.data-table thead th {
  text-align: left;
  padding: 0.625rem 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sis-text-muted);
  background: var(--sis-glass-bg);
  border-bottom: 1px solid var(--sis-glass-border);
}
.data-table thead th:first-child { border-radius: 8px 0 0 0; }
.data-table thead th:last-child  { border-radius: 0 8px 0 0; }
.data-table tbody td {
  padding: 0.75rem 1rem;
  color: var(--sis-text-secondary);
  border-bottom: 1px solid var(--sis-glass-border);
  vertical-align: middle;
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover td { background: rgba(255,255,255,0.04); }

/* ----- Onglets (tab bar) ----- */
.tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.125rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--sis-text-muted);
  border-radius: 8px 8px 0 0;
  border: 1px solid transparent;
  border-bottom: none;
  cursor: pointer;
  transition: all 200ms ease;
  position: relative;
  bottom: -1px;
  background: transparent;
}
.tab-btn:hover {
  color: var(--sis-text-secondary);
  background: var(--sis-glass-bg);
}
.tab-btn--active {
  color: var(--sis-blue-700);
  background: var(--sis-glass-bg-strong);
  border-color: var(--sis-glass-border);
  border-bottom-color: var(--sis-glass-bg-strong);
}

/* ----- Panneaux d'onglets ----- */
[data-panel], [data-admin-panel] {
  display: none;
  animation: sis-fade-in 280ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
[data-panel].panel--active,
[data-admin-panel].panel--active {
  display: block;
}

/* ----- Top bar sombre (pages auth) ----- */
.auth-topbar {
  border-bottom: 1px solid var(--sis-glass-border);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  background: rgba(7, 12, 26, 0.75);
  position: sticky;
  top: 0;
  z-index: 40;
}

/* ----- Switcher profil démo ----- */
.demo-switcher-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  border-radius: 8px;
  border: 1px solid var(--sis-glass-border);
  background: var(--sis-glass-bg);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--sis-text-secondary);
  cursor: pointer;
  transition: all 200ms;
}
.demo-switcher-btn:hover,
.demo-switcher-btn--active {
  border-color: var(--sis-glass-border-accent);
  color: var(--sis-blue-700);
  background: var(--sis-info-soft);
}

/* ----- KPI cards ----- */
.kpi-card {
  padding: 1.25rem;
}
.kpi-label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--sis-text-muted);
  margin-bottom: 0.5rem;
}
.kpi-value {
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.625rem;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.kpi-sub {
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

/* ----- Variables supplémentaires utiles ----- */
:root {
  --sis-warning: #B45309;
  --sis-warning-soft: rgba(251, 191, 36, 0.10);
  --sis-danger: #B91C1C;
  --sis-danger-soft: rgba(248, 113, 113, 0.10);
}

/* ----- Alert items ----- */
.alert-item {
  display: flex;
  gap: 0.625rem;
  padding: 0.75rem;
  border-radius: 8px;
  background: var(--sis-glass-bg);
  border: 1px solid var(--sis-glass-border);
}
.alert-item--warning { border-color: rgba(251,191,36,0.20); background: var(--sis-warning-soft); }
.alert-item--danger  { border-color: rgba(248,113,113,0.20); background: var(--sis-danger-soft); }
.alert-item--info    { border-color: var(--sis-glass-border-accent); background: var(--sis-info-soft); }

/* ----- Ligne revendeur (admin) ----- */
.reseller-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: 8px;
  width: 100%;
  text-align: left;
  border: 1px solid transparent;
  transition: all 250ms cubic-bezier(0.16, 1, 0.3, 1);
  background: transparent;
  cursor: pointer;
}
.reseller-row:hover {
  background: var(--sis-glass-bg);
  border-color: var(--sis-glass-border);
}
.reseller-row--active {
  background: var(--sis-info-soft);
  border-color: var(--sis-glass-border-accent);
}

/* ----- Tâche client ----- */
.task-row {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.875rem 1rem;
  border-radius: 8px;
  background: var(--sis-glass-bg);
  border: 1px solid var(--sis-glass-border);
}
.task-row--pending { border-color: rgba(251, 191, 36, 0.20); }
.task-row--done    { opacity: 0.6; }

/* ----- CGV ----- */
.cgv-article {
  padding: 2rem 0;
  border-bottom: 1px solid var(--sis-glass-border);
}
.cgv-article:last-of-type { border-bottom: none; }
.prose-cgv strong { color: var(--sis-text-primary); font-weight: 600; }
.prose-cgv a { color: var(--sis-blue-300); text-decoration: underline; text-underline-offset: 3px; }
.prose-cgv a:hover { color: var(--sis-blue-100); }
.prose-cgv ul { list-style: disc; padding-left: 1.5rem; }
.prose-cgv ol { list-style: decimal; padding-left: 1.5rem; }

.toc-link {
  display: block;
  padding: 0.375rem 0.625rem;
  border-radius: 6px;
  color: var(--sis-text-secondary);
  font-size: 0.875rem;
  line-height: 1.4;
  transition: all 200ms cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
}
.toc-link:hover { background: var(--sis-glass-bg); color: var(--sis-text-primary); }
.toc-link--active {
  background: var(--sis-info-soft);
  color: var(--sis-blue-700);
  border-left: 2px solid var(--sis-blue-500);
  padding-left: 0.5rem;
}

/* Mode impression CGV */
@media print {
  body { background: #fff; color: #111; }
  .glass-card, .glass-card--strong {
    background: #fff !important;
    border: 1px solid #ddd !important;
    backdrop-filter: none !important;
  }
  aside, .btn-secondary, #copy-link { display: none !important; }
  .cgv-article { break-inside: avoid; page-break-inside: avoid; }
  .toc-link, .toc-link--active { all: unset; }
  a { color: #111 !important; text-decoration: underline; }
}

/* Livrable client */
.deliverable-card {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform 250ms ease;
}
.deliverable-card:hover { transform: translateY(-2px); }

/* Méthode de paiement */
.payment-method-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem;
  border-radius: 12px;
  background: var(--sis-glass-bg);
  border: 1.5px solid var(--sis-glass-border);
  cursor: pointer;
  transition: all 250ms cubic-bezier(0.16, 1, 0.3, 1);
}
.payment-method-card:hover {
  border-color: var(--sis-blue-300);
}
.payment-method-card--active {
  background: var(--sis-info-soft);
  border-color: var(--sis-glass-border-accent);
  box-shadow: 0 0 0 3px rgba(31, 108, 247, 0.10);
}

/* Filter chip boutiques */
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--sis-glass-border);
  background: var(--sis-glass-bg);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--sis-text-secondary);
  cursor: pointer;
  transition: all 200ms;
}
.filter-chip:hover { border-color: var(--sis-blue-300); color: var(--sis-text-primary); }
.filter-chip--active {
  background: var(--sis-gradient-primary);
  border-color: transparent;
  color: #fff;
}

/* Carte boutique exemple */
.store-card {
  overflow: hidden;
  transition: all 350ms cubic-bezier(0.25, 1, 0.5, 1);
}
.store-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.10);
}