/* ==========================================================================
   O03 : RECEPTION DOCUMENTS ET PAIEMENT
   Prefixe : orecv-
   ========================================================================== */

.orecv-screen {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ---------- BANDEAU PATIENT ---------- */

.orecv-patient-bar {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-gray-border);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
  opacity: 0;
  animation: orecv-fade-in 400ms var(--ease-out) 60ms forwards;
}

.orecv-patient-bar__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--color-primary-soft);
  flex-shrink: 0;
}

.orecv-patient-bar__avatar-fallback {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-weight: var(--fw-bold);
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.orecv-patient-bar__info { flex: 1; min-width: 0; }

.orecv-patient-bar__name {
  font-family: var(--font-heading);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--color-gray-dark);
}

.orecv-patient-bar__sub {
  font-size: 12px;
  color: var(--color-gray-light);
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.orecv-patient-bar__chips {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.orecv-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: var(--fw-medium);
  background: var(--color-bg-soft);
  border: 1px solid var(--color-gray-border);
  color: var(--color-gray);
}

.orecv-chip--success {
  background: var(--color-success-soft);
  border-color: #A8D8B8;
  color: var(--color-success);
}

/* ---------- LAYOUT 2 COLONNES ---------- */

.orecv-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 16px;
  flex: 1;
  min-height: 0;
}

/* ---------- COLONNE GAUCHE ---------- */

.orecv-col-left {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
  overflow-y: auto;
}

.orecv-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-gray-border);
  padding: 18px 20px;
  opacity: 0;
  animation: orecv-fade-in 400ms var(--ease-out) forwards;
}

.orecv-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.orecv-card__title {
  font-family: var(--font-heading);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--color-gray-dark);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.orecv-card__title-icon { color: var(--color-primary); }

.orecv-card__badge {
  font-size: 11px;
  font-weight: var(--fw-semibold);
  padding: 3px 8px;
  border-radius: var(--radius-sm);
}

/* Prescription detail */
.orecv-presc-meta {
  display: flex;
  gap: 20px;
  margin-bottom: 14px;
}

.orecv-presc-meta__item { flex: 1; }

.orecv-presc-meta__label {
  font-size: var(--fs-xs);
  color: var(--color-gray-light);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: var(--fw-medium);
  margin-bottom: 3px;
}

.orecv-presc-meta__value {
  font-size: var(--fs-sm);
  color: var(--color-gray-dark);
  font-weight: var(--fw-medium);
}

/* Ligne medicament */
.orecv-med-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #F5F5F5;
}

.orecv-med-row:last-child { border-bottom: none; }

.orecv-med-row__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.orecv-med-row__name {
  flex: 1;
  min-width: 0;
}

.orecv-med-row__name-main {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-gray-dark);
}

.orecv-med-row__name-dci {
  font-size: 12px;
  color: var(--color-gray-light);
  margin-top: 2px;
}

.orecv-med-row__qty {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-gray);
  white-space: nowrap;
}

.orecv-med-row__posol {
  font-size: 12px;
  color: var(--color-gray-light);
  white-space: nowrap;
}

/* Documents recus */
.orecv-docs-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.orecv-doc-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--color-bg-soft);
  border: 1px solid var(--color-gray-border);
}

.orecv-doc-row__icon {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--color-success-soft);
  color: var(--color-success);
}

.orecv-doc-row__label {
  flex: 1;
  font-size: var(--fs-sm);
  color: var(--color-gray-dark);
  font-weight: var(--fw-medium);
}

.orecv-doc-row__check { color: var(--color-success); }

/* ---------- COLONNE DROITE ---------- */

.orecv-col-right {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
}

/* Card paiement */
.orecv-payment {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-gray-border);
  padding: 18px 20px;
  opacity: 0;
  animation: orecv-fade-in 400ms var(--ease-out) 280ms forwards;
}

.orecv-payment__label {
  font-size: var(--fs-xs);
  color: var(--color-gray-light);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: var(--fw-medium);
  margin-bottom: 12px;
}

.orecv-payment__status {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.orecv-payment__status-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-success-soft);
  color: var(--color-success);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.orecv-payment__status-text { flex: 1; }

.orecv-payment__status-label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-success);
}

.orecv-payment__status-sub {
  font-size: 12px;
  color: var(--color-gray-light);
  margin-top: 2px;
}

.orecv-payment__breakdown {
  border-top: 1px solid #F5F5F5;
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.orecv-payment__line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--fs-sm);
  color: var(--color-gray);
}

.orecv-payment__line--total {
  font-weight: var(--fw-bold);
  color: var(--color-gray-dark);
  font-size: var(--fs-base);
  border-top: 1px solid var(--color-gray-border);
  padding-top: 10px;
  margin-top: 4px;
}

.orecv-payment__total-amount {
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  color: var(--color-success);
}

/* Actions */
.orecv-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
}

/* ---------- ANIMATIONS ---------- */

@keyframes orecv-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- TABLETTE (defaut) : colonne unique ---------- */

.frame--tablet .orecv-layout {
  grid-template-columns: 1fr;
  overflow-y: auto;
  flex: 1;
}

.frame--tablet .orecv-col-left {
  overflow-y: visible;
}

.frame--tablet .orecv-actions {
  margin-top: 0;
}

/* ---------- DESKTOP ---------- */

.frame--desktop .orecv-layout {
  grid-template-columns: 1fr 300px;
}
