/* =============================================================
   BC HOME SERVICE — Customer Portal styles (v10 layer)
   Page: /portal/
   Depends on: css/main.css (tokens, .section, .card, .btn, forms)
               css/v10.css  (--v10-* theme-aware surfaces)

   Scoped to .portal-* classes so nothing else on the 714-page site
   can be affected. Light theme is the default; every surface uses
   --v10-* variables so the dark theme ([data-theme="dark"]) comes
   along for free.
   ============================================================= */

/* ---------- Feature cards (logged-out marketing block) ---------- */
.portal-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--space-gap);
  margin-bottom: clamp(40px, 6vw, 72px);
}

.portal-feature {
  position: relative;
  background: var(--v10-surface-card, #fff);
  border: 1px solid var(--v10-border-soft, var(--color-border));
  border-radius: var(--radius-card, 16px);
  padding: clamp(24px, 3vw, 34px);
  box-shadow: var(--v10-shadow-card, var(--shadow-card));
  transition: transform 0.35s var(--ease-smooth, ease), box-shadow 0.35s ease, border-color 0.3s ease;
  overflow: hidden;
}
.portal-feature::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--pf-accent, var(--gradient-accent));
  opacity: 0.9;
}
.portal-feature:hover {
  transform: translateY(-6px);
  box-shadow: var(--v10-shadow-card-hover, var(--shadow-card-hover));
  border-color: color-mix(in srgb, var(--pf-accent, #2e86de) 45%, transparent);
}
.portal-feature-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--pf-accent, #2e86de) 14%, transparent);
  color: var(--pf-accent, var(--color-blue-accent));
  margin-bottom: 18px;
}
.portal-feature h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--v10-text-strong, var(--color-text-dark));
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.portal-feature p {
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--v10-text-soft, var(--color-text-medium));
  margin: 0;
}

/* ---------- Login card ---------- */
.portal-login-wrap {
  max-width: 520px;
  margin: 0 auto;
}

.portal-login {
  position: relative;
  background: var(--v10-surface-card, #fff);
  border: 1px solid var(--v10-border-soft, var(--color-border));
  border-radius: 22px;
  padding: clamp(28px, 4vw, 44px);
  box-shadow: var(--v10-shadow-card-hover, var(--shadow-card-hover));
  overflow: hidden;
}
.portal-login::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, #2e86de 0%, #00b4d8 55%, #ff6b35 100%);
}

.portal-login-title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 6px;
}
.portal-login-title h2 {
  font-size: clamp(1.35rem, 2.5vw, 1.7rem);
  font-weight: 700;
  color: var(--v10-text-strong, var(--color-text-dark));
  letter-spacing: -0.02em;
  margin: 0;
}
.portal-login-title .portal-lock {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--gradient-accent);
  color: #fff;
  box-shadow: var(--shadow-blue);
}
.portal-login-sub {
  font-size: 0.95rem;
  color: var(--v10-text-soft, var(--color-text-medium));
  margin: 0 0 26px;
  line-height: 1.6;
}

.portal-field {
  margin-bottom: 18px;
}
.portal-field label {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--v10-text-strong, var(--color-text-dark));
  margin-bottom: 7px;
}
.portal-field .req { color: var(--color-red); }

.portal-toggle-mode {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-blue-accent);
  cursor: pointer;
  border-bottom: 1px dashed color-mix(in srgb, var(--color-blue-accent) 55%, transparent);
}
.portal-toggle-mode:hover { color: var(--color-teal); }

.portal-login-error {
  display: none;
  align-items: flex-start;
  gap: 10px;
  background: color-mix(in srgb, var(--color-red) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-red) 32%, transparent);
  color: #c0392b;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 0.88rem;
  line-height: 1.5;
  margin-bottom: 18px;
}
.portal-login-error.show { display: flex; }
[data-theme="dark"] .portal-login-error { color: #ff8f85; }

.portal-login-trust {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  margin-top: 20px;
  font-size: 0.8rem;
  color: var(--v10-text-faint, var(--color-text-light));
  text-align: center;
}
.portal-login-trust svg { color: var(--color-green); flex: 0 0 auto; }

/* ---------- View switching ---------- */
.portal-view { display: none; }
.portal-view.is-active { display: block; }

/* ---------- Logged-in dashboard ---------- */
.portal-dash-head {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: clamp(28px, 4vw, 44px);
}
.portal-avatar {
  width: 62px;
  height: 62px;
  flex: 0 0 62px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 1.3rem;
  color: #fff;
  background: var(--gradient-accent);
  box-shadow: var(--shadow-blue);
  letter-spacing: 0.02em;
}
.portal-dash-head-text { flex: 1 1 220px; min-width: 0; }
.portal-dash-head-text .portal-hello {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-eyebrow);
  color: var(--color-blue-accent);
  margin-bottom: 4px;
}
.portal-dash-head-text h2 {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--v10-text-strong, var(--color-text-dark));
  margin: 0;
  overflow-wrap: anywhere;
}
.portal-dash-head-text p {
  margin: 6px 0 0;
  font-size: 0.9rem;
  color: var(--v10-text-soft, var(--color-text-medium));
}
.portal-logout {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--v10-border-soft, var(--color-border));
  background: var(--v10-surface-card, #fff);
  color: var(--v10-text-soft, var(--color-text-medium));
  border-radius: 12px;
  padding: 10px 18px;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s ease;
}
.portal-logout:hover {
  border-color: var(--color-red);
  color: var(--color-red);
  transform: translateY(-1px);
}

