/* ============================================================
   DentX · Стили панели врача (doctor.html)
   ============================================================ */

/* ── Экран входа ── */
.login-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px;
  background: linear-gradient(160deg, #EAF3FB 0%, var(--bg) 60%); }
.login-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl); padding: 40px; width: 100%; max-width: 400px; text-align: center; }
.login-card .logo { font-size: 32px; margin-bottom: 16px; }
.login-card h2 { font-size: 22px; }
.login-card p { margin-bottom: 24px; }
.login-card form { text-align: left; }
.login-card .field label { text-align: left; }
.login-error { background: #FDECEA; color: var(--danger); font-size: 14px; font-weight: 500;
  padding: 10px 14px; border-radius: var(--radius-sm); margin-bottom: 14px; }

/* ── Шапка панели ── */
.dash-header { background: #fff; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 50; }
.dash-header-inner { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.dash-header .logo { font-size: 22px; }
.dash-user { display: flex; align-items: center; gap: 12px; }
.dash-user img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid var(--card-tint); }
.dash-user b { font-family: var(--font-head); font-size: 14px; display: block; }
.dash-user span { font-size: 12px; color: var(--text-muted); text-transform: capitalize; }
.dash-user .btn { padding: 8px 10px; }

.dash-body { padding: 28px 24px 60px; }

/* ── Вкладки ── */
.tabs { display: inline-flex; gap: 4px; background: #fff; border: 1px solid var(--border);
  border-radius: 999px; padding: 4px; margin-bottom: 24px; }
.tab { display: inline-flex; align-items: center; gap: 7px; border: none; background: transparent;
  font-family: var(--font-head); font-weight: 600; font-size: 14px; color: var(--text-muted);
  padding: 9px 18px; min-height: 44px; border-radius: 999px; cursor: pointer; transition: all .15s; }
.tab.active { background: var(--primary); color: #fff; }

.day-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 18px; }

/* ── Карточка приёма ── */
.appt-list { display: flex; flex-direction: column; gap: 12px; }
.appt-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 16px 20px; display: grid;
  grid-template-columns: 88px 1fr auto; gap: 18px; align-items: center; }
