/* ============================================================
   سامانه پرونده الکترونیک بیماران — استایل پایه
   طراحی مینیمال پزشکی: سفید، کم‌خستگی برای چشم، قابل شخصی‌سازی
   رنگ اصلی از تنظیمات برنامه می‌آید: --primary و --accent
   ============================================================ */

@font-face {
    font-family: 'Vazirmatn';
    src: url('../fonts/Vazirmatn-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Vazirmatn';
    src: url('../fonts/Vazirmatn-Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: 'Vazirmatn';
    src: url('../fonts/Vazirmatn-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

:root {
    --primary: #0e7490;
    --accent: #0f766e;
    --bg: #f7fafc;
    --surface: #ffffff;
    --ink: #1e293b;
    --muted: #64748b;
    --line: #e2e8f0;
    --danger: #b91c1c;
    --success-bg: #ecfdf5;
    --success-ink: #047857;
    --error-bg: #fef2f2;
    --radius: 12px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* قانونِ سراسری/قطعی برای یک باگِ بسیار تکراری در این پروژه: وقتی یک کلاس مستقیم display:flex/grid
   ست می‌کند، همان specificity با [hidden] (پیشِ‌فرضِ مرورگر display:none) برابر است و چون در cascade
   بعد از آن می‌آید می‌بَرد — یعنی element.hidden=true در جاوااسکریپت هیچ اثرِ بصری‌ای نمی‌گذارد.
   این باگ حداقل ۸ بار جداگانه در این پروژه پیدا شده (هربار با پَچ‌کردنِ یک‌به‌یکِ کلاس)؛ به‌جای ادامه‌ی
   همین روش، اینجا یک‌بار برای همیشه با !important قطعی می‌شود تا هیچ کلاسِ آینده‌ای هم این مشکل را نسازد. */
[hidden] { display: none !important; }

body {
    font-family: var(--font-family, 'Vazirmatn', Tahoma, sans-serif);
    background: var(--bg);
    color: var(--ink);
    font-size: calc(15px * var(--font-scale, 1));
    line-height: var(--lh, 1.9);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.container { width: 100%; max-width: var(--content-width, 1100px); margin: 0 auto; padding: 0 16px; }
.main { flex: 1; padding-top: 24px; padding-bottom: 48px; }
.inline { display: inline; }

/* ---------- لینک‌های منو (استفاده در منوی همبرگری دکتر) ---------- */
.nav-link {
    color: var(--muted); text-decoration: none; padding: 6px 12px;
    border-radius: 8px; font-size: 14px; transition: 0.15s;
    background: none; border: none; cursor: pointer; font-family: inherit;
}
.nav-link:hover { color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, white); }

.footer { border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; padding: 14px 0; text-align: center; background: var(--surface); }

/* ---------- کارت و فرم ---------- */
.card {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); padding: calc(24px * var(--density, 1)); margin-bottom: 20px;
}
.card-title { font-size: 16px; font-weight: 700; margin-bottom: 16px; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.card-title::before { content: ''; display: inline-block; width: 4px; height: 18px; border-radius: 4px; background: var(--primary); }

.grid { display: grid; gap: 14px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 720px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

.field label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.input, select.input, textarea.input {
    width: 100%; padding: 9px 12px; border: 1px solid var(--line);
    border-radius: 10px; font-family: inherit; font-size: 14px;
    background: var(--surface); color: var(--ink); transition: border 0.15s;
}
.input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent); }
textarea.input { resize: vertical; min-height: 70px; }

.checks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 16px; }
@media (max-width: 720px) { .checks { grid-template-columns: 1fr; } }
.check { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.check input { accent-color: var(--primary); width: 16px; height: 16px; }

/* ---------- دکمه ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 9px 20px; border-radius: 10px; border: 1px solid transparent;
    font-family: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
    text-decoration: none; transition: 0.15s; background: var(--surface); color: var(--ink);
}
/* مهم: صفت hidden باید واقعاً پنهان کند (وگرنه display:inline-flex رویش سوار می‌شد) */
.btn[hidden] { display: none; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { filter: brightness(1.1); }
.btn-outline { border-color: var(--line); color: var(--ink); }
.btn-outline:hover { border-color: var(--primary); color: var(--primary); }
.btn-danger { background: none; border: none; color: var(--danger); cursor: pointer; font-family: inherit; font-size: 13px; }
.btn-sm { padding: 5px 12px; font-size: 13px; }
.btn-lg { padding: 14px 34px; font-size: 16px; border-radius: 14px; }
.btn-block { width: 100%; }

/* ---------- پیام‌ها ---------- */
.alert { padding: 12px 16px; border-radius: 10px; margin-bottom: 16px; font-size: 14px; }
.alert-success { background: var(--success-bg); color: var(--success-ink); border: 1px solid #a7f3d0; }
.alert-error { background: var(--error-bg); color: var(--danger); border: 1px solid #fecaca; }
.alert ul { list-style: none; }

/* ---------- صفحه اول ---------- */
.hero { text-align: center; padding: 48px 0 24px; }
.hero h1 { font-size: 26px; color: var(--primary); margin-bottom: 8px; }
.hero p { color: var(--muted); }
.entry-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 320px)); gap: 20px; justify-content: center; margin-top: 32px; }
@media (max-width: 640px) { .entry-cards { grid-template-columns: 1fr; } }
.entry-card {
    background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
    padding: 30px 24px; text-align: center; text-decoration: none; color: var(--ink);
    transition: 0.2s;
}
.entry-card:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06); }
.entry-card .icon { font-size: 40px; margin-bottom: 12px; }
.entry-card h2 { font-size: 18px; margin-bottom: 6px; }
.entry-card p { font-size: 13px; color: var(--muted); }

/* ---------- داشبورد ---------- */
.action-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 340px)); gap: 20px; justify-content: center; margin: 24px 0; }
@media (max-width: 640px) { .action-cards { grid-template-columns: 1fr; } }
.stats { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 22px; text-align: center; }
.stat b { display: block; font-size: 20px; color: var(--primary); }
.stat span { font-size: 12px; color: var(--muted); }