.portal-section-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
}
.portal-section-label h3 {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--v10-text-strong, var(--color-text-dark));
  margin: 0;
}
.portal-section-label .portal-count {
  background: color-mix(in srgb, var(--color-blue-accent) 13%, transparent);
  color: var(--color-blue-accent);
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 3px 10px;
}
.portal-section-label svg { color: var(--color-blue-accent); flex: 0 0 auto; }
.portal-section + .portal-section { margin-top: clamp(36px, 5vw, 56px); }

/* ---------- Appointment cards ---------- */
.portal-appts {
  display: grid;
  gap: var(--space-gap-sm, 14px);
}
.portal-appt {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  background: var(--v10-surface-card, #fff);
  border: 1px solid var(--v10-border-soft, var(--color-border));
  border-radius: 16px;
  padding: 20px 22px;
  box-shadow: var(--v10-shadow-card, var(--shadow-card));
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.portal-appt:hover {
  transform: translateY(-3px);
  box-shadow: var(--v10-shadow-card-hover, var(--shadow-card-hover));
}
.portal-appt-date {
  flex: 0 0 74px;
  text-align: center;
  border-radius: 14px;
  padding: 10px 6px;
  background: linear-gradient(160deg, rgba(46, 134, 222, 0.12), rgba(0, 180, 216, 0.1));
  border: 1px solid color-mix(in srgb, var(--color-blue-accent) 25%, transparent);
}
.portal-appt-date .d {
  display: block;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-blue-accent);
}
.portal-appt-date .m {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--v10-text-faint, var(--color-text-light));
  margin-top: 2px;
}
.portal-appt-body { flex: 1 1 auto; min-width: 0; }
.portal-appt-service {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--v10-text-strong, var(--color-text-dark));
  margin: 0 0 6px;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.portal-appt-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 0.85rem;
  color: var(--v10-text-soft, var(--color-text-medium));
  margin-bottom: 10px;
}
.portal-appt-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.portal-appt-meta svg { color: var(--color-teal); flex: 0 0 auto; }
.portal-appt-meta .portal-meta-val { overflow-wrap: anywhere; }

