/* پروندهٔ بیمار: نمودار دندانی، نماهای فک، خط زمانی جلسه‌ها و یادداشت دکتر.
   رنگ‌ها از theme.css می‌آیند (--card، --border، --foreground، --muted-foreground، --accent). */

.rec { display: grid; gap: 18px; }
.rec-head { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; justify-content: space-between; }
.rec-id h1 { margin: 0 0 6px; }
.rec-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-sm {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px;
  border: 1px solid var(--border); border-radius: 999px;
  font-size: .78rem; color: var(--muted-foreground); background: var(--card);
}

.rec-stage { display: grid; gap: 14px; padding: 18px; }
.rec-cap { display: grid; gap: 4px; }
.rec-cap h3 { margin: 0; font-size: 1.02rem; }

/* ---------- نمودار دندانی (ویرایشگر جلسه) ---------- */
.chart-wrap { padding: 12px 8px; border: 1px solid var(--border); border-radius: 16px; background: #161310; }
.odonto { width: 100%; height: auto; display: block; }
.odonto-b { fill: transparent; stroke: var(--border); stroke-width: 1.4; transition: fill .18s ease, stroke .18s ease; }
.odonto-t { cursor: pointer; }
.odonto-t:hover .odonto-b { fill: rgba(255, 107, 44, .14); stroke: rgba(255, 107, 44, .55); }
.odonto-t.on .odonto-b { fill: rgba(255, 107, 44, .78); stroke: #ff8a3d; }
.odonto-n { font-size: 10px; fill: var(--muted-foreground); pointer-events: none; }
.odonto-t.on .odonto-n { fill: #ffdcbe; font-weight: 700; }
.odonto-q { font-size: 11px; fill: var(--muted-foreground); }
.odonto-t:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

/* ---------- ویرایشگر جلسه ---------- */
.picked { display: grid; gap: 8px; }
.picked-row {
  display: grid; grid-template-columns: 44px 1fr minmax(120px, 190px) 34px;
  gap: 10px; align-items: center; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--card);
}
.picked-n { font-weight: 700; color: var(--accent); }
.picked-t { font-size: .82rem; color: var(--muted-foreground); }

/* ---------- خط زمانی جلسه‌ها ---------- */
.rec-timeline { display: grid; gap: 10px; }
.visit { border: 1px solid var(--border); border-radius: 16px; background: var(--card); overflow: hidden; }
.visit.open { border-color: rgba(201, 169, 106, .4); }
.visit-head {
  display: grid; grid-template-columns: 96px 1fr auto 20px; gap: 12px; align-items: center;
  width: 100%; padding: 14px 16px; background: none; border: 0; cursor: pointer; text-align: start;
  font: inherit; color: inherit;
}
.visit-head:hover { background: rgba(255, 255, 255, .035); }
.visit-date { font-size: .78rem; color: var(--muted-foreground); }
.visit-title { font-weight: 600; }
.visit-count { font-size: .76rem; color: var(--muted-foreground); }
.visit-caret { transition: transform .22s ease; color: var(--muted-foreground); }
.visit.open .visit-caret { transform: rotate(180deg); }
.visit-body { display: grid; gap: 14px; padding: 0 16px 16px; max-height: 0; overflow: hidden; }
.visit.open .visit-body { max-height: none; }
.visit-full-date { margin: 0; }

.tchips { display: flex; flex-wrap: wrap; gap: 8px; }
.tchip {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px;
  border: 1px solid rgba(255, 107, 44, .42); border-radius: 999px;
  background: rgba(255, 107, 44, .12); color: var(--foreground); font: inherit; font-size: .78rem;
}
.tchip b { color: #ffb27a; }

/* متن دکتر: کلمه‌به‌کلمه ظاهر می‌شود */
.visit.open .reveal-text .w {
  animation: revealWord .7s cubic-bezier(.2, .8, .2, 1) both;
  animation-delay: calc(var(--i) * 24ms);
}
html.rm .reveal-text .w { opacity: 1; transform: none; filter: none; animation: none; }

.btn.sm { padding: 7px 12px; font-size: .8rem; }
.btn.danger { color: #ff8f7a; border-color: rgba(255, 143, 122, .35); }
.icon-btn {
  width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--border);
  background: none; color: var(--muted-foreground); cursor: pointer; font-size: 1rem; line-height: 1;
}
.icon-btn:hover { color: #ff8f7a; border-color: rgba(255, 143, 122, .4); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sec-t { font-weight: 600; margin-top: 4px; }

.rec-comprehensive { max-height: min(75dvh, 640px); overflow-y: auto; width: min(510px, 80vw); min-width: 0; gap: 12px; scrollbar-gutter: stable; }
.rec-comprehensive .rec-treatment-section { padding: 14px; gap: 8px; background: #f7fbf8; border: 1px solid #b7dfcd; border-radius: 15px; }
.rec-comprehensive .rec-treatment-section h3 { margin: 0; color: #22553d; font-size: 1.02rem; }
.rec-comprehensive .rec-treatment-section p { margin: 0; font-size: .82rem; }
.rec-treatment-rows { max-height: 170px; overflow-y: auto; gap: 6px; }
.rec-comprehensive .rec-treatment-row { width: 100%; min-height: 48px; text-align: start; cursor: pointer; background: #fff7ed; border: 1px solid #efc396; color: #34302a; font: inherit; padding: 7px 12px; border-radius: 11px; display: flex; align-items: center; gap: 10px; }
.rec-comprehensive .rec-treatment-row b { color: #af521e; min-width: 32px; }
.rec-comprehensive .rec-treatment-row span:last-child { margin-inline-start: auto; }
.rec-comprehensive .rec-treatment-row:hover, .rec-comprehensive .rec-treatment-row.active { border-color: #d27129; background: #ffecd5; }
.rec-selected-treatment[hidden] { display: none; }
.rec-selected-treatment { border: 1px solid #b7dfcd; border-radius: 12px; background: #fffefa; padding: 12px; }
.rec-selected-treatment h4 { margin: 0; color: #245c40; }
.rec-selected-treatment .field { margin: 0; }
.rec-selected-treatment .rec-treatment-form { gap: 8px; }
.rec-comprehensive .rec-plan-disclosure { border: 1px solid #edc69c; border-radius: 12px; background: #fffaf4; padding: 9px 12px; }
.rec-comprehensive .rec-plan-disclosure summary { cursor: pointer; font-weight: 800; color: #a34e1e; min-height: 40px; display: flex; align-items: center; justify-content: space-between; }
.rec-comprehensive .rec-plan-disclosure .rec-plan-section { padding: 10px 0; border: 0; gap: 8px; background: transparent; }
.rec-comprehensive .rec-plan-section h3 { margin: 0; color: #a34e1e; font-size: .98rem; }
.rec-comprehensive .rec-plan-section p { margin: 0; }

.rec-plan-section, .rec-treatment-section { padding: 18px; border-radius: 16px; border: 1px solid rgba(255, 138, 61, .45); }
.rec-treatment-section { border-color: rgba(72, 181, 114, .55); }
.rec-plan-section h3, .rec-plan-overview h3 { color: #ff9a51; }
.rec-treatment-section h3 { color: #75d39c; }
.rec-head .rec-plan-new, .rec-plan-save { background: #226a45; color: #ffb278; border-color: #4b9b6c; }
.rec-head .rec-visit-new, .rec-complete { background: #226a45; color: #e9fff0; border-color: #4b9b6c; }
.rec-plan-overview { padding: 18px; display: grid; gap: 12px; }
.rec-plan-list, .rec-treatment-rows { display: grid; gap: 9px; }
.rec-plan-item, .rec-treatment-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; }
.rec-plan-item b { color: #ff9a51; }
.rec-treatment-row .sel { flex: 1; min-width: 150px; }
.rec-done-chart .odonto-t.on .odonto-b { fill: #39875c; stroke: #73d49b; }
.rec-done-chart .odonto-t.on .odonto-n { fill: #e4ffeb; }
.rec-plan-chart .odonto-t, .rec-done-chart .odonto-t { cursor: default; }
.rec-plan-chart .odonto-t:hover .odonto-b, .rec-done-chart .odonto-t:hover .odonto-b { stroke: var(--border); }
.rec-plan-chart .odonto-t.on:hover .odonto-b { stroke: #ff8a3d; }
.rec-done-chart .odonto-t.on:hover .odonto-b { stroke: #73d49b; }

/* Patient record: never let its intrinsic tab/content width expand the portal grid. */
@media (max-width: 860px) {
  .portal-shell:has(.my-record) { grid-template-columns: minmax(0, 1fr); }
  .portal-shell:has(.my-record) > div:not(.nav-scrim),
  .portal-shell:has(.my-record) .content,
  .portal-shell:has(.my-record) .content > div,
  .my-record, .my-rec-panel { min-width: 0; max-width: 100%; }
  .my-record .my-rec-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; gap: 4px; }
  .my-record .my-rec-tabs button { min-width: 0; white-space: normal; overflow-wrap: anywhere; padding: 9px 4px; line-height: 1.45; text-align: center; }
  .my-record .my-rec-identity { min-width: 0; }
  .my-record .my-rec-identity > div { min-width: 0; overflow-wrap: anywhere; }
  .my-record .my-rec-history, .my-record .my-rec-visit, .my-record .my-rec-visit-label,
  .my-record .rec-plan-overview, .my-record .my-rec-images { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
  .my-record .my-rec-visit-details .chart-wrap { min-width: 0; max-width: 100%; }
}

@media (max-width: 640px) {
  .picked-row { grid-template-columns: 40px 1fr 30px; }
  .picked-row .sel { grid-column: 1 / -1; }
  .visit-head { grid-template-columns: 1fr auto 18px; }
  .visit-head .visit-date { grid-column: 1 / -1; }
  .grid2 { grid-template-columns: 1fr; }
}