/*
 * Client portal ("espace client") visual redesign — style "B" (soft modern
 * SaaS: gray-blue background, white cards with a soft shadow).
 *
 * Every rule here is scoped under .client-portal so nothing here can ever
 * affect the marketing site, which shares base.css/layout.css/components.css
 * with this portal but does NOT load this file.
 */

.client-portal {
  background: var(--color-bg-alt);
  /* 100vh on mobile resolves against the toolbar-collapsed viewport, which
     is taller than what's actually visible on load — that stretched the
     body past its real content and left a dead, scrollable gap below the
     footer. 100svh matches the smallest (toolbar-visible) viewport, so the
     page never scrolls further than its content. */
  min-height: 100vh;
  min-height: 100svh;
}

.client-portal .card,
.client-portal .form-card {
  border-color: #eef1f6;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
}

/* Cards that are the sole child of a link (the clickable rows on "Mes
   demandes") get a lift on hover so they read as interactive — no markup
   change needed, this targets the existing <a><div class="card">...</a>
   structure directly. */
.client-portal a > .card {
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.client-portal a > .card:hover {
  box-shadow: 0 4px 12px rgba(16, 24, 40, 0.1), 0 2px 4px rgba(16, 24, 40, 0.06);
  transform: translateY(-1px);
}

.client-portal .site-header {
  border-bottom: none;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
}

.client-portal .site-footer {
  border-top: 1px solid #eef1f6;
  box-shadow: 0 -1px 2px rgba(16, 24, 40, 0.04);
}

.client-portal .badge {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
}

.client-portal .badge--success {
  background: #e6f7ef;
  color: #1a9e6b;
}

.client-portal .btn--primary {
  box-shadow: 0 2px 6px rgba(255, 107, 74, 0.25);
}

.client-portal .btn--secondary {
  border-color: #dde4ee;
}

.client-portal .field input,
.client-portal .field select {
  border-color: #dde4ee;
  border-radius: 8px;
}

/* The default border-color above outranks .field--error's on specificity
   alone ((0,0,2,1) vs (0,0,1,1)), which would silently hide the red
   validation-error border on the "Modifier mes identifiants" email field
   (resources/views/livewire/client/compte-settings.blade.php). Restated
   here at matching specificity so the error state still wins. */
.client-portal .field--error input {
  border-color: #d0342c;
}

.client-portal .field input:focus,
.client-portal .field select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-tint);
}