.appt-card.is-done { opacity: 0.72; }
.appt-card.is-cancelled { opacity: 0.6; }
.appt-time { text-align: center; border-right: 1px solid var(--border); padding-right: 8px; }
.appt-time b { font-family: var(--font-head); font-size: 20px; color: var(--primary); display: block; }
.appt-time span { font-size: 11px; color: var(--text-muted); }
.appt-main b { font-family: var(--font-head); font-size: 16px; cursor: pointer; }
.appt-main b:hover { color: var(--primary); }
.appt-main .sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--text-muted); font-size: 13px; margin-top: 3px; }
.appt-main .sub i { width: 14px; height: 14px; }
.appt-price { font-family: var(--font-head); font-weight: 700; color: var(--text); }
.appt-right { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.appt-actions { display: flex; gap: 6px; }
.act { border: 1px solid var(--border); background: #fff; border-radius: var(--radius-sm);
  font-family: var(--font-head); font-weight: 600; font-size: 12px; padding: 7px 12px; cursor: pointer; transition: all .15s; white-space: nowrap; }
.act:hover { border-color: var(--primary); color: var(--primary); }
.act-came.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.act-paid.active { background: var(--success); color: #fff; border-color: var(--success); }
.act-noshow.active { background: var(--warning); color: #fff; border-color: var(--warning); }

.empty-state { text-align: center; color: var(--text-muted); padding: 48px 0; }
.empty-state i { width: 40px; height: 40px; color: var(--border); margin-bottom: 8px; }

/* ── Неделя ── */
.week-list { display: flex; flex-direction: column; gap: 20px; }
.week-day { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.week-day.is-today { border-color: var(--primary); box-shadow: var(--shadow); }
.week-day-head { display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; background: #F4F9FE; border-bottom: 1px solid var(--border); }
.week-day-head b { font-family: var(--font-head); text-transform: capitalize; }
.week-day-head .today-pill { background: var(--primary); color: #fff; font-size: 11px; font-weight: 700;
  padding: 2px 10px; border-radius: 999px; }
.week-day-body { padding: 12px 20px; display: flex; flex-direction: column; gap: 8px; }
.week-appt { display: flex; align-items: center; gap: 12px; font-size: 14px; padding: 6px 0; }
.week-appt .wt { font-family: var(--font-head); font-weight: 700; color: var(--primary); width: 52px; }
.week-appt .wn { flex: 1; cursor: pointer; } .week-appt .wn:hover { color: var(--primary); }
.week-day-empty { color: var(--text-muted); font-size: 13px; padding: 6px 0; }

/* ── Карточка пациента ── */
.patient-head { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; }
.patient-avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--card-tint); color: var(--primary);
  display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-weight: 700; font-size: 22px; }
.patient-head h2 { font-size: 22px; }
.patient-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; color: var(--text-muted); font-size: 14px; margin: 12px 0 4px; }
.patient-meta div { display: flex; align-items: center; gap: 7px; } .patient-meta i { width: 16px; height: 16px; color: var(--primary); }
.patient-notes { background: var(--card-tint); border-radius: var(--radius-sm); padding: 12px 16px; font-size: 14px; margin: 14px 0; }
.patient-section { margin-top: 26px; }
.patient-section h3 { font-size: 16px; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.patient-section h3 i { width: 18px; height: 18px; color: var(--primary); }

.visit-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.visit-row:last-child { border-bottom: none; }
.visit-date { font-family: var(--font-head); font-weight: 600; width: 96px; }
.visit-name { flex: 1; } .visit-name span { color: var(--text-muted); font-size: 12px; display: block; }
.visit-price { font-family: var(--font-head); font-weight: 600; }

.plan { border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 12px; }
.plan-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.plan-head b { font-family: var(--font-head); }
.plan-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 14px; border-top: 1px dashed var(--border); }
.plan-item .ic { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.plan-item.done .ic { background: var(--success); color: #fff; }
.plan-item.pending .ic { background: #EEF1F5; color: var(--text-muted); }
.plan-item .ic i { width: 14px; height: 14px; }
.plan-item .tooth { font-size: 12px; color: var(--text-muted); background: var(--bg); border: 1px solid var(--border); padding: 1px 8px; border-radius: 6px; }
.plan-item .pi-price { margin-left: auto; font-family: var(--font-head); font-weight: 600; }

/* ── Полноэкранный модал карточки пациента ── */
.modal-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,0.5); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 24px; }
.modal { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); position: relative; display: flex; flex-direction: column; }
.modal-full { width: 90vw; height: 90vh; max-width: 1120px; }
.modal-close { position: absolute; top: 16px; right: 16px; z-index: 5; width: 42px; height: 42px; border-radius: 50%; background: #fff; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-muted); transition: all .2s; }
.modal-close:hover { color: var(--danger); border-color: var(--danger); transform: rotate(90deg); }
.patient-body { padding: 32px 36px; overflow-y: auto; flex: 1; }
.patient-head-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 6px; color: var(--text-muted); font-size: 14px; }
.patient-head-meta span { display: inline-flex; align-items: center; gap: 6px; }
.patient-head-meta i { width: 15px; height: 15px; color: var(--primary); }

/* ── Вкладки в карточке пациента ── */
.pt-tabs { display: flex; gap: 4px; background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 4px; margin: 22px 0 20px; width: fit-content; }
.pt-tab { display: inline-flex; align-items: center; gap: 7px; border: none; background: transparent; font-family: var(--font-head); font-weight: 600; font-size: 13px; color: var(--text-muted); padding: 9px 16px; min-height: 44px; border-radius: 999px; cursor: pointer; transition: all .25s; }
.pt-tab i { width: 16px; height: 16px; }
.pt-tab.active { background: var(--primary); color: #fff; }

/* ── Одонтограмма ── */
.odonto { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 14px; overflow-x: auto; }
.odonto-jaw { text-align: center; font-size: 12px; font-weight: 600; color: var(--text-muted); font-family: var(--font-head); margin: 6px 0; }
.odonto-row { display: flex; justify-content: center; gap: 4px; min-width: 540px; }
.otooth { border: none; background: transparent; padding: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 3px; transition: transform .2s; min-height: 44px; }
.otooth:hover { transform: translateY(-3px); }
.tooth-shape { display: block; }
.tooth-shape svg { width: 28px; height: 36px; }
.tooth-shape svg rect { fill: #fff; stroke: #cbd5e1; stroke-width: 1; transition: fill .25s, stroke .25s; }
.tooth-num { font-size: 11px; font-weight: 600; color: var(--text-muted); font-family: var(--font-head); }
.otooth.status-caries  .tooth-shape svg rect { fill: #e74c3c; stroke: #c0392b; }
.otooth.status-filling .tooth-shape svg rect { fill: #f39c12; stroke: #d98c0e; }
.otooth.status-removed .tooth-shape svg rect { fill: #95a5a6; stroke: #7f8c8d; }
.otooth.status-implant .tooth-shape svg rect { fill: #1B4F8A; stroke: #143A66; }
.otooth.status-crown   .tooth-shape svg rect { fill: #f1c40f; stroke: #d4ac0d; }
.otooth.status-removed .tooth-shape { position: relative; }
.otooth.status-removed .tooth-shape::after { content: '×'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 22px; font-weight: 700; top: -3px; }

/* Двухуровневая модель: цвет зуба = СОСТОЯНИЕ (диагноз) */
.otooth { position: relative; }
.otooth.cond-caries        .tooth-shape svg rect { fill: #e74c3c; stroke: #c0392b; }
.otooth.cond-pulpitis      .tooth-shape svg rect { fill: #c0392b; stroke: #922b21; }
.otooth.cond-periodontitis .tooth-shape svg rect { fill: #8e44ad; stroke: #6c3483; }
.otooth.cond-wedge_defect  .tooth-shape svg rect { fill: #e67e22; stroke: #ca6f1e; }
.otooth.cond-mobility_1    .tooth-shape svg rect { fill: #f1c40f; stroke: #d4ac0d; }
.otooth.cond-mobility_2    .tooth-shape svg rect { fill: #e1b000; stroke: #b8900a; }
.otooth.cond-mobility_3    .tooth-shape svg rect { fill: #b8860b; stroke: #946d09; }
.otooth.cond-retained      .tooth-shape svg rect { fill: #16a085; stroke: #117a65; }
.otooth.cond-to_remove     .tooth-shape svg rect { fill: #7f1d1d; stroke: #5c1515; }
.otooth.cond-missing       .tooth-shape svg rect { fill: #95a5a6; stroke: #7f8c8d; }
.otooth.cond-missing .tooth-shape { position: relative; }
.otooth.cond-missing .tooth-shape::after { content: '×'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 22px; font-weight: 700; top: -3px; }
/* Маркер реставрации (синяя точка в углу зуба) */
.otooth.has-resto::after { content: ''; position: absolute; top: -2px; right: 3px; width: 9px; height: 9px; border-radius: 50%; background: var(--primary); border: 1.5px solid #fff; box-shadow: 0 0 0 1px var(--primary); }

/* Переключатель прикуса */
.odonto-modeswitch { display: inline-flex; gap: 4px; background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 4px; margin-bottom: 14px; }
.oms { display: inline-flex; align-items: center; gap: 6px; border: none; background: transparent; font-family: var(--font-head); font-weight: 600; font-size: 13px; color: var(--text-muted); padding: 8px 16px; min-height: 40px; border-radius: 999px; cursor: pointer; transition: all .2s; }
.oms i { width: 15px; height: 15px; }
.oms.active { background: var(--primary); color: #fff; }

.tooth-legend { display: flex; flex-wrap: wrap; gap: 10px 18px; margin: 18px 0; }
.tooth-legend span { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-muted); }
.tooth-legend i { width: 16px; height: 16px; border-radius: 4px; display: inline-block; }
.tooth-legend .legend-resto i { background: var(--primary); border-radius: 50%; width: 12px; height: 12px; }
.teeth-hint { font-size: 13px; margin-top: 8px; }
.teeth-msg { display: inline-block; margin-left: 12px; font-weight: 600; font-size: 14px; }
.teeth-msg.ok { color: var(--success); } .teeth-msg.err { color: var(--danger); }

/* ── Окно зуба (модалка) ── */
.tooth-modal { z-index: 1300; }
.tooth-modal-card { width: 92vw; max-width: 600px; max-height: 90vh; padding: 28px 30px; overflow-y: auto; }
.tm-head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.tm-toothicon { width: 48px; height: 48px; border-radius: 50%; background: var(--card-tint); color: var(--primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tm-toothicon i { width: 24px; height: 24px; }
.tm-head h3 { font-size: 20px; }
.tm-section { margin-bottom: 20px; }
.tm-section h4 { font-size: 14px; font-family: var(--font-head); display: flex; align-items: center; gap: 7px; margin-bottom: 10px; }
.tm-section h4 i { width: 16px; height: 16px; color: var(--primary); }
.tm-section h4 .text-muted { font-weight: 400; font-size: 12px; }
.tm-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tm-chip { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--border); background: #fff; border-radius: 999px; padding: 8px 14px; font-size: 13px; font-weight: 500; cursor: pointer; transition: all .15s; min-height: 40px; }
.tm-chip:hover { border-color: var(--primary); }
.tm-chip.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.tm-chip .dot { width: 13px; height: 13px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.tm-surfaces { display: flex; flex-wrap: wrap; gap: 8px; }
.tm-surf { position: relative; cursor: pointer; }
.tm-surf input { position: absolute; opacity: 0; pointer-events: none; }
.tm-surf span { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: var(--font-head); font-weight: 700; color: var(--text-muted); transition: all .15s; }
.tm-surf input:checked + span { background: var(--primary); color: #fff; border-color: var(--primary); }
.tm-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
.tm-msg { font-weight: 600; font-size: 14px; }
.tm-msg.ok { color: var(--success); } .tm-msg.err { color: var(--danger); }

.tm-history { display: flex; flex-direction: column; gap: 8px; }
.tm-hist { border-left: 3px solid var(--border); padding: 8px 0 8px 12px; }
.tm-hist-top { font-size: 14px; }
.tm-hist-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

/* Процедуры из прайса (в окне зуба) */
.tm-proclist { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
#tmAddProcBtn { margin-bottom: 4px; }
.tp-form { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin: 12px 0; }
.tp-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-muted); margin-bottom: 12px; }
.tp-form-row { display: flex; gap: 12px; flex-wrap: wrap; }
.tp-form-row .tp-field { flex: 1; min-width: 130px; }
.tp-surfaces-mini { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.tp-surfaces-mini .tm-surf span { width: 40px; height: 40px; font-size: 13px; }
.tp-form-actions { display: flex; align-items: center; gap: 12px; }
.tp-msg { font-weight: 600; font-size: 13px; }
.tp-msg.err { color: var(--danger); } .tp-msg.ok { color: var(--success); }
.tp-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; }
.tp-row.tp-paid { border-left: 3px solid var(--success); }
.tp-row.tp-done { border-left: 3px solid var(--primary); }
.tp-row.tp-planned { border-left: 3px solid var(--warning); }
.tp-row-main b { font-family: var(--font-head); font-size: 14px; }
.tp-row-sub { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--text-muted); margin-top: 3px; }
.tp-surf-tag { font-family: var(--font-head); font-weight: 700; color: var(--primary); }
.tp-row-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.tp-status { font-size: 13px; padding: 7px 8px; min-height: 40px; }
.tp-del { border: 1px solid var(--border); background: #fff; border-radius: var(--radius-sm); width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-muted); transition: all .15s; flex-shrink: 0; }
.tp-del:hover { border-color: var(--danger); color: var(--danger); }
.tp-del i { width: 16px; height: 16px; }
.tp-badge { font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 999px; background: var(--bg); color: var(--text-muted); }
.tp-badge-paid { background: rgba(39,174,96,0.12); color: var(--success); }
.tp-badge-done { background: var(--card-tint); color: var(--primary); }

/* ── Комментарии врачей (медицинский дневник) ── */
.cmt-hint { font-size: 13px; margin: -4px 0 14px; }
.cmt-form { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 22px; }
.cmt-form textarea { width: 100%; resize: vertical; min-height: 72px; }
.cmt-form-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 12px; }
.cmt-date { display: inline-flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: 13px; }
.cmt-date i { width: 16px; height: 16px; color: var(--primary); }
.cmt-date input { width: auto; }
.cmt-msg { margin-top: 10px; font-weight: 600; font-size: 14px; }
.cmt-msg.ok { color: var(--success); } .cmt-msg.err { color: var(--danger); }

.cmt-feed { display: flex; flex-direction: column; gap: 12px; }
.cmt-item { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; background: #fff; }
.cmt-item.is-mine { border-left: 3px solid var(--primary); }
.cmt-item-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.cmt-author { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-head); font-weight: 600; font-size: 14px; }
.cmt-author i { width: 16px; height: 16px; color: var(--primary); }
.cmt-visit { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--text-muted); }
.cmt-visit i { width: 14px; height: 14px; }
.cmt-actions { margin-left: auto; display: inline-flex; gap: 4px; }
.cmt-actions button { border: 1px solid var(--border); background: #fff; border-radius: var(--radius-sm); width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-muted); transition: all .15s; }
.cmt-actions button i { width: 15px; height: 15px; }
.cmt-edit:hover { border-color: var(--primary); color: var(--primary); }
.cmt-del:hover { border-color: var(--danger); color: var(--danger); }
.cmt-text { font-size: 14px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.cmt-edited { margin-top: 6px; font-size: 11px; color: var(--text-muted); font-style: italic; }
.cmt-edit-form textarea { width: 100%; resize: vertical; min-height: 72px; }

/* Попап статуса зуба */
.tooth-pop { position: fixed; z-index: 1100; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-xl); padding: 6px; width: 180px; }
.tp-opt { display: flex; align-items: center; gap: 10px; width: 100%; border: none; background: transparent; padding: 10px 12px; border-radius: 8px; cursor: pointer; font-family: var(--font-body); font-size: 14px; color: var(--text); text-align: left; transition: background .15s; }
.tp-opt:hover { background: var(--bg); }
.tp-opt .sw { width: 18px; height: 18px; border-radius: 5px; flex-shrink: 0; }

/* ── Фото лечения по процедурам (стадии) ── */
.tp-hint { font-size: 13px; margin: -4px 0 14px; }
.tp-newproc { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.tp-newproc input { flex: 1; min-width: 220px; }
.tp-newproc .btn { min-height: 48px; white-space: nowrap; }
.tp-msg { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; margin-bottom: 12px; padding: 8px 14px; border-radius: var(--radius-sm); }
.tp-msg.busy { color: var(--primary); background: var(--card-tint); }
.tp-msg.ok { color: var(--success); background: rgba(39,174,96,0.1); }
.tp-msg.err { color: var(--danger); background: rgba(231,76,60,0.1); }

#tpProcedures { display: flex; flex-direction: column; gap: 16px; }
.tp-proc { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.tp-proc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: #F4F9FE; border-bottom: 1px solid var(--border); }
.tp-proc-head b { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-head); font-size: 15px; }
.tp-proc-head b i { width: 17px; height: 17px; color: var(--primary); }
.tp-stages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); }
.tp-stage { background: #fff; padding: 12px 14px; }
.tp-stage-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.tp-stage-label { font-family: var(--font-head); font-weight: 700; font-size: 12px; letter-spacing: .4px; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; color: #fff; }
.tp-stage-before .tp-stage-label { background: var(--primary); }
.tp-stage-mid    .tp-stage-label { background: var(--warning); }
.tp-stage-after  .tp-stage-label { background: var(--success); }
.tp-stage-count { font-size: 12px; color: var(--text-muted); font-weight: 600; }
.tp-thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.tp-thumb { position: relative; width: 76px; height: 76px; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border); }
.tp-thumb img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; display: block; }
.tp-thumb-del { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border: none; border-radius: 50%; background: rgba(255,255,255,0.92); color: var(--danger); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .2s; }
.tp-thumb-del:hover { background: var(--danger); color: #fff; }
.tp-thumb-del i { width: 13px; height: 13px; }
.tp-add { width: 76px; height: 76px; border: 1px dashed var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--text-muted); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .2s; }
.tp-add:hover { border-color: var(--primary); color: var(--primary); background: var(--card-tint); }
.tp-add i { width: 22px; height: 22px; }

/* ── Старый блок «до/после»: второстепенный, свёрнут под ссылкой ── */
.ph-legacy { margin-top: 26px; border-top: 1px solid var(--border); padding-top: 16px; }
.ph-legacy > summary { cursor: pointer; display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-head); font-weight: 600; font-size: 13px; color: var(--text-muted); list-style: none; min-height: 32px; }
.ph-legacy > summary::-webkit-details-marker { display: none; }
.ph-legacy > summary::after { content: '▾'; margin-left: 4px; transition: transform .2s; }
.ph-legacy[open] > summary::after { transform: rotate(180deg); }
.ph-legacy > summary i { width: 15px; height: 15px; }
.ph-legacy > summary:hover { color: var(--primary); }
.ph-legacy[open] > summary { color: var(--primary); }
.ph-legacy-body { margin-top: 16px; }

/* ── Фото до/после ── */
.ph-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.ph-actions .btn { min-height: 48px; }
.ph-msg { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; margin-bottom: 14px; padding: 8px 14px; border-radius: var(--radius-sm); }
.ph-msg.busy { color: var(--primary); background: var(--card-tint); }
.ph-msg.ok { color: var(--success); background: rgba(39,174,96,0.1); }
.ph-msg.err { color: var(--danger); background: rgba(231,76,60,0.1); }

.ph-compare { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 22px; box-shadow: var(--shadow); }
.ph-compare h4 { display: flex; align-items: center; gap: 8px; font-family: var(--font-head); font-size: 15px; color: #fff; background: linear-gradient(135deg, var(--primary), var(--accent)); padding: 14px 18px; }
.ph-compare h4 i { width: 18px; height: 18px; }
.ph-compare-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 18px; }
.ph-compare-row figure { margin: 0; }
.ph-compare-row img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius); cursor: zoom-in; transition: transform .25s; }
.ph-compare-row img:hover { transform: scale(1.02); }
.ph-compare-row figcaption { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 13px; color: var(--text-muted); }
.ph-arrow i { width: 26px; height: 26px; color: var(--accent-dark); }

.ph-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ph-card { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); background: var(--card); box-shadow: var(--shadow); transition: transform .25s, box-shadow .25s; }
.ph-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.ph-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; cursor: zoom-in; display: block; }
.ph-badge { position: absolute; top: 10px; left: 10px; z-index: 2; font-family: var(--font-head); font-weight: 800; font-size: 11px; letter-spacing: .5px; color: #fff; padding: 5px 11px; border-radius: 999px; box-shadow: var(--shadow); }
.ph-badge.before { background: var(--primary); }
.ph-badge.after { background: var(--accent); color: #06402B; }
.ph-del { position: absolute; top: 8px; right: 8px; z-index: 2; width: 36px; height: 36px; border: none; border-radius: 50%; background: rgba(255,255,255,0.92); color: var(--danger); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .2s; }
.ph-del:hover { background: var(--danger); color: #fff; }
.ph-del i { width: 17px; height: 17px; }
.ph-date { padding: 9px 12px; font-size: 13px; color: var(--text-muted); border-top: 1px solid var(--border); }

/* Лайтбокс */
.ph-lightbox { position: fixed; inset: 0; z-index: 1200; background: rgba(0,0,0,0.85); display: flex; align-items: center; justify-content: center; padding: 24px; }
.ph-lightbox img { max-width: 95vw; max-height: 90vh; border-radius: var(--radius); box-shadow: var(--shadow-xl); }
.ph-lightbox-close { position: absolute; top: 18px; right: 18px; width: 48px; height: 48px; border: none; border-radius: 50%; background: rgba(255,255,255,0.15); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s; }
.ph-lightbox-close:hover { background: rgba(255,255,255,0.3); }
.ph-lightbox-close i { width: 26px; height: 26px; }

/* ── Медкарта: вкладка «Осмотр» ── */
/* Баннер аллергии — критично, виден на всех вкладках карточки */
.allergy-banner { display: flex; align-items: center; gap: 10px; background: #FDECEA; border: 1px solid var(--danger); border-left: 4px solid var(--danger); color: #922b21; border-radius: var(--radius-sm); padding: 12px 16px; margin: 14px 0 4px; font-size: 14px; }
.allergy-banner i { width: 22px; height: 22px; color: var(--danger); flex-shrink: 0; }
.allergy-banner b { font-family: var(--font-head); }

.med-quicklinks { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 6px; }
.med-quicklinks .btn { min-height: 46px; }
.med-block { margin-top: 22px; }
.med-form { display: flex; flex-direction: column; gap: 14px; }
.med-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-muted); }
.med-field > span { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.med-field textarea { resize: vertical; min-height: 56px; }
.med-field input, .med-field textarea, .med-field select { width: 100%; }
.med-form-row { display: flex; gap: 14px; flex-wrap: wrap; }
.med-form-row .med-field { flex: 1; min-width: 160px; }
.med-allergy > span { color: var(--danger); }
.med-allergy > span i { width: 15px; height: 15px; color: var(--danger); }
.med-allergy input { border-color: var(--danger); }
.med-doctor { padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); font-weight: 600; color: var(--text); }
.med-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.med-msg { font-weight: 600; font-size: 14px; }
.med-msg.ok { color: var(--success); } .med-msg.err { color: var(--danger); }
.med-msg.busy { color: var(--primary); }

.med-doc-upload { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 16px; display: flex; flex-direction: column; gap: 12px; }
.med-doc-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.med-doc-actions .btn { min-height: 46px; }
.med-doclist { display: flex; flex-direction: column; gap: 10px; }
.doc-row { display: flex; align-items: center; gap: 14px; border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; }
.doc-ic { width: 42px; height: 42px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.doc-ic.is-pdf { background: rgba(231,76,60,0.12); color: var(--danger); }
.doc-ic.is-img { background: var(--card-tint); color: var(--primary); }
.doc-ic i { width: 20px; height: 20px; }
.doc-main { flex: 1; min-width: 0; }
.doc-main b { font-family: var(--font-head); font-size: 14px; word-break: break-word; }
.doc-sub { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--text-muted); margin-top: 3px; }
.doc-type { font-family: var(--font-head); font-weight: 700; color: var(--primary); }
.doc-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.doc-open { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--primary); text-decoration: none; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 12px; min-height: 40px; transition: all .15s; }
.doc-open:hover { border-color: var(--primary); background: var(--card-tint); }
.doc-open i { width: 15px; height: 15px; }
.doc-del { border: 1px solid var(--border); background: #fff; border-radius: var(--radius-sm); width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-muted); transition: all .15s; flex-shrink: 0; }
.doc-del:hover { border-color: var(--danger); color: var(--danger); }
.doc-del i { width: 16px; height: 16px; }

/* ── Планы лечения ── */
.btn-mini { padding: 7px 11px; font-size: 13px; min-height: 38px; }
.plan-new { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.plan-new input { flex: 1; min-width: 220px; }
.plan-new .btn { min-height: 48px; white-space: nowrap; }
.plan-msg { font-weight: 600; font-size: 14px; margin-bottom: 12px; }
.plan-msg.ok { color: var(--success); } .plan-msg.err { color: var(--danger); }

#plansList { display: flex; flex-direction: column; gap: 18px; }
.plan-card { border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; }
.plan-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.plan-title-wrap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.plan-title { font-family: var(--font-head); font-size: 17px; }
.plan-title-input { font-size: 15px; min-width: 200px; }
.plan-rename { border: none; background: transparent; cursor: pointer; color: var(--text-muted); padding: 4px; display: inline-flex; }
.plan-rename:hover { color: var(--primary); }
.plan-rename i { width: 15px; height: 15px; }
.plan-head-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.plan-date { font-size: 12px; }
.plan-status { font-size: 13px; padding: 7px 10px; min-height: 38px; font-weight: 600; border-radius: var(--radius-sm); }
.plan-status.pstat-active { color: var(--primary); border-color: var(--primary); }
.plan-status.pstat-completed { color: var(--success); border-color: var(--success); }
.plan-status.pstat-cancelled { color: var(--text-muted); }
.plan-del { border: 1px solid var(--border); background: #fff; border-radius: var(--radius-sm); width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-muted); transition: all .15s; }
.plan-del:hover { border-color: var(--danger); color: var(--danger); }
.plan-del i { width: 16px; height: 16px; }

/* Итоги плана */
.plan-totals { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 10px; }
.pt-stat { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; text-align: center; }
.pt-stat span { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
.pt-stat b { font-family: var(--font-head); font-size: 16px; }
.pt-done b { color: var(--primary); }
.pt-paid b { color: var(--success); }
.pt-rem b { color: var(--warning); }
.plan-progress { height: 8px; background: var(--bg); border-radius: 999px; overflow: hidden; margin-bottom: 16px; border: 1px solid var(--border); }
.plan-progress-bar { height: 100%; background: var(--success); transition: width .3s; }

/* Этапы плана */
.plan-items { display: flex; flex-direction: column; gap: 8px; }
.plan-noitems { padding: 8px 0; }
.plan-item { display: flex; align-items: center; gap: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; }
.pi-order { display: flex; flex-direction: column; gap: 2px; }
.pi-order button { border: 1px solid var(--border); background: #fff; border-radius: 6px; width: 26px; height: 20px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-muted); }
.pi-order button:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.pi-order button:disabled { opacity: .35; cursor: default; }
.pi-order i { width: 13px; height: 13px; }
.pi-main { flex: 1; min-width: 0; }
.pi-main b { font-family: var(--font-head); font-size: 14px; }
.pi-sub { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.pi-tooth { background: var(--bg); border: 1px solid var(--border); padding: 1px 8px; border-radius: 6px; }
.pi-price { font-family: var(--font-head); font-weight: 600; color: var(--text); }
.pi-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.pi-status { font-size: 13px; padding: 6px 8px; min-height: 38px; border-radius: var(--radius-sm); font-weight: 600; }
.pi-status.istat-done { color: var(--primary); }
.pi-status.istat-paid { color: var(--success); }
.pi-edit, .pi-del { border: 1px solid var(--border); background: #fff; border-radius: var(--radius-sm); width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-muted); transition: all .15s; }
.pi-edit:hover { border-color: var(--primary); color: var(--primary); }
.pi-del:hover { border-color: var(--danger); color: var(--danger); }
.pi-edit i, .pi-del i { width: 15px; height: 15px; }

.plan-additem { margin-top: 14px; }
.plan-additem-form { margin-top: 10px; }
.pi-form { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; }
.pi-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-muted); margin-bottom: 10px; }
.pi-form-row { display: flex; gap: 10px; flex-wrap: wrap; }
.pi-form-row .pi-field { flex: 1; min-width: 110px; }
.pi-form-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ── Разбивка оплаты приёма (работа врача / расходники) ── */
.appt-split-btn { border: 1px solid var(--border); background: #fff; border-radius: var(--radius-sm); width: 38px; min-height: 38px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-muted); transition: all .15s; }
.appt-split-btn:hover { border-color: var(--primary); color: var(--primary); }
.appt-split-btn i { width: 16px; height: 16px; }

.split-modal { z-index: 1300; }
.split-modal-card { width: 92vw; max-width: 560px; max-height: 90vh; padding: 28px 30px; overflow-y: auto; }
.sp-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.sp-icon { width: 48px; height: 48px; border-radius: 50%; background: var(--card-tint); color: var(--primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sp-icon i { width: 24px; height: 24px; }
.sp-head h3 { font-size: 19px; }
.sp-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 6px; }
.sp-summary-3 { grid-template-columns: 1fr 1fr 1fr; }
.sp-stat { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
.sp-stat span { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 5px; }
.sp-stat b { font-family: var(--font-head); font-size: 18px; }
.sp-mat { border-left: 3px solid var(--warning); }
.sp-mat b { color: var(--warning); }
.sp-lab { border-left: 3px solid #8e44ad; }
.sp-lab b { color: #8e44ad; }
.sp-work { border-left: 3px solid var(--success); }
.sp-work b { color: var(--success); }
.sp-caption { font-size: 12px; margin: 8px 0 18px; }
.sp-section { margin-bottom: 20px; }
.sp-section h4 { font-size: 14px; font-family: var(--font-head); display: flex; align-items: center; gap: 7px; margin-bottom: 10px; }
.sp-section h4 i { width: 16px; height: 16px; color: var(--primary); }
.sp-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.sp-item { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; font-size: 14px; }
.sp-item-name { font-weight: 600; }
.sp-item-q { color: var(--text-muted); font-size: 13px; }
.sp-item-sum { margin-left: auto; font-family: var(--font-head); font-weight: 700; }
.sp-del { border: 1px solid var(--border); background: #fff; border-radius: 50%; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-muted); flex-shrink: 0; transition: all .15s; }
.sp-del:hover { border-color: var(--danger); color: var(--danger); }
.sp-del i { width: 14px; height: 14px; }
.sp-add { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.sp-add select { flex: 1; min-width: 180px; }
.sp-add input { width: 110px; }
.sp-add .btn { min-height: 46px; white-space: nowrap; }
.sp-msg { margin-top: 10px; font-weight: 600; font-size: 14px; }
.sp-msg.ok { color: var(--success); } .sp-msg.err { color: var(--danger); }
.sp-manual { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.sp-manual input { flex: 1; min-width: 160px; }
.sp-manual .btn { min-height: 46px; }
.sp-hint { font-size: 12px; margin-top: 8px; }

/* ── Адаптив ── */
@media (max-width: 640px) {
  /* Вкладки (Расписание/Записать/Пациенты): на узком экране ряд вылезал за ширину
     и тянул страницу вбок. Растягиваем на всю ширину; если не помещаются — скролл
     внутри самого ряда, а не у всей страницы. */
  .tabs { display: flex; width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: 1 0 auto; justify-content: center; white-space: nowrap; padding: 9px 12px; }
  .ph-gallery { grid-template-columns: 1fr; }
  .tp-stages { grid-template-columns: 1fr; }
  .ph-compare-row { grid-template-columns: 1fr; }
  .ph-arrow { justify-self: center; transform: rotate(90deg); }
  .ph-actions .btn { flex: 1; }
  .appt-card { grid-template-columns: 70px 1fr; gap: 12px; }
  .appt-right { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; }
  .appt-actions { flex-wrap: wrap; width: 100%; }
  .act { min-height: 44px; flex: 1; justify-content: center; }
  .dash-user b, .dash-user span { display: none; }
  .patient-body { padding: 22px; }
  .visit-row { flex-wrap: wrap; }
  .modal-overlay { padding: 0; }
  .modal-full { width: 100vw; height: 100vh; max-width: none; border-radius: 0; }
  .pt-tabs { width: 100%; overflow-x: auto; flex-wrap: nowrap; }
  .pt-tab { white-space: nowrap; }
  .tooth-modal-card { width: 100vw; height: 100vh; max-width: none; max-height: none; border-radius: 0; padding: 22px; }
  .odonto-modeswitch { width: 100%; }
  .oms { flex: 1; justify-content: center; }
  .tp-row { flex-wrap: wrap; }
  .tp-row-actions { width: 100%; justify-content: space-between; }
  .tp-status { flex: 1; }
  .med-quicklinks .btn { flex: 1; justify-content: center; }
  .med-doc-actions { flex-direction: column; align-items: stretch; }
  .med-doc-actions .btn { width: 100%; justify-content: center; }
  .doc-row { flex-wrap: wrap; }
  .doc-actions { width: 100%; justify-content: space-between; }
  .doc-open { flex: 1; justify-content: center; }
  .plan-totals { grid-template-columns: repeat(2, 1fr); }
  .plan-new .btn { flex: 1; justify-content: center; }
  .plan-item { flex-wrap: wrap; }
  .pi-order { flex-direction: row; }
  .pi-actions { width: 100%; justify-content: space-between; }
  .pi-status { flex: 1; }
  .sp-summary { grid-template-columns: 1fr; }
  .sp-add select, .sp-add input, .sp-add .btn { width: 100%; flex: none; }
  .sp-manual input, .sp-manual .btn { width: 100%; flex: none; }
}