/* =====================================================================
   CARE PROVIDER PORTAL — sign-in, profile, availability, bookings.
   Shares the site's design tokens (styles.css) and the same field/
   button/status styling conventions as care-app.css so the two feel
   like one product.
   ===================================================================== */

.pp-panel{
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 34px;
  max-width: 760px;
}
.pp-loading{ color: var(--slate-soft); font-family: var(--font-mono); font-size: 0.85rem; margin: 0; }

.pp-field{ display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; max-width: 420px; }
.pp-field label{ font-size: 0.86rem; font-weight: 600; color: var(--ink); }
.pp-field input, .pp-field select, .pp-field textarea{
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
}
.pp-field input:focus, .pp-field select:focus, .pp-field textarea:focus{
  border-color: var(--moss);
  box-shadow: 0 0 0 3px rgba(79,107,90,0.14);
  outline: none;
}
.pp-field textarea{ resize: vertical; min-height: 90px; }
.pp-hint{ font-size: 0.78rem; color: var(--slate-soft); margin: -2px 0 0; }
.pp-grid-2{ display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; max-width: 560px; }
.pp-grid-2 .pp-field{ max-width: none; }

.pp-status{
  min-height: 1.3em;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--moss-dark);
  margin: 6px 0 0;
}
.pp-status[data-state="error"]{ color: #A03E3E; }

.pp-otp-row{ display: flex; align-items: center; gap: 12px; }
.pp-link-btn{
  background: none; border: none; padding: 0;
  font-size: 0.82rem; font-weight: 600; color: var(--moss-dark);
  cursor: pointer; text-decoration: underline;
}
.pp-link-btn:disabled{ color: var(--slate-soft); cursor: default; text-decoration: none; }

/* -------- dashboard shell -------- */
.pp-dash-head{
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 22px; flex-wrap: wrap;
}
.pp-dash-head h2{ margin: 0; font-size: 1.3rem; }
.pp-signout{ background: none; border: none; color: var(--slate); font-weight: 600; font-size: 0.85rem; cursor: pointer; }
.pp-signout:hover{ color: var(--ink); }

.pp-badge{
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 5px 11px; border-radius: 999px;
  background: rgba(124,147,163,0.14); color: var(--slate);
}
.pp-badge.is-bookable{ background: rgba(47,142,150,0.14); color: var(--moss-dark); }
.pp-badge.is-pending{ background: rgba(229,165,24,0.16); color: var(--gold-dark); }
.pp-badge.is-blocked{ background: rgba(160,62,62,0.12); color: #A03E3E; }

.pp-tabs{ display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 24px; }
.pp-tab{
  background: none; border: none; padding: 10px 16px;
  font-size: 0.88rem; font-weight: 600; color: var(--slate);
  cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.pp-tab.is-active{ color: var(--ink); border-bottom-color: var(--gold); }

.pp-tabpanel{ display: none; }
.pp-tabpanel.is-active{ display: block; }

.pp-slot-list, .pp-booking-list{ display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.pp-slot-row, .pp-booking-row{
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 14px; background: var(--paper);
  font-size: 0.88rem; color: var(--ink);
}
.pp-slot-row small, .pp-booking-row small{ display: block; color: var(--slate-soft); font-size: 0.76rem; margin-top: 2px; }
.pp-remove-btn{
  background: none; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 6px 12px; font-size: 0.78rem; font-weight: 600; color: #A03E3E; cursor: pointer;
}
.pp-remove-btn:hover{ border-color: #A03E3E; }
.pp-empty{ color: var(--slate-soft); font-size: 0.88rem; }

.pp-add-slot-row{ display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-top: 6px; }
.pp-add-slot-row .pp-field{ margin-bottom: 0; max-width: 220px; }

@media (max-width: 620px){
  .pp-panel{ padding: 22px; }
  .pp-grid-2{ grid-template-columns: 1fr; }
  .pp-slot-row, .pp-booking-row{ flex-direction: column; align-items: flex-start; }
}