/* ---------- جدول ---------- */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { background: color-mix(in srgb, var(--primary) 6%, white); color: var(--muted); font-weight: 500; font-size: 13px; }
.table th, .table td { border: 1px solid var(--line); padding: 8px 10px; text-align: right; vertical-align: top; }
.table tr:hover td { background: #fafcfe; }

/* ---------- چارت دندان ---------- */
.chart-wrap { overflow-x: auto; padding: 4px 0; min-width: 0; }
.chart-label { text-align: center; font-size: 13px; color: var(--muted); margin: 10px 0 6px; }
/* توی تبِ دندانِ جست‌وجوی پیشرفته، این لیبل با برچسبِ دکمه‌های شیری/دائمیِ بالای چارت تکراری است — پنهان شود */
#searchToothTab .chart-label { display: none; }
.chart-row { display: flex; justify-content: center; gap: 4px; direction: ltr; margin-bottom: 4px; min-width: max-content; }
.chart-divider { width: 2px; background: #94a3b8; margin: 0 8px; border-radius: 2px; }
.tooth {
    width: 38px; height: 38px; border: 1.5px solid var(--line); border-radius: 9px;
    background: var(--surface); font-family: inherit; font-size: 14px; font-weight: 500;
    color: var(--ink); cursor: pointer; transition: 0.12s;
    display: inline-flex; align-items: center; justify-content: center;
}
.tooth:hover { border-color: var(--primary); color: var(--primary); }
.tooth.selected { background: var(--primary); border-color: var(--primary); color: #fff; }
.tooth.deciduous { border-radius: 50%; width: 34px; height: 34px; font-size: 13px; }

/* ---------- تگ‌های درمانی ---------- */
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-pill {
    padding: 5px 14px; border-radius: 999px; border: 1.5px solid var(--line);
    background: var(--surface); font-family: inherit; font-size: 13px; font-weight: 500;
    cursor: pointer; transition: 0.12s; color: var(--ink);
}
.tag-pill:hover { border-color: var(--accent); color: var(--accent); }
.tag-pill.selected { background: var(--accent); border-color: var(--accent); color: #fff; }
.tag-chip {
    display: inline-block; padding: 1px 10px; border-radius: 999px; font-size: 12px;
    background: color-mix(in srgb, var(--accent) 12%, white); color: var(--accent); font-weight: 600;
}

/* ---------- پیوست‌ها ---------- */
.attach-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px;
    border: 1px solid var(--line); border-radius: 8px; font-size: 12px;
    color: var(--ink); text-decoration: none; margin: 2px; background: #fbfdff;
}
.attach-chip:hover { border-color: var(--primary); }
.attach-chip .muted { color: var(--muted); }
.attach-chip.hidden-file { opacity: 0.5; border-style: dashed; }

.file-rows { margin-top: 8px; display: grid; gap: 6px; }
.file-row { display: grid; grid-template-columns: 1fr 130px 1fr; gap: 8px; align-items: center; font-size: 13px; }
@media (max-width: 640px) { .file-row { grid-template-columns: 1fr; } }
.file-row .fname { color: var(--muted); direction: ltr; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- گالری بیمار ---------- */
.gallery-group { margin-bottom: 24px; }
.gallery-date { font-size: 14px; font-weight: 700; color: var(--primary); margin-bottom: 10px; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.gallery-item { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--surface); }
.gallery-item img { width: 100%; height: 120px; object-fit: cover; display: block; cursor: zoom-in; }
.gallery-item .cap { font-size: 12px; color: var(--muted); padding: 4px 8px; }
.gallery-item audio, .gallery-item video { width: 100%; }

/* لایت‌باکس بزرگ‌نمایی */
.lightbox {
    position: fixed; inset: 0; background: rgba(15, 23, 42, 0.92); z-index: 100;
    display: none; align-items: center; justify-content: center; padding: 24px; cursor: zoom-out;
}
.lightbox.open { display: flex; }
.lightbox img { max-width: 95vw; max-height: 90vh; border-radius: 8px; }
.lightbox .lb-cap { position: absolute; bottom: 18px; right: 0; left: 0; text-align: center; color: #e2e8f0; font-size: 14px; }

/* ---------- متفرقه ---------- */
.muted { color: var(--muted); }
.small { font-size: 12px; }
.mb-0 { margin-bottom: 0; }
.mt-16 { margin-top: 16px; }
.text-center { text-align: center; }
.money-pos { color: var(--success-ink); }
.money-neg { color: var(--danger); font-weight: 700; }
.badge-hidden { background: #fef3c7; color: #92400e; border-radius: 6px; font-size: 11px; padding: 1px 8px; }

.auth-box { max-width: 420px; margin: 40px auto; }
.otp-debug { background: #fffbeb; border: 1px dashed #f59e0b; color: #92400e; border-radius: 10px; padding: 10px 14px; text-align: center; font-size: 14px; margin-bottom: 14px; }

.pagination { display: flex; gap: 6px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
.pagination a, .pagination span { padding: 5px 12px; border: 1px solid var(--line); border-radius: 8px; text-decoration: none; color: var(--ink); font-size: 13px; }
.pagination .active span { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ---------- کارت رکورد درمان (طبق طرح کارفرما) ---------- */
.record-card { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 14px; background: #fdfefe; }
.record-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.record-num {
    width: 28px; height: 28px; border-radius: 50%; background: var(--primary); color: #fff;
    display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex-shrink: 0;
}
.record-menu { margin-right: auto; position: relative; }
.record-menu summary { cursor: pointer; color: var(--primary); font-size: 13px; list-style: none; }
.record-menu-body {
    position: absolute; left: 0; top: 24px; z-index: 20; background: var(--surface);
    border: 1px solid var(--line); border-radius: 12px; padding: 14px; min-width: 220px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
}
.record-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 640px) { .record-photos { grid-template-columns: 1fr; } }
.record-photo { border: 1px dashed var(--line); border-radius: 10px; padding: 8px; text-align: center; }
.slot-head { font-size: 12px; color: var(--muted); margin-bottom: 6px; font-weight: 700; }
.record-thumb { max-width: 100%; max-height: 160px; border-radius: 8px; cursor: zoom-in; }
.record-thumb.thumb-hidden { opacity: 0.45; filter: grayscale(0.6); }
.record-thumb-empty { color: var(--line); font-size: 22px; padding: 20px 0; }
.thumb-actions { display: flex; gap: 10px; justify-content: center; align-items: center; margin-top: 4px; font-size: 12px; flex-wrap: wrap; }
.record-notes { margin-top: 10px; font-size: 14px; }
.record-finance { margin-top: 8px; border-top: 1px dashed var(--line); padding-top: 8px; }
.record-finance-total { background: color-mix(in srgb, var(--primary) 7%, white); border: 1px solid var(--line); border-radius: 10px; padding: 10px 16px; margin-top: 6px; font-size: 14px; }

/* ---------- اسلات‌های عکس فرم ثبت + ادیتور ---------- */
.photo-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 860px) { .photo-slots { grid-template-columns: 1fr; } }
.photo-slot { border: 1px solid var(--line); border-radius: 12px; padding: 10px; display: grid; gap: 8px; align-content: start; }
.canvas-wrap { position: relative; overflow: hidden; border-radius: 8px; background: #0f172a08; }
.editor-canvas { max-width: 100%; display: block; margin: 0 auto; touch-action: none; }

/* کادرِ کراپِ قابل‌تغییرِ اندازه — بیرونِ کادر تیره می‌شود، گوشه‌ها با انگشت کشیده می‌شوند */
.crop-frame:not([hidden]) {
    position: absolute; box-sizing: border-box; z-index: 3;
    border: 2px solid #fff; box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.5);
    cursor: move; touch-action: none;
}
.crop-h { position: absolute; width: 28px; height: 28px; touch-action: none; z-index: 4; }
.crop-h::after {
    content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 15px; height: 15px; background: #fff; border: 2px solid var(--primary); border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.crop-h[data-h="nw"] { top: -14px; left: -14px; cursor: nwse-resize; }
.crop-h[data-h="ne"] { top: -14px; right: -14px; cursor: nesw-resize; }
.crop-h[data-h="sw"] { bottom: -14px; left: -14px; cursor: nesw-resize; }
.crop-h[data-h="se"] { bottom: -14px; right: -14px; cursor: nwse-resize; }
.editor-sliders { display: grid; gap: 4px; font-size: 12px; color: var(--muted); }
.editor-sliders label { display: grid; grid-template-columns: 56px 1fr; align-items: center; gap: 6px; }
.editor-sliders input[type="range"] { width: 100%; accent-color: var(--primary); }
.editor-btns { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.editor-btns .btn { padding: 3px 8px; font-size: 12px; }
.editor-sliders .ed-ico { width: 20px; height: 20px; color: var(--primary); justify-self: center; }

/* دکمه‌های رنگ/قطرِ نقاشی — در نوارِ پایینِ ویوئرِ تمام‌صفحه‌ی گالری استفاده می‌شوند
   (photo-viewer-bar-draw در show.blade.php) */
.draw-sep { width: 1px; height: 24px; background: var(--line); margin: 0 2px; }
.draw-color-btn {
    width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--line); cursor: pointer;
    padding: 0; flex-shrink: 0;
}
.draw-color-btn.active { border-color: var(--ink); box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink); }
.draw-width-btn {
    width: 30px; height: 30px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface);
    display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; flex-shrink: 0;
}
.draw-width-btn.active { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, var(--surface)); }
.draw-width-dot { display: block; border-radius: 50%; background: var(--ink); }
.photo-viewer-bar-draw .pvd-tool.active,
.photo-viewer-bar-draw .pvd-visibility.active { border-color: var(--primary); color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, var(--surface)); }
.photo-viewer-bar-draw .pvd-done { background: var(--primary); border-color: var(--primary); color: #fff; }
.photo-viewer-bar-draw .pvd-done:hover { filter: brightness(1.1); }

/* دکمه‌های ضخامت/رنگ در نوارِ نقاشی خودشان یک پاپ‌آپِ کوچک بالای خودشان باز می‌کنند (نه ردیفِ همیشه‌
   نمایانِ گزینه‌ها) — دقیقاً بالای همون دکمه، با انتخابِ یک گزینه خودکار بسته می‌شود */
/* پاپ‌آپ نسبت به کلِ نوار (نه فقط دکمه‌ی کوچکش) وسط‌چین می‌شود — وگرنه اگر نسبت به دکمه‌ی خودش
   (که ممکن است نزدیکِ لبه‌ی نوار باشد) راست‌چین می‌شد، عرضِ زیادِ پاپ‌آپِ رنگ (۸ دایره) از صفحه
   می‌زد بیرون */
.photo-viewer-bar-draw { position: relative; }
.pvd-popup:not([hidden]) {
    position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%);
    display: flex; flex-wrap: nowrap; gap: 6px; align-items: center; background: var(--surface);
    border: 1px solid var(--line); border-radius: 14px; padding: 8px 10px;
    box-shadow: 0 10px 28px rgba(15,23,42,0.2); z-index: 20;
    max-width: calc(100vw - 24px); overflow-x: auto;
}
/* پاپ‌آپِ رنگ ۸ گزینه دارد — کمی جمع‌وجورتر تا حتی روی گوشیِ کم‌عرض هم راحت جا شود */
.pvd-color-popup .draw-color-btn { width: 26px; height: 26px; }
.pvd-color-popup { gap: 5px; }

/* دکمه‌های آیکونی ادیتور — همه SVG مینیمال، هماهنگ با بقیه سایت */
.icon-btn {
    border: 1px solid var(--line); background: var(--surface); color: var(--ink);
    border-radius: 10px; padding: 8px; line-height: 0; cursor: pointer;
    min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
    transition: border-color .15s, background .15s;
}
.icon-btn svg { width: 21px; height: 21px; display: block; }
.icon-btn:hover { border-color: var(--primary); color: var(--primary); }
.slot-pick .ic { width: 18px; height: 18px; vertical-align: -4px; margin-inline-end: 6px; }
/* کادر انتخاب عکس با آدمِ مینیمال + نشان + (مثل ماکاپ) */
.slot-pick-person {
    position: relative; width: 100%; aspect-ratio: 1 / 1; border: 1.5px solid var(--line);
    border-radius: 16px; background: color-mix(in srgb, var(--primary) 6%, white);
    display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
    color: var(--primary); transition: border-color .15s;
}
.slot-pick-person:active { border-color: var(--primary); }
/* مهم: صفت hidden باید واقعاً پنهان کند (display:flex وگرنه رویش سوار می‌شد — دقیقاً باگ استپ تایمر) */
.slot-pick-person[hidden] { display: none; }
.slot-person { width: 56%; height: 56%; color: color-mix(in srgb, var(--primary) 65%, var(--muted)); }
/* آیکونِ پیش‌فرض بر اساس جنسیت: پیش‌فرض آقا؛ با کلاس is-female → خانم */
.slot-pick-person .slot-female { display: none; }
.slot-pick-person.is-female .slot-male { display: none; }
.slot-pick-person.is-female .slot-female { display: block; }
.slot-plus {
    position: absolute; inset-inline-end: 7px; bottom: 7px;
    width: 28px; height: 28px; border-radius: 50%; background: var(--primary); color: #fff;
    display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,0.22);
}
.slot-plus svg { width: 16px; height: 16px; }
/* در فرم ثبت سریع، برچسبِ بالای کادر عکس لازم نیست (مثل ماکاپ) */
.doc-quick-photo .slot-head { display: none; }
/* بندانگشتیِ ثبت‌شده در فرم ثبت سریع دقیقاً هم‌اندازه‌ی همان کادر خالیِ انتخاب عکس بماند (جای جدید نگیرد) */
.doc-quick-photo .committed { width: 100%; }
.doc-quick-photo .committed-thumb { width: 100%; }
.doc-quick-photo .committed-thumb img {
    width: 100%; aspect-ratio: 1 / 1; max-height: none; object-fit: cover; border-radius: 16px;
    border: 1.5px solid var(--line);
}
.icon-btn-ok { background: var(--primary); color: #fff; border-color: var(--primary); font-size: 13px; font-weight: 700; padding: 6px 12px; }
.icon-btn-danger { color: #b91c1c; border-color: #fecaca; font-size: 13px; }
.icon-btn-danger:hover { border-color: #b91c1c; }

/* حالت ثبت‌شده عکس — جمع‌وجور */
/* حالت ثبت‌شده فقط وقتی hidden ندارد دیده شود (وگرنه display:grid روی hidden سوار می‌شد) */
.committed:not([hidden]) { display: grid; gap: 8px; justify-items: center; }
.committed-thumb img { max-width: 100%; max-height: 180px; border-radius: 10px; border: 1px solid var(--line); }
.photo-slot-avatar .committed-thumb img { width: 120px; height: 120px; object-fit: cover; border-radius: 50%; }
.committed-btns { display: flex; gap: 8px; justify-content: center; }
.committed-btns .icon-btn { font-size: 19px; padding: 8px 13px; line-height: 1; }
.record-add-photo { text-align: center; }
.record-add-photo .photo-slot { border: 1px dashed var(--line); }
.record-add-photo .slot-submit { margin-top: 6px; }

/* ویوئرِ تمام‌صفحه‌ی عکسِ گالریِ صفحه‌ی درمان: زدنِ عکسِ جلوییِ کاورفلو این را باز می‌کند؛ زوم با دو
   انگشت روی خودِ <img> با یک transform ساده (setupPinchZoom در app.js) — سریع/بدونِ لگ روی گوشی.
   پس‌زمینه همون رنگِ زمینه‌ی خودِ سایت (--bg، آبیِ کم‌رنگِ ملایم)، نه سفیدِ خالص؛ هدرِ معمولیِ برنامه
   (نامِ دکتر/بیمار) هم بالای آن نمایش داده می‌شود (پایین‌تر include شده) تا هیچ‌وقت پنهان نشود. */
.photo-viewer:not([hidden]) {
    display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 1100; background: var(--bg);
}
.photo-viewer > .doc-app-header { margin: 10px 14px 0; flex-shrink: 0; }
.photo-viewer-stage {
    flex: 1; min-height: 0; overflow: hidden; touch-action: none;
    display: flex; align-items: center; justify-content: center; position: relative;
}
.photo-viewer-img {
    max-width: 100%; max-height: 100%; width: auto; height: auto; touch-action: none;
    transform-origin: 0 0; user-select: none; -webkit-user-drag: none; display: block;
}
/* بومِ نقاشیِ داخلِ ویوئر: دقیقاً روی کادرِ نمایشیِ فعلیِ عکس می‌نشیند (left/top/width/height با JS
   تنظیم می‌شود، هم‌راستا با هر زوم/جابه‌جاییِ فعلی) — نه یک پاپ‌آپِ جدا، پس نه تأخیری حس می‌شود نه
   زومِ فعلی ریست می‌شود. با زوم زیاد، اندازه‌ی نمایشیِ این بوم (بزرگ‌تر از عکسِ زوم‌شده) می‌تواند تا
   زیرِ نوارِ پایین هم برسد؛ چون position:fixed است، خودش یک stacking context جدا می‌سازد و بدونِ
   z-index بالاتر روی نوارِ پایینِ معمولی (که static است) می‌نشیند و دکمه‌ها را می‌پوشاند — پس نوارِ
   پایین باید صراحتاً z-index بالاتری داشته باشد تا همیشه رویِ بومِ نقاشی بماند. */
.photo-viewer-draw-canvas { position: fixed; touch-action: none; z-index: 5; }
.photo-viewer-bottom {
    flex-shrink: 0; display: flex; flex-wrap: wrap; gap: 14px; justify-content: center;
    background: var(--surface); border-top: 1px solid var(--line);
    padding: 10px 14px max(10px, env(safe-area-inset-bottom, 0px));
    position: relative; z-index: 10;
}
/* نوارِ نقاشی ۷ دکمه دارد — باید همیشه یک‌خط بماند، حتی روی گوشیِ صفحه‌کوچیک، نه این‌که دوخط بشود
   (دوخط‌شدن باعثِ تغییرِ ارتفاعِ نوار و درنتیجه «دوتا دیده‌شدنِ عکس» هنگامِ ورود به نقاشی می‌شد) —
   پس هم flex-wrap را صراحتاً nowrap می‌کنیم و هم فاصله/پدینگِ نوار را جمع‌وجور نگه می‌داریم تا با
   دکمه‌های بزرگ‌تر هم در عرضِ گوشی‌های معمولی (۳۶۰px به بالا) جا شود. عمداً overflow-x تنظیم نمی‌شود —
   چون طبقِ مشخصاتِ CSS، ست‌کردنِ overflow-x (حتی به auto) باعث می‌شود overflow-y هم خودکار auto شود،
   و همین باعث می‌شد پاپ‌آپ‌های ضخامت/رنگ (که بالای همین نوار، بیرون از جعبه‌ی آن، position:absolute
   می‌شوند) کلیپ/پنهان شوند */
.photo-viewer-bar-draw {
    flex-wrap: nowrap; gap: 6px; padding-left: 4px; padding-right: 4px;
}
.photo-viewer-bar-draw .doc-app-icon-btn { width: 44px; height: 44px; border-radius: 12px; }
.photo-viewer-bar-draw .doc-app-icon-btn svg { width: 21px; height: 21px; }

body.modal-open { overflow: hidden; }
.editor-modal:not([hidden]) {
    display: flex; position: fixed; inset: 0; z-index: 1000;
    background: rgba(15, 23, 42, 0.55); align-items: center; justify-content: center; padding: 14px;
}
.editor-modal-card {
    background: var(--surface); border-radius: 18px; width: 100%; max-width: 460px;
    max-height: 92vh; overflow-y: auto; padding: 16px; box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    display: grid; gap: 12px;
}
.editor-modal-head { display: flex; justify-content: space-between; align-items: center; font-weight: 800; font-size: 15px; }
.editor-x { border: none; background: transparent; font-size: 20px; cursor: pointer; color: var(--muted); line-height: 1; padding: 4px; }
.editor-modal .canvas-wrap { background: #0f172a10; }
.editor-modal .editor-canvas { max-height: 46vh; width: auto; max-width: 100%; }
.editor-modal-actions { display: flex; gap: 14px; justify-content: center; }
.editor-modal-actions .btn { flex: none; width: 56px; height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.editor-modal-actions .btn svg { width: 22px; height: 22px; display: block; }
.editor-modal .editor-btns { justify-content: center; }

/* نسخه‌ی تمام‌صفحه‌ی ادیتور — فقط اسلاتِ گالریِ صفحه‌ی درمان (photo-editor با fullscreen=true)؛
   نسخه‌ی پاپ‌آپِ کوچکِ معمولی (بالا) برای بقیه‌ی جاها دست‌نخورده می‌ماند. دقیقاً هم‌سبکِ ویوئرِ
   تمام‌صفحه‌ی نقاشی: هدرِ اپ بالا + نوارِ ابزارِ پایین با همون کلاس‌های photo-viewer-bottom/
   photo-viewer-bar-draw (پس اندازه/رنگِ دکمه‌ها، جمله‌ی «تأیید»ِ آبی و... خودکار یکی می‌شوند) */
.editor-modal.editor-fullscreen:not([hidden]) {
    display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 1100;
    background: var(--bg); align-items: stretch; justify-content: flex-start; padding: 0;
}
.editor-fullscreen > .doc-app-header { margin: 10px 14px 0; flex-shrink: 0; }
.editor-modal.editor-fullscreen .editor-fs-stage {
    flex: 1; min-height: 0; margin: 8px 14px; display: flex; align-items: center; justify-content: center;
}
.editor-modal.editor-fullscreen .editor-canvas { max-height: 100%; width: auto; max-width: 100%; }
.editor-fullscreen .editor-fs-sliders { flex-shrink: 0; padding: 6px 16px 8px; }
/* ردیفِ اسلایدرِ رنگ در نسخه‌ی تمام‌صفحه یک ستونِ سوم هم دارد: دکمه‌ی «تعادلِ خودکار» — طبقِ چیدمانِ
   RTL این ستون در انتهای grid (چپِ صفحه) می‌افتد، دقیقاً روبه‌روی آیکونِ رنگ */
.editor-fullscreen .ed-sat-row { grid-template-columns: 56px 1fr 40px; }
.editor-fullscreen .ed-magic {
    width: 34px; height: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
}
.editor-fullscreen .ed-magic svg { width: 19px; height: 19px; }
/* اسلایدرهای نور/رنگ/کنتراست در نسخه‌ی تمام‌صفحه کوتاه و هم‌اندازه‌اند (نه کشیده تا لبه‌ی صفحه) —
   چون ستونِ اسلایدر grid (1fr) است، عرضِ ثابت روی خودِ input باعث می‌شود به‌جای کشیده‌شدن، از
   لبه‌ی آیکون (راست) با همون طولِ کوتاه شروع شود؛ فضای خالیِ باقی‌مانده سمتِ چپ می‌افتد */
.editor-fullscreen .editor-fs-sliders input[type="range"] { width: 220px; }

/* آیکون SVG کارت‌ها */
.entry-card .icon-svg { color: var(--primary); margin-bottom: 12px; }
.entry-card .icon-svg svg { width: 46px; height: 46px; }

/* داشبورد: سه کارت */
.action-cards-3 { grid-template-columns: repeat(3, minmax(0, 260px)); }
@media (max-width: 860px) { .action-cards-3 { grid-template-columns: 1fr; } }

/* انتخابگر تاریخ شمسی چرخشی */
.date-picker {
    /* راست‌به‌چپ: روز (باریک) - ماه - سال (عریض برای ۴ رقم) */
    display: grid; grid-template-columns: 1fr 1.4fr 1.3fr; gap: 8px;
    border: 1px solid var(--line); border-radius: 12px; padding: 6px; background: var(--surface);
    position: relative; max-width: 340px;
}
/* مهم: صفت hidden باید تقویم را واقعاً پنهان کند (display:grid وگرنه رویش سوار می‌شد) */
.date-picker[hidden] { display: none; }
.date-picker::before {
    content: ""; position: absolute; left: 6px; right: 6px; top: 50%; height: 36px;
    transform: translateY(-50%); border-top: 1px solid var(--primary); border-bottom: 1px solid var(--primary);
    border-radius: 8px; background: color-mix(in srgb, var(--primary) 6%, transparent); pointer-events: none;
}
.dp-col {
    height: 180px; overflow-y: scroll; scroll-snap-type: y mandatory;
    -ms-overflow-style: none; scrollbar-width: none; text-align: center; position: relative;
}
.dp-col::-webkit-scrollbar { display: none; }
.dp-col-inner { padding: 72px 0; }
.dp-item {
    height: 36px; line-height: 36px; scroll-snap-align: center; font-size: 15px;
    color: var(--muted); opacity: 0.5; transition: opacity .12s, transform .12s; cursor: pointer;
    white-space: nowrap;
}
.dp-item.dp-selected { opacity: 1; color: var(--ink); font-weight: 800; transform: scale(1.06); }
.date-picker-manual { display: flex; align-items: center; gap: 8px; margin-top: 8px; max-width: 340px; }
.date-picker-manual .input { max-width: 150px; text-align: center; }

/* تقویمِ کشویی کنار فیلد (بدون پاپ‌آپ) */
.date-inline { flex: 1; min-width: 0; position: relative; }
.date-inline-btn {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
    cursor: pointer; text-align: start; color: var(--ink); font-family: inherit;
    -webkit-tap-highlight-color: transparent;
}
.date-inline-btn:focus { outline: none; }
.date-inline-btn .date-inline-label { color: var(--muted); font-size: 14px; }
.date-inline-btn svg { width: 19px; height: 19px; color: var(--primary); flex-shrink: 0; }
.date-inline-btn.open { border-color: var(--primary); }
.date-inline-picker:not([hidden]) { margin-top: 8px; width: 100%; max-width: none; }
.date-inline-picker .dp-col { height: 132px; }
.date-inline-picker .dp-col-inner { padding: 48px 0; }
/* هاله/نوار آبیِ انتخاب حذف شود؛ آیتم انتخاب‌شده خودش پررنگ است */
.date-inline-picker::before { display: none; }

/* ---------- تعداد پرونده در صفحه اول ---------- */
.home-count {
    max-width: 520px; margin: 26px auto 0; text-align: center;
    background: color-mix(in srgb, var(--primary) 6%, var(--surface));
    border: 1px solid var(--line); border-radius: 16px; padding: 18px;
}
.home-count-num { display: block; font-size: 34px; font-weight: 900; color: var(--primary); line-height: 1.2; }
.home-count-label { color: var(--muted); font-size: 14px; }

/* ---------- نظرسنجی عمومی ---------- */
.polls-wrap { max-width: 620px; margin: 30px auto 0; }
.polls-title { text-align: center; font-size: 20px; margin-bottom: 16px; }
.polls-subtitle { margin: 22px 0 10px; font-weight: 700; color: var(--muted); font-size: 14px; text-align: center; }
.poll-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 18px; margin-bottom: 14px; position: relative; }
.poll-q { font-size: 16px; font-weight: 800; margin-bottom: 14px; line-height: 1.7; }
.poll-options { display: grid; gap: 10px; }
.poll-option {
    width: 100%; text-align: right; border: 1.5px solid var(--line); background: var(--surface);
    color: var(--ink); border-radius: 12px; padding: 13px 16px; font-size: 15px; font-family: inherit;
    cursor: pointer; transition: border-color .15s, background .15s, transform .1s;
}
.poll-option:hover { border-color: var(--opt-color); background: color-mix(in srgb, var(--opt-color) 8%, var(--surface)); }
.poll-option:active { transform: scale(0.99); }
.poll-hint { text-align: center; margin-top: 10px; }
.poll-results { display: grid; gap: 12px; }
.poll-result-row.poll-mine .poll-result-head { font-weight: 800; }
.poll-result-head { display: flex; justify-content: space-between; align-items: center; font-size: 14px; margin-bottom: 5px; gap: 8px; }
.poll-check { color: var(--primary); font-size: 12px; font-weight: 700; }
.poll-pc { color: var(--muted); font-size: 13px; white-space: nowrap; }
.poll-bar { height: 12px; background: color-mix(in srgb, var(--ink) 8%, transparent); border-radius: 20px; overflow: hidden; }
.poll-bar span { display: block; height: 100%; background: var(--primary); border-radius: 20px; transition: width .5s ease; }
.poll-total { margin-top: 12px; text-align: left; }
.poll-badge { position: absolute; top: 14px; left: 14px; background: color-mix(in srgb, var(--muted) 15%, var(--surface)); color: var(--muted); font-size: 11px; padding: 3px 8px; border-radius: 8px; }

/* مدیریت نظرسنجی */
.poll-option-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 640px) { .poll-option-inputs { grid-template-columns: 1fr; } }
.poll-admin-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0; }
.poll-admin-results { border-top: 1px dashed var(--line); padding-top: 12px; display: grid; gap: 10px; }
.poll-admin-results .poll-bar span { background: var(--primary); }
input[type="color"].input { height: 42px; padding: 4px; cursor: pointer; }

/* نقشه انتخاب موقعیت */
.map-pick { width: 100%; height: 320px; border-radius: 12px; border: 1px solid var(--line); overflow: hidden; z-index: 0; }
@media (max-width: 640px) { .map-pick { height: 260px; } }
.map-pin { font-size: 26px; text-align: center; line-height: 1; filter: drop-shadow(0 2px 2px rgba(0,0,0,.4)); }

/* صفحه اول: لینک‌های زیر عنوان + لوگوی کارت + شمار بیماران فشرده */
.hero-links { margin-top: 10px; display: flex; gap: 10px; justify-content: center; align-items: center; font-size: 14px; }
.hero-links a { color: var(--primary); text-decoration: none; font-weight: 600; }
.hero-links span { color: var(--muted); }
.card-logo { width: 104px; height: 104px; object-fit: contain; }
.entry-card .icon-img { margin-bottom: 4px; display: flex; justify-content: center; }
.home-meta { text-align: center; margin-top: 22px; display: grid; gap: 10px; justify-items: center; }
.home-count-line { color: var(--muted); font-size: 15px; }
.home-count-line b { color: var(--primary); font-weight: 800; }

/* نظرهای بیماران */
.reviews-list { max-width: 640px; margin: 0 auto; display: grid; gap: 12px; }
.review-item { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.review-name { font-weight: 800; margin-bottom: 6px; }
.review-msg { line-height: 1.9; }
.review-date { margin-top: 8px; }
.review-admin-row { display: flex; justify-content: space-between; gap: 12px; border-top: 1px dashed var(--line); padding: 12px 0; flex-wrap: wrap; }
.review-admin-actions { display: flex; gap: 8px; align-items: flex-start; flex-shrink: 0; }

/* ---------- صفحات fit-page (اول/لاگین دکتر/لاگین مراجع) روی موبایل: بدون اسکرول ----------
   main و footer با هم داخل #pageFit هستند (به‌جای فرزندان مستقل body) تا
   جاوااسکریپت (setupPageFit) بتواند کل مجموعه — از جمله فوتر — را با هم
   دقیقاً هم‌اندازه صفحه کوچک کند و فوتر هرگز از دید خارج نشود.
   عمداً overflow:hidden گذاشته نشده تا اگر جاوااسکریپت به هر دلیل اجرا نشد یا
   محتوا بلندتر بود، صفحه به‌طور عادی اسکرول شود (نه قفل/بریده) و هم‌چنین ژست
   «پایین‌کشیدن برای رفرش» مرورگر مسدود نشود. */
@media (max-width: 900px) {
    /* min-height هم صریحاً به dvh ست شود، وگرنه min-height:100vh پایه (که روی
       گوشی‌هایی با نوار آدرس، از dvh واقعی بلندتر است) برنده می‌شود و یک فضای
       خالیِ اضافه و قابل‌اسکرول زیر صفحه می‌سازد. */
    html.fit-page, body.fit-page { height: 100vh; height: 100dvh; min-height: 100vh; min-height: 100dvh; }
    /* pageFit کل ارتفاع صفحه را پر می‌کند؛ محتوا بالا می‌ماند و فوتر با
       margin-top:auto دقیقاً به لبه‌ی پایین صفحه می‌چسبد (نه وسط‌چین شدن
       همه‌چیز با هم که فضای خالی بالا/پایین می‌ساخت). */
    .page-fit { flex: 1; display: flex; flex-direction: column; min-height: 0; }
    .page-fit .footer { margin-top: auto; }
    body.fit-page .main { padding-top: 0; padding-bottom: 8px; }
    /* اندازه‌ها بر اساس vh رشد می‌کنند تا روی گوشی‌های بلندتر هم صفحه را طبیعی پر کنند
       (نه یک جزیره کوچک وسط صفحه)؛ سقف clamp فقط برای گوشی‌های خیلی‌خیلی بلند است. */
    body.fit-page .hero { padding: clamp(8px, 4vh, 44px) 0 clamp(6px, 1.6vh, 18px); }
    body.fit-page .hero h1 { font-size: clamp(15px, 3.6vh, 25px); }
    body.fit-page .hero p { font-size: clamp(11px, 2.1vh, 16px); }
    body.fit-page .entry-cards { margin-top: clamp(8px, 2.6vh, 28px); gap: clamp(8px, 2vh, 20px); }
    body.fit-page .entry-card { padding: clamp(10px, 2.6vh, 28px) clamp(10px, 3vw, 24px); }
    body.fit-page .card-logo { width: clamp(46px, 10vh, 108px); height: clamp(46px, 10vh, 108px); }
    body.fit-page .entry-card .icon-svg svg { width: clamp(24px, 6.2vh, 50px); height: clamp(24px, 6.2vh, 50px); }
    body.fit-page .entry-card .icon, body.fit-page .entry-card .icon-img { margin-bottom: clamp(2px, 0.8vh, 6px); }
    body.fit-page .entry-card h2 { font-size: clamp(13px, 2.8vh, 19px); margin-bottom: 2px; }
    body.fit-page .entry-card p { font-size: clamp(10.5px, 2vh, 14px); }
    body.fit-page .home-meta { margin-top: clamp(6px, 2vh, 20px); gap: clamp(4px, 1vh, 10px); }
    body.fit-page .home-count-line { font-size: clamp(11px, 2vh, 15px); }
    body.fit-page .footer { padding: clamp(5px, 1.2vh, 14px) 0; font-size: clamp(9.5px, 1.4vh, 12.5px); }
    body.fit-page .footer-brand { margin-bottom: 3px; }

    /* صفحات لاگین (دکتر/مراجع): کارت کوچک هم مثل صفحه اول با ارتفاع صفحه رشد کند
       تا وسط یک صفحه خالی گم نشود، بلکه فضای گوشی را طبیعی پر کند. */
    body.fit-page .auth-box { margin: clamp(16px, 6vh, 64px) auto; width: 100%; }
    body.fit-page .auth-box .card { padding: clamp(20px, 5.5vh, 52px) clamp(16px, 6vw, 34px); }
    body.fit-page .auth-box .card-title { font-size: clamp(16px, 3.4vh, 23px); margin-bottom: clamp(8px, 2vh, 16px); }
    body.fit-page .auth-box .grid { gap: clamp(10px, 2.6vh, 22px); }
    body.fit-page .auth-box label { font-size: clamp(12px, 2.1vh, 15px); }
    /* فونت اینپوت هرگز نباید کمتر از 16px شود، وگرنه سافاری/کروم موبایل هنگام
       فوکوس روی فیلد خودکار zoom می‌کند (همان پرش/دورشدن فیلد هنگام تایپ). */
    body.fit-page .auth-box .input { padding: clamp(11px, 2.6vh, 17px) clamp(10px, 3vw, 16px); font-size: clamp(16px, 2.4vh, 17px); }
    body.fit-page .auth-box .btn-block { padding: clamp(12px, 3vh, 19px); font-size: clamp(14px, 2.4vh, 16px); }
    body.fit-page .auth-box p.muted.small { font-size: clamp(11px, 2vh, 13.5px); }

    .page-fit { transform-origin: top center; width: 100%; }
}

/* دسکتاپ/تبلت: در صفحات fit-page، فوتر باید ته صفحه بچسبد (نه در وسط یک صفحه بلند
   خالی بماند). چون main و footer داخل #pageFit پیچیده شده‌اند، flex:1 پایه‌ی .main
   دیگر به‌تنهایی کار نمی‌کند؛ این‌جا با flex‌کردن خودِ #pageFit همان رفتار
   «فوتر چسبیده به پایین» دوباره برقرار می‌شود. این بخش عمداً از موبایل (بالا) کاملاً
   جدا است تا هیچ تغییری در رفتار موبایل ایجاد نکند. */
@media (min-width: 901px) {
    .page-fit { flex: 1; display: flex; flex-direction: column; min-height: 0; }
    .page-fit .main { flex: 1; }
}

/* منوی همبرگری شناور — فقط پنل دکتر (بدون هدر) */
.doc-hamburger { position: fixed; top: 10px; inset-inline-end: 12px; z-index: 900; }
.doc-hamburger .nav-toggle {
    display: inline-flex; align-items: center; gap: 6px; background: var(--surface);
    border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; font-size: 14px;
    font-family: inherit; color: var(--ink); cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.10);
}
.doc-hamburger .nav-collapsible {
    display: none; position: absolute; top: 46px; inset-inline-end: 0; flex-direction: column;
    align-items: stretch; min-width: 210px; background: var(--surface); border: 1px solid var(--line);
    border-radius: 12px; box-shadow: 0 12px 34px rgba(0,0,0,.16); padding: 8px; gap: 2px;
}
.doc-hamburger .nav-collapsible.open { display: flex; animation: navDrop 0.18s ease; }
.doc-hamburger .nav-link { padding: 11px 12px; border-radius: 8px; text-align: right; color: var(--ink); text-decoration: none; font-size: 14px; }
.doc-hamburger .nav-link:hover { background: color-mix(in srgb, var(--primary) 10%, transparent); }
.doc-hamburger .inline { display: block; }
.doc-hamburger .nav-btn { width: 100%; text-align: right; background: none; border: none; cursor: pointer; font-family: inherit; font-size: 14px; color: #b91c1c; padding: 11px 12px; }

/* فوتر: برند + لینک‌ها زیر آن، وسط */
.footer-brand { margin-bottom: 8px; }
.link-btn { background: none; border: none; color: var(--primary); cursor: pointer; font-family: inherit; font-size: inherit; padding: 0; }

/* مدیریت آیکون‌ها در تنظیمات */
.icon-manage-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (max-width: 640px) { .icon-manage-grid { grid-template-columns: 1fr; } }
.icon-manage-item { border: 1px solid var(--line); border-radius: 12px; padding: 10px; }
.icon-current-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.icon-current { width: 40px; height: 40px; object-fit: contain; border: 1px solid var(--line); border-radius: 8px; }

/* ---------- تگ غیرفعال ---------- */
.tag-pill.disabled { opacity: 0.35; cursor: not-allowed; }
.tag-pill.disabled:hover { border-color: var(--line); color: var(--ink); }

.percent-btns { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
.percent-btns .btn { padding: 3px 10px; font-size: 12px; }

/* ---------- عکس پرسنلی ---------- */
.patient-avatar {
    width: 56px; height: 56px; border-radius: 12px; object-fit: cover;
    border: 1px solid var(--line); cursor: zoom-in; flex-shrink: 0;
}
.patient-avatar-empty { display: inline-flex; align-items: center; justify-content: center; font-size: 26px; background: #f1f5f9; cursor: default; }
.reveal-box { border-right: 3px solid var(--line); padding-right: 12px; }

/* ---------- چرخ‌دنده شخصی‌سازی ---------- */
.customizer-gear {
    position: fixed; bottom: 18px; left: 18px; z-index: 60;
    width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line);
    background: var(--surface); font-size: 20px; cursor: pointer;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.15); transition: 0.2s;
}
.customizer-gear:hover { transform: rotate(45deg); }
.customizer-panel {
    position: fixed; bottom: 74px; left: 18px; z-index: 60; width: 320px; max-width: calc(100vw - 36px);
    max-height: 70vh; overflow-y: auto;
    background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px;
    box-shadow: 0 16px 48px rgba(15, 23, 42, 0.2);
}

/* ============================================================
   ریسپانسیو موبایل — چیدمان کامل و لمس‌پسند روی گوشی
   ============================================================ */
@media (max-width: 760px) {
    .doc-hamburger .nav-collapsible .nav-link { padding: 12px 14px; font-size: 15px; }

    /* ورودی‌ها با فونت ۱۶ تا iOS هنگام فوکوس زوم نکند + لمس راحت‌تر */
    .input, select.input, textarea.input { font-size: 16px; padding: 11px 12px; }
    .btn { padding: 11px 18px; }
    .btn-lg { padding: 13px 26px; width: 100%; }

    /* دندان‌های چارت کوچک‌تر روی موبایل */
    .tooth { width: 32px; height: 32px; font-size: 13px; }
    .tooth.deciduous { width: 30px; height: 30px; }

    .card { padding: calc(16px * var(--density, 1)); }
    .card-title { font-size: 15px; }

    .hero { padding: 28px 0 16px; }
    .hero h1 { font-size: 22px; }

    /* داشبورد و صفحه اول تمام‌عرض */
    .entry-cards, .action-cards { grid-template-columns: 1fr; }
    .entry-card { padding: 26px 18px; }

    /* کارت رکورد و منوی ویرایش تمام‌عرض */
    .record-head { gap: 8px; }
    .record-menu { margin-right: 0; width: 100%; }
    .record-menu-body { position: static; box-shadow: none; width: 100%; min-width: 0; margin-top: 8px; }

    /* لایت‌باکس و پنل شخصی‌سازی */
    .customizer-panel { width: calc(100vw - 24px); left: 12px; right: 12px; bottom: 70px; }
    .customizer-gear { bottom: 14px; left: 14px; }
}

@media (max-width: 420px) {
    .tooth { width: 28px; height: 28px; font-size: 12px; border-radius: 7px; }
    .tooth.deciduous { width: 26px; height: 26px; }
    .chart-divider { margin: 0 4px; }
    .stat { padding: 8px 16px; }
    .record-photos { gap: 8px; }
}

@keyframes navDrop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* روی صفحه‌های خیلی بزرگ، عکس‌های رکورد بزرگ‌تر */
@media (min-width: 900px) {
    .record-thumb { max-height: 200px; }
}

/* بخش پیش‌نمایش زنده در پنل شخصی‌سازی */
.customizer-panel { transition: none; }
.theme-reset { color: var(--danger); background: none; border: none; cursor: pointer; font-family: inherit; font-size: 13px; }
.range-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; }
.range-row output { font-size: 12px; color: var(--muted); min-width: 34px; text-align: center; }
.swatch-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.swatch-grid .field label { font-size: 12px; }
.swatch-grid input[type="color"] { height: 34px; padding: 2px; width: 100%; border-radius: 8px; }

/* ============================================================
   صفحات عمومی: درباره ما / تماس با ما + سرصفحه صفحات
   ============================================================ */
.page-head { text-align: center; padding: 24px 0 8px; }
.page-head-icon {
    width: 64px; height: 64px; margin: 0 auto 10px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 30px;
    background: color-mix(in srgb, var(--primary) 12%, white); color: var(--primary);
}
.page-head h1 { font-size: 22px; color: var(--primary); }

.about-card .about-text { font-size: 15px; line-height: 2; white-space: pre-line; }

.contact-mini { display: grid; gap: 10px; }
.contact-mini-item { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-size: 14px; }
.cm-ico { font-size: 18px; }

/* دکمه‌های تماس */
.contact-actions {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 20px;
}
@media (max-width: 640px) { .contact-actions { grid-template-columns: 1fr; } }
.contact-btn {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 22px 16px; border-radius: 16px; text-decoration: none;
    border: 1px solid var(--line); background: var(--surface); color: var(--ink);
    transition: 0.18s; text-align: center;
}
.contact-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(15,23,42,0.08); }
.contact-btn-ico { font-size: 30px; }
.contact-btn-label { font-weight: 700; font-size: 16px; }
.contact-btn-sub { font-size: 12px; color: var(--muted); }
.contact-call:hover { border-color: var(--primary); }
.contact-wa { border-color: #25d366; }
.contact-wa:hover { background: #25d3660d; }
.contact-bale { border-color: #4b8bf5; }
.contact-bale:hover { background: #4b8bf50d; }

.contact-address { display: flex; align-items: center; gap: 10px; font-size: 15px; }

/* دکمه چرخ‌دنده کنار کادر جست‌وجو */
.gear-inline {
    background: none; border: 1px solid var(--line); border-radius: 999px;
    padding: 4px 14px; font-family: inherit; font-size: 13px; cursor: pointer; color: var(--primary);
    transition: 0.15s;
}
.gear-inline:hover { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, white); }

/* لینک‌های فوتر */
.footer-links { display: flex; gap: 10px; justify-content: center; align-items: center; margin-bottom: 6px; }
.footer-links a { color: var(--primary); text-decoration: none; }

/* عکس پرسنلی: نمای فعلی + ادیتور */
.avatar-current { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.avatar-editor { max-width: 420px; }
.photo-slot-avatar .canvas-wrap { max-width: 300px; margin: 0 auto; }

/* ============================================================
   موبایل-فرست: تجربه کامل و بدون لگ روی گوشی
   ============================================================ */
@media (max-width: 760px) {
    /* پنل شخصی‌سازی به‌صورت شیت پایین صفحه */
    .customizer-panel {
        left: 8px; right: 8px; bottom: 8px; width: auto; max-height: 78vh; border-radius: 16px 16px 12px 12px;
    }
    .swatch-grid { grid-template-columns: repeat(2, 1fr); }

    /* دکمه‌های تماس بزرگ و انگشت‌پسند */
    .contact-btn { padding: 18px 14px; }

    /* عکس پرسنلی وسط‌چین */
    .avatar-editor { max-width: 100%; }
    .avatar-current { flex-direction: column; align-items: flex-start; }

    /* اسلات‌های عکس درمان تک‌ستون و بزرگ */
    .photo-slots { grid-template-columns: 1fr; }

    /* هدر جمع‌وجور */
    .brand span { font-size: 15px; }
    .page-head { padding: 16px 0 4px; }
}

/* حذف لگ اسکرول: بدون transition سنگین روی عناصر پرتکرار */
.record-thumb, .gallery-item img { will-change: auto; }

/* ============================================================
   دکمه بازگشت، کارت شخصی‌سازی inline، آکاردئون تنظیمات، نقشه
   ============================================================ */
.back-bar { margin-bottom: 14px; }
.back-btn { color: var(--muted); }
.back-btn:hover { color: var(--primary); border-color: var(--primary); }

/* کارت شخصی‌سازی inline (کنار جست‌وجو) */
.customizer-card { border: 2px solid color-mix(in srgb, var(--primary) 30%, white); }

/* آکاردئون تنظیمات */
.settings-group {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); margin-bottom: 12px; overflow: hidden;
}
.settings-group > summary {
    cursor: pointer; padding: 16px 18px; font-weight: 700; font-size: 15px;
    list-style: none; user-select: none; display: flex; align-items: center; gap: 8px;
    background: color-mix(in srgb, var(--primary) 4%, white);
}
.settings-group > summary::-webkit-details-marker { display: none; }
.settings-group > summary::after { content: '⌄'; margin-right: auto; font-size: 18px; color: var(--muted); transition: transform 0.2s; }
.settings-group[open] > summary::after { transform: rotate(180deg); }
.settings-group[open] > summary { border-bottom: 1px solid var(--line); }
.settings-body { padding: 18px; display: grid; gap: 14px; }
.settings-subtitle {
    font-size: 13px; font-weight: 700; color: var(--primary);
    border-right: 3px solid var(--primary); padding-right: 8px; margin-top: 6px;
}
.settings-save { position: sticky; bottom: 12px; padding-top: 10px; }
.settings-save .btn { box-shadow: 0 6px 20px rgba(15,23,42,0.12); }

/* نقشه */
.map-wrap { border-radius: 12px; overflow: hidden; border: 1px solid var(--line); }
.map-wrap iframe { display: block; }

@media (max-width: 760px) {
    .settings-body { padding: 14px; }
    .settings-group > summary { padding: 14px; }
}

/* ============================================================
   داشبورد پزشک — پوسته‌ی اپ‌مانند: هدر ثابت + فهرست اسکرول‌شونده + نوار پایین ثابت
   ============================================================ */
/* min-height هم صریحاً به dvh ست شود، وگرنه min-height:100vh پایه (که روی
   گوشی‌هایی با نوار آدرس، از dvh واقعی بلندتر است) برنده می‌شود و نوار پایین
   (جست‌وجو/فیلتر) را از دید بیرون می‌برد. */
html.doc-app, body.doc-app { height: 100vh; height: 100dvh; min-height: 100vh; min-height: 100dvh; overflow: hidden; }
body.doc-app { display: flex; flex-direction: column; }
.doc-app-main { flex: 1; display: flex; flex-direction: column; min-height: 0; padding: 10px 12px; }

.doc-app-shell {
    position: relative; flex: 1; display: flex; flex-direction: column; min-height: 0;
    gap: 10px; width: 100%; max-width: 480px; margin: 0 auto;
}

/* شیتِ فیلترِ پیشرفته (داشبورد): از پایین بالا می‌آید، دقیقاً تا زیر هدر (top با JS تنظیم می‌شود) */
.filter-sheet {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 30;
    background: var(--page-bg, var(--surface)); border-radius: 20px 20px 0 0;
    box-shadow: 0 -10px 30px rgba(15,23,42,0.18);
    display: flex; flex-direction: column; min-height: 0;
    transform: translateY(105%); visibility: hidden;
    /* visibility با تأخیرِ ۰.۶ثانیه‌ای (هم‌اندازه‌ی transform) عوض می‌شود، وگرنه چون visibility انیمیشن‌پذیر
       نیست، همون لحظه‌ی برداشتنِ کلاسِ open ناپدید می‌شد و اسلایدِ transform (که هنوز در حالِ اجراست) اصلاً دیده نمی‌شد */
    transition: transform .6s ease-in-out, visibility 0s linear .6s;
}
.filter-sheet.open {
    transform: translateY(0); visibility: visible;
    transition: transform .6s ease-in-out, visibility 0s linear 0s;
}
.filter-sheet .doc-quick-form { padding: 12px 12px 10px; flex: 1; min-height: 0; }

/* هدر: زمان/تاریخ | تایمر | نام پزشک */
.doc-app-header {
    flex-shrink: 0; background: var(--surface); border: 1px solid var(--line);
    border-radius: 18px; padding: 12px 14px; display: flex; align-items: center;
    justify-content: space-between; gap: 8px; box-shadow: 0 2px 10px rgba(15,23,42,0.04);
}
/* راست: تایمر ← تاریخ ← ساعت — آیکون‌ها در یک ردیف، متن هرکدام زیرِ آیکونش */
.doc-app-right { display: flex; align-items: flex-start; gap: 16px; flex: 0 0 auto; }
.doc-app-stat-v { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.doc-app-stat-v > svg { width: 28px; height: 28px; color: var(--primary); }
.doc-app-stat-v span { font-size: 15px; font-weight: 700; color: var(--ink); white-space: nowrap; }
/* هم‌اندازه با آیکون ساعت تا «تیر» و «۲۱:۳۷» دقیقاً در یک تراز بیفتند */
.doc-cal-lg { position: relative; display: inline-flex; width: 28px; height: 28px; }
.doc-cal-lg svg { width: 28px; height: 28px; color: var(--primary); }
.doc-cal-lg b { position: absolute; inset: 44% 0 0; text-align: center; font-size: 11px; font-weight: 800; color: var(--primary); line-height: 1; }

/* تایمر — گوشه راست، آیکون بزرگ؛ کمی پایین‌تر تا با آیکون ساعت/کلندر هم‌تراز شود */
.doc-app-mid {
    display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 0 0 auto;
    align-self: center; margin-top: 3px;
    background: none; border: none; cursor: pointer; font-family: inherit; color: var(--primary);
}
.doc-app-mid svg { width: 30px; height: 30px; }
.doc-app-mid span { font-size: 13px; font-weight: 700; }

/* چپ: نام (راست) + لوگو (چپ) */
.doc-app-doc { display: flex; flex-direction: row; align-items: center; gap: 10px; flex: 0 0 auto; }
.doc-app-doc-text { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; line-height: 1.25; text-align: right; }
.doc-app-doc-text b { font-size: 21px; white-space: nowrap; line-height: 1.25; }
/* «مراجعان» سمت چپِ بلوک نام، نزدیک لوگو (flex-end در RTL = چپ) */
.doc-app-doc-text span { align-self: flex-end; font-size: 14px; color: var(--muted); line-height: 1.1; }
.doc-app-logo { width: 46px; height: 46px; object-fit: contain; flex-shrink: 0; }
/* دسترسی به تنظیمات از هر صفحه‌ی اپ‌مانند (تنها راه رسیدن به تنظیمات/تگ‌ها/خروج) */
.doc-app-settings-btn {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 30px; height: 30px; color: var(--muted); text-decoration: none;
}
.doc-app-settings-btn svg { width: 21px; height: 21px; }
.doc-app-settings-btn:active { color: var(--primary); }
.doc-app-tooth { width: 32px; height: 32px; color: var(--primary); flex-shrink: 0; }

/* فهرست مراجعین — تنها بخش اسکرول‌شونده + اسلایدر سفارشی سمت راست */
.doc-app-list-wrap { position: relative; flex: 1; min-height: 0; display: flex; }
/* چون display:flex بالا مستقیم روی کلاس ست شده، صفتِ hidden را بی‌اثر می‌کند (همون الگوی باگِ تکراری) —
   بدونِ این قانون، مثلاً قدمِ دومِ صفحه‌ی «+»ِ لیستِ درمان‌ها هم‌زمان با قدمِ اول دیده می‌شد */
.doc-app-list-wrap[hidden] { display: none; }
/* padding-right فضای بیشتری برای اسلایدر باز می‌کند تا فاصله‌اش تا لبه کارت و تا لبه صفحه قرینه باشد */
.doc-app-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 0 30px 4px 0; -webkit-overflow-scrolling: touch; }
/* اسکرول‌بار نیتیو مخفی شود (روی موبایل اصلاً دیده/استایل نمی‌شود) و از اسلایدر سفارشی استفاده کنیم */
.doc-app-list { scrollbar-width: none; }
.doc-app-list::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* اسلایدر سفارشی سمت راست — فاصله قرینه از لبه صفحه و لبه کارت‌ها:
   padding خودِ صفحه (doc-app-main) ۱۲px است؛ اسلایدر right:4px → فاصله تا لبه صفحه = 4+12 = 16px،
   و فاصله تا کارت = padding-right(30) - (right 4 + width 10) = 16px → کاملاً قرینه. */
.doc-app-scrollbar {
    position: absolute; top: 2px; bottom: 2px; right: 4px; width: 10px;
    background: color-mix(in srgb, var(--ink) 8%, transparent); border-radius: 20px;
    touch-action: none; z-index: 5;
}
.doc-app-scrollbar-thumb {
    position: absolute; left: 0; right: 0; top: 0; min-height: 40px;
    background: var(--primary); border-radius: 20px; cursor: grab;
}
.doc-app-scrollbar-thumb:active { cursor: grabbing; background: color-mix(in srgb, var(--primary) 82%, black); }

.doc-app-patient {
    flex-shrink: 0; position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
    padding: 14px 18px; display: flex; align-items: center; gap: 14px;
    text-decoration: none; color: var(--ink); transition: 0.15s;
}
.doc-app-patient:active, .doc-app-patient:hover { border-color: var(--primary); }
/* حالتِ انتخاب‌شده (با نگه‌داشتنِ لمسِ کارت) — آبیِ کم‌رنگ، دقیقاً هم‌رنگِ پیل‌های فعالِ فیلتر */
.doc-app-patient.card-selected, .treat-card.card-selected {
    background: color-mix(in srgb, var(--primary) 14%, var(--surface));
    border-color: color-mix(in srgb, var(--primary) 30%, var(--line));
}
/* جلوگیری از منوی پیش‌فرضِ نگه‌داشتنِ لمسِ گوشی (کپی/انتخابِ متن/کال‌اوتِ سیو-عکسِ سافاری) روی این
   کارت‌ها و همه‌ی داخلشان — وگرنه هم‌زمان با نگه‌داشتن برای ورود به حالتِ انتخاب، این منو هم باز می‌شد.
   touch-action:manipulation هم تأخیرِ ~۳۰۰ میلی‌ثانیه‌ایِ تشخیصِ دابل‌تپ/زوم را در گوشی حذف می‌کند —
   هم لمسِ عادی (باز کردنِ پرونده) هم لمسِ‌طولانی (انتخاب) سریع‌تر و بی‌درنگ‌تر حس می‌شوند. */
.doc-app-patient, .doc-app-patient *, .treat-card, .treat-card * {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}
.doc-app-patient, .treat-card {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
/* عکس + نام در سمت راست؛ کدِ پرونده در وسطِ سمت چپ و تاریخِ مراجعه پایینِ سمت چپ */
.doc-app-patient-main { flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 58px; min-width: 0; padding-inline-end: 52px; }
.doc-app-patient-row { display: flex; align-items: baseline; gap: 7px; justify-content: flex-start; }
.doc-app-patient-row b { font-size: 17px; }
/* شماره پرونده: سمت چپِ کارت، وسطِ عمودی (بالای تاریخ) */
.doc-app-patient-code { position: absolute; top: 50%; transform: translateY(-50%); inset-inline-end: 18px; font-size: 14px; color: var(--muted); font-weight: 700; }
/* تاریخ آخرین مراجعه: پایینِ سمت چپ */
.doc-app-patient-date { position: absolute; bottom: 10px; inset-inline-end: 18px; font-size: 13px; color: var(--muted); font-weight: 600; letter-spacing: 0.3px; }
.doc-app-avatar {
    align-self: center;
    width: 60px; height: 60px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
    background: color-mix(in srgb, var(--primary) 10%, white); display: flex; align-items: center; justify-content: center;
}
.doc-app-avatar img { width: 100%; height: 100%; object-fit: cover; }
.doc-app-avatar svg { width: 30px; height: 30px; color: var(--primary); }
.doc-app-patient.doc-app-hide { display: none; }
.doc-app-no-result { padding: 20px 0; }
/* ردیف‌های جست‌وجوی بیمار در صفحه‌ی «+»ِ لیستِ درمان‌ها: خودِ .doc-app-patient معمولاً <a> است،
   اینجا <button> است — چند خاصیتِ پیش‌فرضِ فرم‌هایِ مرورگر (فونت/چیدمانِ متن/نشانگر) بازنشانی می‌شود */
.create-patient-row { width: 100%; font-family: inherit; font-size: inherit; text-align: start; cursor: pointer; }

/* نوار پایین: «+» (راست) — جست‌وجو (وسط) — فیلتر (چپ).
   margin-top:auto تا اگر محتوایِ بالایِ صفحه کوتاه‌تر از ارتفاعِ صفحه بود (مثلِ گالریِ اقدامِ درمانی)،
   این نوار همیشه بچسبد به کفِ صفحه، نه هرجا محتوا تمام شد. */
.doc-app-bottom { flex-shrink: 0; display: flex; align-items: center; gap: 10px; margin-top: auto; }
.doc-app-icon-btn {
    position: relative; width: 46px; height: 46px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line);
    display: flex; align-items: center; justify-content: center; color: var(--primary); flex-shrink: 0;
    cursor: pointer; font-family: inherit; padding: 0;
}
/* چون display:flex بالا مستقیم روی کلاس ست شده، صفتِ hidden را بی‌اثر می‌کند (الگوی باگِ تکراری در
   این پروژه) — بدونِ این قانون، دکمه‌ی «+» و دکمه‌ی سه‌خط (انتخابِ چندتایی) هردو هم‌زمان دیده می‌شدند */
.doc-app-icon-btn[hidden] { display: none; }
.doc-app-icon-btn:disabled { opacity: .4; cursor: not-allowed; }
/* نوارِ پایینِ صفحه‌ی «+»ِ ثبتِ اقدامِ درمانی: طبقِ نمونه‌ی تصویریِ کارفرما، ۵ دکمه بزرگ‌تر از حدِ معمول
   و با فاصله‌ی مساوی/توزیع‌شده (نه چسبیده‌به‌هم) در عرضِ نوار — آپلود دقیقاً لبه‌ی چپ */
.create-bottom-bar { justify-content: space-between; }
.create-bottom-bar .doc-app-icon-btn { width: 58px; height: 58px; border-radius: 16px; }
.create-bottom-bar .doc-app-icon-btn svg { width: 24px; height: 24px; }
/* ردیفِ جست‌وجوی بیمار در قدمِ دوم: دکمه‌ی برگشتِ کوچک (فقط آیکون) کنارِ فیلدِ جست‌وجو، نه یک دکمه‌ی
   بزرگِ تمام‌عرض زیرِ فهرست */
.create-search-row { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.create-search-row .doc-app-search { flex: 1; }
/* .doc-app-list-wrap پیش‌فرضش ردیفی (کنارِ‌هم) است چون برای فهرست+اسلایدرِ کنارهم طراحی شده بود؛
   اینجا (ردیفِ جست‌وجو بالا، فهرستِ نتایج پایین) باید ستونی باشد */
#createStep2 { flex-direction: column; }
.doc-app-icon-btn svg { width: 20px; height: 20px; }
/* دکمه‌ی آیکون‌دار با برچسبِ متنی (مثل «دندان»/«درمان» در نوار پایینِ لیست خدمات) */
.doc-app-icon-labeled { width: auto; flex: 1; gap: 6px; padding: 0 12px; font-size: 13px; font-weight: 700; justify-content: flex-start; }
.doc-app-icon-labeled svg { width: 17px; height: 17px; flex-shrink: 0; }
/* دکمه‌ی «درمان...» پهن‌تر از «دندان...» (مطابق ماکاپ) */
.treat-tooth-btn { flex: 1; }
.treat-tag-btn { flex: 1.2; }
/* آیکون فیلتر وقتی فعال است: آبیِ کم‌رنگ (کم‌رنگ‌تر از رنگِ توپرِ دکمه «+») */
.doc-app-icon-btn.filtered {
    background: color-mix(in srgb, var(--primary) 14%, var(--surface));
    border-color: color-mix(in srgb, var(--primary) 30%, var(--line));
    color: var(--primary);
}
/* ضربدرِ کوچکِ حذفِ فیلتر، کنارِ بجِ دندان/برچسبِ خدمت — زدنش فقط همان فیلتر را پاک می‌کند،
   بدونِ بازکردنِ دوبارهٔ پنجره‌ی انتخاب (که با زدنِ بقیه‌ی دکمه باز می‌شود) */
.pill-clear-x {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
    color: var(--muted); margin-inline-start: auto;
}
.pill-clear-x svg { width: 12px; height: 12px; }
.pill-clear-x:hover, .pill-clear-x:active { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }
/* دکمه «+» — پررنگ و شاخص */
.doc-app-add { background: var(--primary); border-color: var(--primary); color: #fff; }
.doc-app-add svg { width: 24px; height: 24px; }
.doc-app-add:active { background: color-mix(in srgb, var(--primary) 85%, black); }
.doc-app-search {
    flex: 1; display: flex; align-items: center; gap: 8px; background: var(--surface);
    border: 1px solid var(--line); border-radius: 14px; padding: 0 14px; height: 46px;
}
.doc-app-search svg { width: 18px; height: 18px; color: var(--muted); flex-shrink: 0; }
.doc-app-search input {
    border: none; outline: none; background: none; font-family: inherit; font-size: 15px;
    color: var(--ink); flex: 1; height: 100%; min-width: 0;
}

/* ---------- کارتِ رکوردِ خدمت (لیست سراسری خدمات) ---------- */
.treat-card {
    flex-shrink: 0; display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--line);
    border-radius: 16px; padding: 14px; text-decoration: none; color: var(--ink); transition: .15s;
}
.treat-card:active { border-color: var(--primary); }
.treat-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.treat-file { font-size: 13px; color: var(--muted); font-weight: 700; }
.treat-name { font-size: 16px; }
.treat-desc { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--muted); }
/* بجِ شماره‌دندان — فقط یک گوشه‌ی L مثلِ نشانِ کراپ (نه کادرِ کامل).
   عمداً از border-right/left فیزیکی استفاده شده (نه inline-end/start) — چونِ چرخِ انتخاب‌کننده
   خودش direction:ltr اجباری دارد و اگر اینجا از inline-end/start (که به rtl صفحه گوش می‌دهد)
   استفاده می‌شد، جهتِ L روی بج با جهتِ همان L روی چرخ یکی نمی‌شد. */
.treat-tooth {
    display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 20px;
    padding: 0 5px 3px 1px; border-bottom: 2px solid var(--primary); border-right: 2px solid var(--primary);
    font-size: 13px; font-weight: 800; color: var(--primary);
}
/* نیمه‌ی دومِ فک (بعدِ خطِ وسط) — خطِ عمودی به چپ منتقل می‌شود، دقیقاً هم‌جهت با چرخ */
.treat-tooth.tt-mirror { border-right: none; border-left: 2px solid var(--primary); padding: 0 1px 3px 5px; }
/* فکِ پایین — خطِ افقی بالا می‌آید، دقیقاً هم‌جهت با چرخِ فکِ پایین */
.treat-tooth.tt-flip { border-bottom: none; border-top: 2px solid var(--primary); padding: 3px 5px 0 1px; }
.treat-tooth.tt-mirror.tt-flip { padding: 3px 1px 0 5px; }
.treat-date { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* عکس‌های قبل/حین/بعد به سبکِ کاورفلوِ واقعیِ تعاملی — با سوایپِ راست/چپ روی خودشان جابه‌جا می‌شوند.
   هر سه عکس روی یک «قفسه»/خطِ پایه‌ی مشترک می‌ایستند (bottom ثابت) و زیرشان انعکاس/آینه دارند —
   دقیقاً مثلِ عکسِ مرجعِ کارفرما. جابه‌جایی با سوایپ فقط با transform انجام می‌شود. */
.treat-photos {
    flex: 0 0 auto; position: relative; width: 164px; height: 118px;
    perspective: 260px; touch-action: pan-y; cursor: grab; user-select: none;
}
/* عرض/ارتفاع/مارجین اینجا فقط پیش‌فرضِ اولیه (قبلِ اجرای JS) است — بعد از آن، app.js بر اساسِ
   نسبتِ واقعیِ خودِ عکس (افقی/عمودی) این مقادیر را برای هر عکس جداگانه override می‌کند.
   bottom ثابت است (نه وسط‌چین عمودی) تا همه‌ی عکس‌ها روی یک خطِ پایه‌ی یکسان بایستند — مثلِ عکسِ مرجع. */
.treat-photo {
    position: absolute; bottom: 22px; left: 50%; margin-left: -27px;
    width: 54px; height: 88px; cursor: pointer;
    transition: transform .28s ease, width .28s ease, height .28s ease, margin .28s ease, opacity .28s ease;
    -webkit-user-drag: none; transform-origin: center bottom;
}
.treat-photo-inner {
    width: 100%; height: 100%; border-radius: 8px; overflow: hidden;
    box-shadow: 0 5px 12px rgba(15,23,42,.3); background: color-mix(in srgb, var(--ink) 6%, transparent);
    transition: box-shadow .28s ease;
}
.treat-photo-inner img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; display: block; }
/* حالتِ انتخاب‌شده (با نگه‌داشتنِ لمسِ عکس، برای حذفِ گروهی) — یک قابِ رنگی دورِ عکس، هم‌رنگِ بقیه‌ی
   حالت‌های انتخاب‌شده‌ی سایت. جلوگیری از منوی پیش‌فرضِ لمسِ گوشی هم مثلِ کارت‌های دیگر لازم است. */
.treat-photo.card-selected .treat-photo-inner { outline: 3px solid var(--primary); outline-offset: 2px; }
/* نوارِ پایینِ همین گالری (۳ دکمه: برگشت/ویرایش/آپلود-سطل) بزرگ‌تر از حدِ معمولِ .doc-app-icon-btn —
   فقط همین صفحه، بقیه‌ی نوارهای پایینِ سایت (داشبورد، لیستِ درمان‌ها و...) دست‌نخورده می‌مانند */
.gallery-bottom-bar { justify-content: space-between; }
.gallery-bottom-bar .doc-app-icon-btn { width: 56px; height: 56px; border-radius: 16px; }
.gallery-bottom-bar .doc-app-icon-btn svg { width: 24px; height: 24px; }
.treat-photo, .treat-photo * { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.treat-photo.tp-front {
    width: 60px; height: 96px; margin-left: -30px;
    transform: translateX(0) rotateY(0deg) scale(1); z-index: 2; cursor: default;
}
.treat-photo.tp-front .treat-photo-inner { box-shadow: 0 9px 20px rgba(15,23,42,.4); }
/* فاصله‌ی نزدیک ولی بدونِ چسبیدن به عکسِ جلو (کمی جلوتر از لبه‌ی آن) */
.treat-photo.tp-left { transform: translateX(-58px) rotateY(-28deg) scale(.85); z-index: 1; }
.treat-photo.tp-right { transform: translateX(58px) rotateY(28deg) scale(.85); z-index: 1; }
/* بیشتر از ۳ عکس: بقیه پشتِ سرِ همین عکسِ راست به‌شکلِ استکِ فن‌شده می‌ایستند — زاویه (rotateY) همون
   زاویه‌ی tp-right است، فقط کمی به‌سمتِ داخل/کوچک‌تر/کم‌رنگ‌تر (نه بیرون‌تر، وگرنه از لبه‌ی صفحه بیرون
   می‌زنند) تا «پشتِ هم» دیده شوند، نه کاملاً روی‌هم/نامرئی */
.treat-photo.tp-right.tp-right-depth-1 { transform: translateX(50px) rotateY(28deg) scale(.78); z-index: 0; opacity: .85; }
.treat-photo.tp-right.tp-right-depth-2 { transform: translateX(43px) rotateY(28deg) scale(.72); z-index: -1; opacity: .68; }
.treat-photo.tp-right.tp-right-depth-3 { transform: translateX(37px) rotateY(28deg) scale(.66); z-index: -2; opacity: .5; }

/* انعکاس/آینه‌ی زیرِ عکس — همون عکس برعکس‌شده، محوشونده به‌سمتِ پایین (دقیقاً مثلِ عکسِ مرجع) */
.treat-photo-reflection {
    position: absolute; top: 100%; left: 0; width: 100%; height: 100%;
    overflow: hidden; border-radius: 0 0 8px 8px; pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.32) 0%, transparent 46%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.32) 0%, transparent 46%);
}
.treat-photo-reflection img {
    width: 100%; height: 100%; object-fit: cover; transform: scaleY(-1); display: block; pointer-events: none;
}
@media (max-width: 380px) {
    .treat-photos { width: 140px; height: 100px; }
    .treat-photo { bottom: 18px; width: 46px; height: 74px; margin-left: -23px; }
    .treat-photo.tp-front { width: 50px; height: 82px; margin-left: -25px; }
    .treat-photo.tp-left { transform: translateX(-49px) rotateY(-28deg) scale(.85); }
    .treat-photo.tp-right { transform: translateX(49px) rotateY(28deg) scale(.85); }
}

/* ---------- گالریِ بزرگِ صفحه‌ی اقدامِ درمانی — همون کاورفلو، فقط بزرگ‌تر و کادرها مربعی (بدونِ گردی) ---------- */
.treat-photos.treat-photos-lg {
    width: 100%; max-width: 100%; height: 340px;
}
.treat-photos-lg .treat-photo { bottom: 66px; width: 138px; height: 212px; margin-left: -69px; }
.treat-photos-lg .treat-photo-inner { border-radius: 0; }
.treat-photos-lg .treat-photo.tp-front { width: 170px; height: 260px; margin-left: -85px; }
/* فاصله‌ی کوچک ولی واضح از عکسِ جلو (نه چسبیده، نه خیلی دور) — زاویه عمداً برعکسِ حالتِ کارتِ کوچک
   است (طبقِ خواسته‌ی صریحِ کارفرما) تا لبه‌ی نزدیک به عکسِ وسط رو به کاربر باشد */
.treat-photos-lg .treat-photo.tp-left { transform: translateX(-150px) rotateY(30deg) scale(.85); }
.treat-photos-lg .treat-photo.tp-right { transform: translateX(150px) rotateY(-30deg) scale(.85); }
.treat-photos-lg .treat-photo.tp-right.tp-right-depth-1 { transform: translateX(128px) rotateY(-30deg) scale(.78); z-index: 0; opacity: .85; }
.treat-photos-lg .treat-photo.tp-right.tp-right-depth-2 { transform: translateX(110px) rotateY(-30deg) scale(.72); z-index: -1; opacity: .68; }
.treat-photos-lg .treat-photo.tp-right.tp-right-depth-3 { transform: translateX(95px) rotateY(-30deg) scale(.66); z-index: -2; opacity: .5; }
.treat-photos-lg .treat-photo-reflection { border-radius: 0; }
@media (max-width: 380px) {
    .treat-photos.treat-photos-lg { height: 300px; }
    .treat-photos-lg .treat-photo { bottom: 56px; width: 118px; height: 182px; margin-left: -59px; }
    .treat-photos-lg .treat-photo.tp-front { width: 146px; height: 224px; margin-left: -73px; }
    .treat-photos-lg .treat-photo.tp-left { transform: translateX(-128px) rotateY(30deg) scale(.85); }
    .treat-photos-lg .treat-photo.tp-right { transform: translateX(128px) rotateY(-30deg) scale(.85); }
}

.gallery-info-row { display: flex; gap: 10px; }
.gallery-info-box {
    flex: 1; text-align: center; background: var(--surface); border: 1px solid var(--line);
    border-radius: 12px; padding: 10px; font-weight: 800;
}
/* کادرِ نوعِ درمان: برچسب + بجِ کوچکِ دندان کنارِ هم، وسط‌چین (بجِ دندان دیگر زیرِ عکس‌ها نیست) */
.gallery-info-treat { display: flex; align-items: center; justify-content: center; gap: 6px; }
/* دکمه‌ی «منتخب‌کردنِ همین ویزیت» — از نوارِ پایین به همین ردیف منتقل شد؛ برخلافِ دو کادرِ دیگر
   کشیده نمی‌شود (flex:1)، فقط اندازه‌ی خودش را می‌گیرد، مربعیِ کوچک کنارِ آن‌ها */
.gallery-info-select { flex: 0 0 46px; width: 46px; display: flex; align-items: center; justify-content: center; color: var(--primary); cursor: pointer; font-family: inherit; }
.gallery-info-select svg { width: 20px; height: 20px; }
.gallery-info-select.filtered {
    background: color-mix(in srgb, var(--primary) 14%, var(--surface));
    border-color: color-mix(in srgb, var(--primary) 30%, var(--line));
}

/* مرحله‌ی فعلیِ گالری: کادرِ اطلاعات (نوعِ‌درمان+بجِ دندان، تاریخ) چسبیده به هدر (بالا) می‌ماند؛ نام/کدِ‌پرونده
   به زیرِ نامِ دکتر در هدرِ مشترک منتقل شده. فقط عکس‌ها (gallery-photos-wrap) وسطِ فضای باقی‌مانده تا نوارِ
   پایین قرار می‌گیرند. کلِ این ناحیه قابلِ سوایپِ عمودی برای رفتن بین تاریخ‌های مختلفِ همین بیمار است (setupTreatDatePager) */
.gallery-stage {
    flex: 1; display: flex; flex-direction: column; gap: 10px;
    min-height: 0; touch-action: none; animation: galleryStageEnter .3s ease;
    transition: transform .28s ease, opacity .28s ease;
}
.gallery-photos-wrap { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 16px; min-height: 0; }
@keyframes galleryStageEnter { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.gallery-stage.leaving-up { transform: translateY(-36px); opacity: 0; }
.gallery-stage.leaving-down { transform: translateY(36px); opacity: 0; }

/* شیتِ ثبتِ سریعِ ویزیتِ جدید (همون کلاسِ filter-sheet، فقط محتوای دیگر) */
.quick-add-header { display: flex; align-items: center; justify-content: space-between; padding: 2px 2px 10px; }
.quick-add-fields { display: flex; gap: 10px; margin-bottom: 12px; }
.quick-photos-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.quick-photo-add, .quick-photo-thumb {
    width: 72px; height: 72px; border-radius: 12px; overflow: hidden; position: relative; flex-shrink: 0;
}
.quick-photo-add {
    border: 2px dashed var(--line); display: flex; align-items: center; justify-content: center;
    color: var(--muted); cursor: pointer; background: none;
}
.quick-photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.quick-photo-remove {
    position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
    background: rgba(15,23,42,.65); color: #fff; border: none; display: flex; align-items: center;
    justify-content: center; cursor: pointer; padding: 0;
}
.quick-photo-remove svg { width: 12px; height: 12px; }
.quick-add-submit { margin-top: 14px; }
.quick-add-submit:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- فرم ثبت سریع مراجع (نسخه خلاصه دکتر) — جمع‌وجور ---------- */
.doc-quick-form { flex: 1; display: flex; flex-direction: column; min-height: 0; gap: 8px; }
.doc-quick-scroll { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding: 2px 30px 6px 0; scrollbar-width: none; }
.doc-quick-scroll::-webkit-scrollbar { width: 0; height: 0; display: none; }
.doc-quick-top { display: flex; gap: 12px; align-items: flex-start; }
.doc-quick-fields { flex: 1; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.doc-quick-row { display: flex; align-items: center; gap: 10px; }
.doc-quick-row label { flex: 0 0 78px; font-size: 13px; color: var(--muted); font-weight: 700; }
.doc-quick-row .input { flex: 1; min-width: 0; }
/* اینپوت‌های جمع‌وجورتر مخصوص این فرم (زوم موبایل هم غیرفعال است، پس زیر ۱۶px مشکلی ندارد) */
.doc-quick-form .input { padding: 8px 11px; font-size: 14px; }
/* min-width:0 ضروری است: بدون آن، ردیفِ دکمه‌های ویرایش/حذف (عریض‌تر از ۱۰۸px) این ستون را
   بعد از ثبت عکس بزرگ‌تر می‌کرد و روی فیلدهای کنارش تأثیر می‌گذاشت */
.doc-quick-photo { flex: 0 0 108px; min-width: 0; }
.doc-quick-photo .photo-slot { border: 1px solid var(--line); border-radius: 12px; padding: 7px; gap: 5px; }
.doc-quick-photo .slot-head { text-align: center; font-size: 11px; }
.doc-quick-photo .slot-pick { padding: 8px 6px; font-size: 12px; }
/* دکمه‌های ویرایش/عوض‌کردن/حذف زیر عکس: کوچک‌تر تا در همان ۱۰۸px جا شوند و کادر را بزرگ نکنند */
.doc-quick-photo .committed-btns { gap: 4px; }
.doc-quick-photo .committed-btns .icon-btn { min-width: 0; width: 30px; height: 30px; padding: 0; }
.doc-quick-photo .committed-btns .icon-btn svg { width: 15px; height: 15px; }
.doc-quick-notes, .doc-quick-conditions, .doc-quick-female { display: flex; flex-direction: column; gap: 6px; }
/* فاصله‌ی بیشتر بین کادر آدرس و بخشِ بیماری‌های زمینه‌ای (خیلی به هم چسبیده بودند) */
.doc-quick-conditions { margin-top: 12px; }
.doc-quick-notes > label, .doc-quick-conditions > label, .doc-quick-female > label { font-size: 13px; font-weight: 700; color: var(--muted); }
.doc-quick-conditions .check, .doc-quick-female .check { font-size: 13px; }
.doc-quick-notes textarea.input { min-height: 58px; }
.doc-quick-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; }
.doc-quick-checks .check { font-size: 13px; }
.doc-quick-actions { flex-shrink: 0; display: flex; gap: 12px; justify-content: flex-end; padding-top: 2px; }
.doc-quick-actions .btn { flex: none; width: 64px; height: 46px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.doc-quick-actions .btn svg { width: 23px; height: 23px; display: block; }
.doc-quick-ok { min-width: 0; }
@media (max-width: 420px) {
    .doc-quick-photo { flex-basis: 92px; }
    .doc-quick-row label { flex-basis: 68px; font-size: 12px; }
    .doc-quick-checks { grid-template-columns: 1fr; }
}

/* ---------- صفحه جست‌وجوی پیشرفته (اپ‌مانند، دو تب: آدمک/دندان) ---------- */
.search-date-ranges { display: flex; flex-direction: column; gap: 8px; }
.search-date-range-title { font-size: 13px; font-weight: 700; color: var(--muted); }
.search-date-range-row { display: flex; gap: 10px; }
.search-date-range-row .date-inline { flex: 1; min-width: 0; }
@media (max-width: 420px) {
    .search-date-range-row { flex-direction: column; }
}
/* نوار پایین: تب آدمک، تب دندان، تأیید (سه دکمه هم‌اندازه) */
.search-tabbar { justify-content: center; gap: 8px; }
.search-tabbar .btn { width: 52px; }
.search-tab-btn.active { border-color: var(--primary); color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, var(--surface)); }
@media (max-width: 380px) {
    .search-tabbar { gap: 6px; }
    .search-tabbar .btn { width: 46px; }
}

/* ---------- منوی اصلیِ پزشک (بعد از ورود): دو کارتِ انتخابی ---------- */
.doc-menu-list { flex: 1; display: flex; flex-direction: column; gap: 14px; padding-top: 6px; }
.doc-menu-card {
    display: flex; align-items: center; gap: 16px; padding: 20px;
    background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
    text-decoration: none; color: var(--ink); transition: border-color .15s;
}
.doc-menu-card:active { border-color: var(--primary); }
.doc-menu-icon {
    flex: 0 0 auto; width: 52px; height: 52px; border-radius: 14px;
    background: color-mix(in srgb, var(--primary) 10%, var(--surface)); color: var(--primary);
    display: flex; align-items: center; justify-content: center;
}
.doc-menu-icon svg { width: 26px; height: 26px; }
.doc-menu-text { display: flex; flex-direction: column; gap: 4px; }
.doc-menu-text b { font-size: 17px; }
.doc-menu-text span { font-size: 13px; color: var(--muted); }
/* نتایج، داخل همان ناحیه‌ی اسکرول‌شونده */
.search-results { padding-top: 6px; border-top: 1px solid var(--line); margin-top: 4px; }
.search-results-title { font-size: 13px; font-weight: 800; color: var(--muted); margin-bottom: 10px; }
.search-results-list { display: flex; flex-direction: column; gap: 10px; }

/* ---------- فیلد تاریخ + دکمه تقویم + پاپ‌آپ انتخابگر ---------- */
.date-combo { flex: 1; display: flex; gap: 6px; min-width: 0; }
.date-combo .input { flex: 1; min-width: 0; }
.date-open-btn {
    flex: 0 0 auto; width: 42px; border: 1px solid var(--line); border-radius: 10px;
    background: var(--surface); color: var(--primary); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.date-open-btn svg { width: 20px; height: 20px; }
.date-open-input { cursor: pointer; }
.date-modal:not([hidden]) {
    display: flex; position: fixed; inset: 0; z-index: 1000; background: rgba(15,23,42,0.55);
    align-items: center; justify-content: center; padding: 18px;
}
.date-modal-card {
    background: var(--surface); border-radius: 20px; width: 100%; max-width: 360px;
    padding: 20px 18px 18px; box-shadow: 0 24px 60px rgba(0,0,0,0.3); display: grid; gap: 14px;
    animation: datePop 0.18s ease;
    transition: opacity .22s ease, transform .22s ease;
}
@keyframes datePop { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
/* بستنِ نرم (قبلِ ناوبری/رفرش) — کاربر باید واقعاً ببیند پنجره پایین/محو می‌شود، نه ناپدیدیِ ناگهانی */
.date-modal.closing { transition: background-color .22s ease; background-color: transparent; }
.date-modal.closing .date-modal-card { opacity: 0; transform: scale(.94); }

/* پنجره‌ی انتخابِ گزینه‌ای (جنسیت/تاهل) — نرم و مینیمال، وسطِ صفحه */
.choice-btn {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
    cursor: pointer; text-align: start; color: var(--ink); font-family: inherit;
    -webkit-tap-highlight-color: transparent;
}
.choice-btn:focus { outline: none; }
.choice-btn .choice-label { color: var(--muted); font-size: 14px; }
.choice-btn svg { width: 18px; height: 18px; color: var(--muted); flex-shrink: 0; }
.choice-options { display: flex; flex-direction: column; gap: 10px; }
.choice-option {
    width: 100%; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px;
    background: var(--surface); color: var(--ink); font-family: inherit; font-size: 15px; font-weight: 600;
    cursor: pointer; text-align: start; transition: border-color .15s, background .15s, color .15s;
}
.choice-option:active, .choice-option:hover { border-color: var(--primary); }
.choice-option.selected {
    border-color: var(--primary); color: var(--primary);
    background: color-mix(in srgb, var(--primary) 8%, var(--surface));
}
.date-modal-title { font-weight: 800; font-size: 16px; text-align: center; }
.date-modal .date-picker { margin: 0 auto; }
.date-modal-actions { display: flex; }
.date-modal-actions .btn { flex: 1; }

/* ---------- پنجره‌ی انتخاب دندان (تبِ دائمی/شیری + دو چرخِ اسکرولیِ افقی سمتِ راست/چپ) ---------- */
.tooth-pick-card { position: relative; width: 100%; max-width: 320px; padding: 20px 14px 18px; }
.tooth-pick-dentition { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-bottom: 6px; }
.tooth-pick-option {
    border: none; background: none; font-family: inherit; cursor: pointer;
    color: var(--muted); font-size: 11px; font-weight: 700; padding: 4px 12px; border-radius: 16px;
}
.tooth-pick-option.active {
    background: color-mix(in srgb, var(--primary) 12%, var(--surface));
    color: var(--primary); font-weight: 800; font-size: 12px;
}

/* دقیقاً یکی از دو حالت نشان داده می‌شود؛ محتوای دیگری کاملاً پنهان است.
   min-width:0 حیاتی است: .date-modal-card گرید است و بدونِ این، عرضِ ذاتیِ محتوای بلندِ
   چرخِ افقی (که پشتِ overflow-x:scroll مخفی می‌شود) کارت را به بیرون هل می‌داد و همه‌چیز را
   بی‌شکل/نامرئی می‌کرد — همینه که چرخ خالی و بیرون از کارت دیده می‌شد. */
.tooth-pick-rows[hidden] { display: none; }
.tooth-pick-rows { min-width: 0; }
/* دو چرخِ افقی رویِ هم (سمت راست، بعد سمت چپ) — نه کنارِ هم، چون هرکدام حالا عرضِ کامل می‌خواهد */
.tooth-wheel-group { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.tooth-wheel-col { display: flex; flex-direction: column; gap: 6px; width: 100%; min-width: 0; }
.tooth-wheel-col label { font-size: 12px; color: var(--muted); font-weight: 700; text-align: center; }

/* چرخِ افقی: با کشیدن به چپ/راست عدد عوض می‌شود (نه بالا/پایین مثلِ تاریخ/تایمر).
   عمداً direction:ltr است — رفتارِ scrollLeft در rtl بینِ مرورگرها ناسازگار است؛ با ltr همیشه یکسان رفتار می‌کند.
   عمداً scroll-snap-type ندارد — روی موبایل (به‌خصوص iOS) اسنپِ نیتیو با اسنپِ دستیِ JS (روی
   scroll settle) قاطی می‌شد و اسکرول وسط‌راه انگار «گیر» می‌کرد؛ اسنپ فقط با JS انجام می‌شود. */
.tooth-wheel-h {
    direction: ltr; width: 100%; min-width: 0; height: 46px; overflow-x: scroll; overflow-y: hidden;
    -ms-overflow-style: none; scrollbar-width: none;
    border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
}
.tooth-wheel-h::-webkit-scrollbar { display: none; }
/* همین‌که کاربر شروع به انتخاب از چرخِ فکِ دیگر کرد، این یکی کم‌رنگ می‌شود (فقط بصری) — ولی همچنان
   لمس/اسکرول‌پذیر می‌ماند تا اگر کاربر پشیمان شد و رویِ همین یکی زد، بشود دوباره برگشت */
.tooth-wheel-h.dp-row-disabled { opacity: .4; }
.dp-row-inner { display: flex; align-items: center; height: 100%; }
.dp-row-spacer { flex: 0 0 auto; height: 100%; }
.tooth-wheel-h .dp-item {
    flex: 0 0 auto; width: 40px; height: 100%; display: flex; align-items: center; justify-content: center;
    line-height: normal;
}
/* دندانِ انتخاب‌شده (وسطِ چرخ) با همان نشانِ L مشخص می‌شود — مثل بجِ دندان روی کارت‌ها. گزینه‌ی خالی نشانی نمی‌گیرد */
.tooth-wheel-h .dp-item.dp-selected:not(.dp-item-empty) {
    border-bottom: 2px solid var(--primary); border-inline-end: 2px solid var(--primary);
    border-radius: 0; padding-inline-end: 4px;
}
/* از نیمه‌ی دومِ فک (بعد از رسیدن دوباره به ۱ یا A) به بعد، نشانِ L آینه/برعکس می‌شود — طبقِ عکسِ مرجع */
.tooth-wheel-h .dp-item.dp-selected.dp-item-mirror:not(.dp-item-empty) {
    border-inline-end: none; border-inline-start: 2px solid var(--primary);
    padding-inline-end: 0; padding-inline-start: 4px;
}
.tooth-wheel-h .dp-item-empty { color: var(--muted); }
/* چرخِ فکِ پایین: نشانِ L به‌صورتِ عمودی برعکس است (خطِ افقی بالا، نه پایین) — چون این دندان‌ها زیرِ خط می‌ایستند */
.tooth-wheel-h.dp-row-flip-v .dp-item.dp-selected:not(.dp-item-empty) { border-bottom: none; border-top: 2px solid var(--primary); }

/* ردیفِ اقدام‌ها: بستن (ضربدر) و تأیید (تیک)، پایینِ پنجره کنارِ هم — نه گوشه‌های بالا.
   عمداً مربعی/رُندشده (مثلِ .btn، نه دایره) — همون شکلی که همه‌جای دیگرِ سایت برای دکمه‌ها استفاده می‌شود. */
.tooth-pick-actions { display: flex; align-items: center; justify-content: center; gap: 26px; margin-top: 16px; }
.tooth-pick-actions .timer-close {
    position: static; width: 40px; height: 40px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--line); color: var(--ink); padding: 0;
}
.tooth-pick-actions .timer-close svg { width: 18px; height: 18px; }
.tooth-pick-confirm {
    position: static; width: 40px; height: 40px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center; border: none; cursor: pointer; padding: 0;
    background: var(--primary); color: #fff;
    box-shadow: 0 3px 10px color-mix(in srgb, var(--primary) 45%, transparent);
}
.tooth-pick-confirm svg { width: 17px; height: 17px; display: block; }
.tooth-pick-confirm:active { filter: brightness(1.1); }

/* ---------- پنجره‌ی انتخاب خدمت: یک چرخِ اسکرولیِ عمودی، مثلِ تاریخ/تایمر ---------- */
.tag-wheel { width: 100%; min-width: 0; margin-top: 10px; }

/* پاپ‌آپ تنظیم تایمر */
.doc-timer-modal:not([hidden]) {
    /* z-index باید از photo-viewer (1100) بالاتر باشد — وگرنه وقتی از هدرِ داخلِ ویوئرِ تمام‌صفحه‌ی
       گالری باز می‌شود، پشتِ آن پنهان می‌ماند و انگار پنجره‌اش اصلاً باز نمی‌شود */
    display: flex; position: fixed; inset: 0; z-index: 1150; background: rgba(15,23,42,0.55);
    align-items: center; justify-content: center; padding: 16px;
}
.doc-timer-card {
    position: relative; background: var(--surface); border-radius: 20px; width: 100%; max-width: 340px;
    padding: 30px 18px 18px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); text-align: center;
}
.timer-close {
    position: absolute; top: 12px; left: 12px; background: none; border: none; cursor: pointer;
    color: var(--muted); padding: 4px; line-height: 0;
}
.timer-close svg { width: 20px; height: 20px; }
/* آیکونِ ساعت‌شنیِ بالای پاپ‌آپ — همان آیکونِ تایمر روی هدر */
.timer-modal-icon { display: flex; justify-content: center; margin-bottom: 10px; color: var(--primary); }
.timer-modal-icon svg { width: 30px; height: 30px; }

/* انتخابگر اسکرولی تایمر (چرخ‌های ثانیه/دقیقه) */
.timer-wheels { display: flex; align-items: flex-start; justify-content: center; gap: 8px; margin: 6px 0 16px; }
/* مهم: صفت hidden باید واقعاً پنهان کند (وگرنه حین شمارشِ تایمر، چرخ‌ها هم‌زمان با عددِ شمارش دیده می‌شدند) */
.timer-wheels[hidden] { display: none; }
.timer-wheel-col { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.timer-wheel-col label { font-size: 12px; color: var(--muted); font-weight: 700; }
.timer-wheel { width: 74px; height: 108px; }
.timer-wheel .dp-col-inner { padding: 36px 0; }
.timer-sep { font-size: 26px; font-weight: 800; color: var(--muted); align-self: center; margin-top: 14px; }

/* نمایشِ زنده‌ی شمارش معکوس (حالت اجرا/پاز) — جای چرخ‌های تنظیم را می‌گیرد */
.timer-countdown:not([hidden]) {
    font-size: 44px; font-weight: 800; color: var(--primary); text-align: center;
    letter-spacing: 1px; direction: ltr; margin: 18px 0 22px; font-variant-numeric: tabular-nums;
}

/* میان‌برها (زمان‌های پرکاربرد) — فقط ست می‌کنند */
.timer-presets { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.timer-presets[hidden] { display: none; }
.timer-presets button {
    padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
    color: var(--ink); font-family: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
}
.timer-presets button:active { background: color-mix(in srgb, var(--primary) 10%, var(--surface)); border-color: var(--primary); }

/* کنترل‌ها (فقط آیکون، چیدمان ثابت) */
.timer-controls { display: flex; gap: 12px; justify-content: center; }
.timer-ctrl {
    flex: none; width: 96px; height: 50px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface);
    color: var(--primary); display: flex; align-items: center; justify-content: center; cursor: pointer;
}
/* مهم: صفت hidden باید دکمه را واقعاً پنهان کند (display:flex وگرنه رویش سوار می‌شد) */
.timer-ctrl[hidden] { display: none; }
.timer-ctrl svg { width: 24px; height: 24px; }
.timer-ctrl.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.timer-ctrl.danger { color: #b91c1c; border-color: #fecaca; }
.timer-ctrl.danger:active { background: #fef2f2; }

/* ---------- خلاصه پرونده (نمای موبایلی) ---------- */
.doc-summary {
    flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 16px;
    padding: 6px 4px 10px; scrollbar-width: none;
}
.doc-summary::-webkit-scrollbar { width: 0; height: 0; display: none; }
.sum-top { display: flex; gap: 14px; align-items: flex-start; }
.sum-fields { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.sum-row { display: flex; gap: 10px; align-items: baseline; }
.sum-label { flex: 0 0 92px; font-size: 13px; font-weight: 700; color: var(--muted); }
.sum-val { flex: 1; min-width: 0; font-size: 15px; font-weight: 700; color: var(--ink); word-break: break-word; }
.sum-photo {
    flex: 0 0 96px; width: 96px; height: 112px; border: 1px solid var(--line); border-radius: 16px;
    overflow: hidden; display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--primary) 5%, white);
}
.sum-photo img { width: 100%; height: 100%; object-fit: cover; }
.sum-photo svg { width: 54%; height: 54%; color: color-mix(in srgb, var(--primary) 60%, var(--muted)); }
.sum-notes { display: flex; flex-direction: column; gap: 6px; }
.sum-notes p { margin: 0; font-size: 14px; color: var(--ink); line-height: 1.75; white-space: pre-line; }
.sum-alert {
    display: flex; gap: 12px; align-items: center;
    border: 1px solid #fecaca; background: #fef2f2; border-radius: 16px; padding: 14px 16px;
}
.sum-alert-icon { flex: 0 0 auto; color: #dc2626; line-height: 0; }
.sum-alert-icon svg { width: 40px; height: 40px; }
.sum-alert-list { flex: 1; min-width: 0; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.sum-alert-list li { font-size: 15px; font-weight: 700; color: #dc2626; display: flex; align-items: baseline; gap: 8px; word-break: break-word; }
.sum-alert-list li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #dc2626; flex: 0 0 auto; transform: translateY(-2px); }
.sum-debt {
    display: flex; align-items: center; gap: 10px; color: #dc2626; font-weight: 800; font-size: 15px;
    border: 1px solid #fecaca; background: #fef2f2; border-radius: 14px; padding: 12px 15px;
}
.sum-debt svg { width: 22px; height: 22px; flex-shrink: 0; }
.sum-actions { flex-shrink: 0; display: flex; gap: 12px; justify-content: flex-end; padding-top: 4px; }
.sum-actions .btn { flex: none; width: 72px; height: 48px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.sum-actions .btn svg { width: 24px; height: 24px; display: block; }

.doc-app-mid.doc-timer-running { color: var(--danger); animation: docTimerPulse 1s infinite; }
@keyframes docTimerPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

@media (max-width: 420px) {
    .doc-app-header { padding: 10px; }
    .doc-app-doc-text { gap: 4px; }
    .doc-app-doc-text b { font-size: 16px; }
    .doc-app-doc-text span { font-size: 12.5px; }
    .doc-app-tooth { width: 26px; height: 26px; }
    .doc-app-stat { font-size: 11.5px; }
}