/* ---------- Status chips ---------- */
.portal-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 999px;
  padding: 4px 12px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.portal-chip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.portal-chip.is-scheduled { background: rgba(46, 134, 222, 0.12); color: #2470b8; border-color: rgba(46, 134, 222, 0.3); }
.portal-chip.is-confirmed { background: rgba(0, 180, 216, 0.12); color: #0284a8; border-color: rgba(0, 180, 216, 0.32); }
.portal-chip.is-pending   { background: rgba(230, 170, 25, 0.14); color: #9a6d0a; border-color: rgba(230, 170, 25, 0.38); }
.portal-chip.is-progress  { background: rgba(255, 107, 53, 0.13); color: #d4531d; border-color: rgba(255, 107, 53, 0.32); }
.portal-chip.is-done      { background: rgba(46, 204, 113, 0.13); color: #1d8a4e; border-color: rgba(46, 204, 113, 0.32); }
.portal-chip.is-cancelled { background: rgba(231, 76, 60, 0.12); color: #c0392b; border-color: rgba(231, 76, 60, 0.32); }
.portal-chip.is-invoiced  { background: rgba(139, 92, 246, 0.13); color: #6d4bd8; border-color: rgba(139, 92, 246, 0.32); }
.portal-chip.is-due       { background: rgba(230, 170, 25, 0.14); color: #9a6d0a; border-color: rgba(230, 170, 25, 0.38); }
.portal-chip.is-paid      { background: rgba(46, 204, 113, 0.13); color: #1d8a4e; border-color: rgba(46, 204, 113, 0.32); }
[data-theme="dark"] .portal-chip.is-scheduled { color: #7ab5ee; }
[data-theme="dark"] .portal-chip.is-confirmed { color: #56d4ee; }
[data-theme="dark"] .portal-chip.is-pending   { color: #e5c06a; }
[data-theme="dark"] .portal-chip.is-progress  { color: #ff9d70; }
[data-theme="dark"] .portal-chip.is-done,
[data-theme="dark"] .portal-chip.is-paid      { color: #6fe3a1; }
[data-theme="dark"] .portal-chip.is-cancelled { color: #ff8f85; }
[data-theme="dark"] .portal-chip.is-invoiced  { color: #b39dfa; }
[data-theme="dark"] .portal-chip.is-due       { color: #e5c06a; }

/* ---------- Past-jobs timeline ---------- */
.portal-timeline {
  position: relative;
  padding-left: 26px;
}
.portal-timeline::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(180deg, var(--color-blue-accent) 0%, var(--color-teal) 60%, transparent 100%);
  opacity: 0.35;
  border-radius: 2px;
}
.portal-tl-item {
  position: relative;
  padding: 16px 20px;
  background: var(--v10-surface-card, #fff);
  border: 1px solid var(--v10-border-soft, var(--color-border));
  border-radius: 14px;
  margin-bottom: 14px;
  box-shadow: var(--v10-shadow-card, var(--shadow-card));
  transition: transform 0.3s ease;
}
.portal-tl-item:hover { transform: translateX(4px); }
.portal-tl-item::before {
  content: "";
  position: absolute;
  left: -24px;
  top: 24px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--gradient-accent);
  border: 2px solid var(--v10-surface-page, #fff);
  box-shadow: 0 0 0 3px rgba(46, 134, 222, 0.25);
}
.portal-tl-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.portal-tl-service {
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--v10-text-strong, var(--color-text-dark));
  overflow-wrap: anywhere;
}
.portal-tl-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-size: 0.84rem;
  color: var(--v10-text-soft, var(--color-text-medium));
}
.portal-tl-meta .portal-price {
  font-weight: 700;
  color: var(--color-green-dark, #27ae60);
}

/* ---------- Invoices ---------- */
.portal-invoices {
  display: grid;
  gap: 12px;
}
.portal-invoice {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  background: var(--v10-surface-card, #fff);
  border: 1px solid var(--v10-border-soft, var(--color-border));
  border-radius: 14px;
  padding: 16px 20px;
  box-shadow: var(--v10-shadow-card, var(--shadow-card));
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.portal-invoice:hover {
  transform: translateY(-2px);
  box-shadow: var(--v10-shadow-card-hover, var(--shadow-card-hover));
}
.portal-inv-doc {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--color-blue-accent) 12%, transparent);
  color: var(--color-blue-accent);
}
.portal-inv-body { flex: 1 1 200px; min-width: 0; }
.portal-inv-num {
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--v10-text-strong, var(--color-text-dark));
  letter-spacing: 0.02em;
}
.portal-inv-meta {
  font-size: 0.82rem;
  color: var(--v10-text-faint, var(--color-text-light));
  margin-top: 3px;
}
.portal-inv-amount {
  text-align: right;
}
.portal-inv-amount .amt {
  font-weight: 700;
  font-size: 1.12rem;
  color: var(--v10-text-strong, var(--color-text-dark));
  white-space: nowrap;
}
.portal-inv-amount .sub {
  display: block;
  font-size: 0.74rem;
  color: var(--v10-text-faint, var(--color-text-light));
  margin-top: 2px;
  white-space: nowrap;
}
.portal-inv-download {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--gradient-accent);
  color: #fff;
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 0.83rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(46, 134, 222, 0.35);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  white-space: nowrap;
}
.portal-inv-download:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(46, 134, 222, 0.45);
  color: #fff;
}
.portal-inv-download:focus-visible {
  outline: 3px solid var(--color-teal);
  outline-offset: 2px;
}

/* ---------- Book-again CTA ---------- */
.portal-rebook {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: clamp(36px, 5vw, 56px);
  border-radius: 20px;
  padding: clamp(24px, 3.5vw, 36px);
  background:
    radial-gradient(ellipse 70% 120% at 100% 0%, rgba(255, 107, 53, 0.22) 0%, transparent 60%),
    radial-gradient(ellipse 60% 120% at 0% 100%, rgba(0, 180, 216, 0.18) 0%, transparent 55%),
    linear-gradient(135deg, #0d1f3c 0%, #1e3a5f 100%);
  color: #fff;
}
.portal-rebook h3 {
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
}
.portal-rebook p {
  margin: 0;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.75);
}
.portal-rebook-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ---------- Skeletons (loading) ---------- */
.portal-skeleton-card,
.portal-skeleton-row {
  position: relative;
  overflow: hidden;
  background: var(--v10-surface-card, #fff);
  border: 1px solid var(--v10-border-soft, var(--color-border));
  border-radius: 14px;
}
.portal-skeleton-card { padding: 20px 22px; }
.portal-skeleton-row { padding: 16px 20px; }
.portal-sk {
  border-radius: 7px;
  background: color-mix(in srgb, var(--v10-text-faint, #718096) 16%, transparent);
  height: 12px;
  margin-bottom: 10px;
}
.portal-sk.w60 { width: 60%; }
.portal-sk.w40 { width: 40%; }
.portal-sk.w80 { width: 80%; }
.portal-sk.w30 { width: 30%; }
.portal-sk.h18 { height: 18px; }
.portal-sk:last-child { margin-bottom: 0; }
.portal-skeleton-card::after,
.portal-skeleton-row::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(148, 178, 215, 0.14), transparent);
  animation: portalShimmer 1.4s infinite;
}
@keyframes portalShimmer {
  100% { transform: translateX(100%); }
}

/* ---------- Empty states ---------- */
.portal-empty {
  text-align: center;
  padding: clamp(36px, 5vw, 56px) 24px;
  border: 1.5px dashed var(--v10-border-soft, var(--color-border));
  border-radius: 18px;
  background: color-mix(in srgb, var(--color-blue-accent) 3%, transparent);
}
.portal-empty-icon {
  width: 62px;
  height: 62px;
  margin: 0 auto 16px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--color-teal) 12%, transparent);
  color: var(--color-teal);
}
.portal-empty h4 {
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--v10-text-strong, var(--color-text-dark));
  margin: 0 0 8px;
}
.portal-empty p {
  font-size: 0.9rem;
  color: var(--v10-text-soft, var(--color-text-medium));
  margin: 0 0 20px;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}
.portal-empty .btn { margin: 0 auto; }

/* ---------- How-it-works steps ---------- */
.portal-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-gap);
  counter-reset: portal-step;
}
.portal-step {
  position: relative;
  background: var(--v10-surface-card, #fff);
  border: 1px solid var(--v10-border-soft, var(--color-border));
  border-radius: 16px;
  padding: 26px 24px 24px;
  box-shadow: var(--v10-shadow-card, var(--shadow-card));
}
.portal-step-num {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
  background: var(--gradient-accent);
  box-shadow: var(--shadow-blue);
  margin-bottom: 14px;
}
.portal-step:nth-child(2) .portal-step-num { background: linear-gradient(135deg, #00b4d8 0%, #0096c7 100%); }
.portal-step:nth-child(3) .portal-step-num { background: var(--gradient-cta); }
.portal-step:nth-child(4) .portal-step-num { background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%); }
.portal-step h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--v10-text-strong, var(--color-text-dark));
  margin: 0 0 7px;
}
.portal-step p {
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--v10-text-soft, var(--color-text-medium));
  margin: 0;
}

/* ---------- Logged-in view entrance ---------- */
.portal-view.is-active .portal-section,
.portal-view.is-active .portal-dash-head {
  animation: portalFadeUp 0.5s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) both;
}
.portal-view.is-active .portal-section:nth-child(2) { animation-delay: 0.06s; }
.portal-view.is-active .portal-section:nth-child(3) { animation-delay: 0.12s; }
@keyframes portalFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
  .portal-appt { flex-direction: column; gap: 14px; }
  .portal-appt-date {
    display: flex;
    align-items: baseline;
    gap: 8px;
    align-self: flex-start;
    padding: 8px 14px;
  }
  .portal-appt-date .d { font-size: 1.3rem; }
  .portal-invoice { gap: 12px; }
  .portal-inv-amount { text-align: left; width: 100%; display: flex; align-items: baseline; gap: 10px; }
  .portal-dash-head { gap: 14px; }
  .portal-avatar { width: 52px; height: 52px; flex-basis: 52px; font-size: 1.1rem; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .portal-feature,
  .portal-appt,
  .portal-tl-item,
  .portal-invoice,
  .portal-logout,
  .portal-inv-download,
  .portal-step { transition: none; }
  .portal-feature:hover,
  .portal-appt:hover,
  .portal-tl-item:hover,
  .portal-invoice:hover,
  .portal-logout:hover,
  .portal-inv-download:hover { transform: none; }
  .portal-skeleton-card::after,
  .portal-skeleton-row::after { animation: none; }
  .portal-view.is-active .portal-section,
  .portal-view.is-active .portal-dash-head { animation: none; }
}

/* ---------- Print (customer may print the dashboard) ---------- */
@media print {
  .portal-logout,
  .portal-inv-download,
  .topbar,
  .nav,
  .footer { display: none !important; }
}