/* ============================================================
   سامانه مراقبت سالمند — سیستم طراحی

   پالت و حس کلی هم‌خانواده با رنگیو: خاکستری-آبی آرام برای ساختار،
   و خاک‌رُسی گرم برای تأکید. رنگ‌های تند فقط برای وضعیت‌های واقعی
   (هشدار، تأخیر، درخواست کمک) نگه داشته شده‌اند تا معنا داشته باشند.

   هر نقش یک رنگ شاخص دارد؛ منوی بالا و نشانگرها با همان رنگ تم می‌شوند
   تا کاربر در یک نگاه بفهمد در کدام پنل است.
   ============================================================ */

:root {
    /* ساختار — فیروزه‌ای درمانی، همان خانواده رنگی سایت‌های مراقبت سلامت.
       خاکستری سرد قبلی برای یک محصول مراقبتی سرد و بی‌روح بود. */
    --pri: #0f766e;
    --pri-d: #0b5852;
    --pri-l: #15938a;
    --accent: #ee7b3d;
    --accent-d: #d0632a;
    --grad: linear-gradient(125deg, #0b5852 0%, #0f766e 42%, #1aa093 100%);

    /* متن و سطح */
    --ink: #1e293b;
    --soft: #64748b;
    --line: #e7ebf3;
    --bg: #f6f7fb;
    --card: #fff;
    --tint: #f1f4fa;

    /* وضعیت */
    --ok: #0f7b4f;
    --ok-bg: #e6f5ee;
    --warn: #b06a00;
    --warn-bg: #fdf3e2;
    --danger: #b3261e;
    --danger-bg: #fdecea;
    --info: #1d5fa8;
    --info-bg: #e8f1fb;

    /* شکل — کارت‌ها نرم‌تر و سایه‌دارتر شدند؛ قبلاً سایه تقریباً نامرئی بود
       و همه‌چیز شبیه یک پنل اداری تخت به نظر می‌رسید */
    /* نوار کناری تیره — تضاد با ناحیه محتوای روشن */
    --side-bg: #0d2b2a;
    --side-line: rgba(255,255,255,.08);

    --radius: 28px;
    --radius-sm: 22px;
    --radius-xs: 14px;
    --shadow: 0 18px 50px -20px rgba(15, 60, 70, .26);
    --shadow-sm: 0 1px 2px rgba(16, 40, 48, .05), 0 6px 18px -8px rgba(16, 40, 48, .16);

    /* رنگ شاخص نقش — در body بازنویسی می‌شود */
    --role: #3d4757;
    --role-d: #232b38;
    --role-soft: #eef1f6;
}

/* رنگ شاخص هر نقش */
body.role-elderly  { --role: #b7641f; --role-d: #8d4c15; --role-soft: #fdf1e5; }
body.role-family   { --role: #1d6a8f; --role-d: #14506d; --role-soft: #e8f3f8; }
body.role-caregiver{ --role: #1a6b4d; --role-d: #11523a; --role-soft: #e7f4ee; }
body.role-center   { --role: #0f766e; --role-d: #0b5852; --role-soft: #e6f4f2; }

/* ───────── پایه ───────── */
body {
    font-family: 'Vazirmatn', 'Segoe UI', Tahoma, sans-serif;
    background: var(--bg);
    color: var(--ink);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

/* کلاس‌های .h1 تا .h6 هم باید اینجا باشند: بوت‌استرپ روی آن‌ها وزن ۵۰۰
   می‌گذارد و چون کلاس بر انتخابگر عنصری غلبه دارد، عنوان‌هایی مثل
   <h1 class="h3"> کم‌رنگ و بی‌سلسله‌مراتب رندر می‌شدند. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.fw-bold, strong, b {
    font-weight: 700;
}

/* عنوان صفحه کمی درشت‌تر و با فاصله نفس‌کشیدن */
h1.h3, .page-title {
    font-size: 1.95rem;
    letter-spacing: -.015em;
    line-height: 1.45;
}

.num-fa {
    font-variant-numeric: tabular-nums;
}

a {
    text-decoration: none;
}

/* ───────── نوار بالا ───────── */
.notif-badge {
    position: absolute;
    top: .05rem;
    inset-inline-end: .02rem;
    font-size: .6rem;
    padding: .18em .42em;
}

/* ───────── منوی کشویی رنگی ───────── */
/* نشان آیکونِ رنگی کنار هر آیتم منو */
.menu-ico {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: var(--radius-xs);
    font-size: .95rem;
}

.menu-ico.c-slate  { background: #eef1f6; color: #3d4757; }
.menu-ico.c-blue   { background: #e8f1fb; color: #1d5fa8; }
.menu-ico.c-teal   { background: #e4f4f3; color: #0f6f68; }
.menu-ico.c-green  { background: #e7f4ee; color: #1a6b4d; }
.menu-ico.c-amber  { background: #fdf3e2; color: #a9690a; }
.menu-ico.c-clay   { background: #fdf1e5; color: #b7641f; }
.menu-ico.c-rose   { background: #fdecea; color: #b3261e; }
.menu-ico.c-violet { background: #f0ecfa; color: #5b45a8; }

.dropdown-header {
    font-size: .72rem;
    font-weight: 700;
    color: var(--soft);
    text-transform: none;
    padding: .45rem .6rem .25rem;
}

/* وقتی منو جمع است، به‌جای شناور آکاردئونی باز می‌شود.
   مرز باید با navbar-expand-xl یکی باشد وگرنه بین ۹۹۲ تا ۱۲۰۰ منوی
   جمع‌شده استایل شناور می‌گیرد و روی پس‌زمینه تیره ناخوانا می‌شود. */
/* ───────── نوار بازگشت و ساعت ───────── */

/* container-fluid گاتر خودش را دارد؛ با padding نوار جمع می‌شد و سرریز می‌کرد */
/* ───────── بدنه ───────── */

/* ───────── کارت ───────── */
.card {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    background: var(--card);
}

.card-header {
    background: var(--card);
    border-bottom: 1px solid var(--line);
    font-weight: 700;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0 !important;
    padding: .75rem 1rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.card-header > i:first-child {
    color: var(--role);
}

.stat-card {
    border-inline-start: 4px solid var(--role);
    transition: transform .12s ease, box-shadow .12s ease;
}

a:hover > .stat-card {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.stat-card .stat-value {
    font-size: 1.7rem;
    font-weight: 800;
    line-height: 1.2;
}

.stat-card .stat-label {
    color: var(--soft);
    font-size: .85rem;
}

.stat-card.ok { border-inline-start-color: var(--ok); }
.stat-card.warn { border-inline-start-color: var(--warn); }
.stat-card.danger { border-inline-start-color: var(--danger); }

/* ───────── دکمه ───────── */
.btn {
    border-radius: var(--radius-xs);
    /* ۶px×۱۲px پیش‌فرض بوت‌استرپ برای یک محصول مراقبتی خیلی ریز بود */
    padding: .55rem 1.15rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
}

.btn-primary {
    background: var(--role);
    border-color: var(--role);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background: var(--role-d);
    border-color: var(--role-d);
}

.btn-outline-primary {
    color: var(--role);
    border-color: var(--role);
}

.btn-outline-primary:hover,
.btn-outline-primary:active {
    background: var(--role);
    border-color: var(--role);
    color: #fff;
}

.btn-accent {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.btn-accent:hover {
    background: var(--accent-d);
    border-color: var(--accent-d);
    color: #fff;
}

/* ───────── جدول ───────── */
.table > :not(caption) > * > * {
    padding: .62rem .7rem;
}

.table thead th {
    background: var(--role-soft);
    color: var(--role-d);
    font-weight: 700;
    border-bottom: none;
    white-space: nowrap;
}

.table-hover tbody tr:hover {
    background: var(--tint);
}

/* ───────── نشانگر وضعیت ───────── */
.pill {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .16rem .62rem;
    border-radius: 1rem;
    font-size: .78rem;
    font-weight: 500;
    white-space: nowrap;
}

.pill-ok { background: var(--ok-bg); color: var(--ok); }
.pill-warn { background: var(--warn-bg); color: var(--warn); }
.pill-danger { background: var(--danger-bg); color: var(--danger); }
.pill-info { background: var(--info-bg); color: var(--info); }
.pill-muted { background: #f1f3f7; color: var(--soft); }

/* ───────── خط زمانی ───────── */
.timeline {
    position: relative;
    padding-inline-start: 1.2rem;
    border-inline-start: 2px solid var(--line);
}

.timeline-item {
    position: relative;
    padding-bottom: 1.1rem;
}

.timeline-item::before {
    content: '';
    position: absolute;
    inset-inline-start: -1.63rem;
    top: .35rem;
    width: .65rem;
    height: .65rem;
    border-radius: 50%;
    background: var(--role);
    border: 2px solid var(--card);
}

.timeline-item.alert-item::before { background: var(--danger); }

/* ───────── علائم حیاتی ───────── */
.vital-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: .7rem;
}

.vital {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-xs);
    padding: .7rem;
    text-align: center;
}

.vital .v-value {
    font-size: 1.3rem;
    font-weight: 800;
}

.vital .v-label {
    font-size: .78rem;
    color: var(--soft);
}

.vital.out-of-range {
    border-color: #f3b6b2;
    background: var(--danger-bg);
}

/* ───────── ضبط صدا ───────── */
.recorder {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}

.rec-dot {
    width: .7rem;
    height: .7rem;
    border-radius: 50%;
    background: var(--danger);
    animation: pulse 1.2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .25; }
}

/* ───────── هشدار درخواست کمک ───────── */
.help-banner {
    background: linear-gradient(100deg, #9e1f18, #c7402f);
    color: #fff;
    border-radius: var(--radius-sm);
    padding: 1rem 1.2rem;
    margin-bottom: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    animation: pulse-bg 2s infinite;
}

@keyframes pulse-bg {
    0%, 100% { box-shadow: 0 0 0 0 rgba(179, 38, 30, .45); }
    50% { box-shadow: 0 0 0 .6rem rgba(179, 38, 30, 0); }
}

/* ───────── حالت خالی ───────── */
.empty-state {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--soft);
}

.empty-state .icon {
    font-size: 2.6rem;
    line-height: 1;
    opacity: .35;
    display: block;
    margin-bottom: .6rem;
}

/* ───────── صفحه نخست ───────── */
.hero {
    background: var(--grad);
    color: #fff;
    border-radius: var(--radius);
    padding: 2.5rem 2rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow);
}

.hero h1 {
    font-weight: 800;
    font-size: clamp(1.5rem, 4vw, 2.3rem);
}

.hero .lead {
    color: rgba(255, 255, 255, .88);
    max-width: 46rem;
}

.feature-ico {
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: var(--radius-xs);
    background: var(--role-soft);
    color: var(--role);
    font-size: 1.3rem;
    margin-bottom: .7rem;
}

/* ───────── نقشه ───────── */
.app-map {
    height: 28rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    z-index: 0;                /* زیر نوار چسبان بماند */
}

.app-map.map-tall { height: 38rem; }
.app-map.map-short { height: 18rem; }

/* نشانگر: دایره رنگی با آیکون، هم‌خانواده با menu-ico */
.map-pin {
    display: grid;
    place-items: center;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 50%;
    color: #fff;
    font-size: .95rem;
    box-shadow: 0 2px 6px rgba(16, 24, 40, .35);
    border: 2px solid #fff;
}

.map-pin-wrap {
    background: none;
    border: none;
}

.map-popup {
    font-family: 'Vazirmatn', sans-serif;
    direction: rtl;
    text-align: right;
    min-width: 11rem;
}

.map-popup-badge {
    display: inline-block;
    color: #fff;
    border-radius: 1rem;
    padding: .08rem .55rem;
    font-size: .72rem;
    margin-bottom: .35rem;
}

.map-popup-body {
    color: var(--soft);
    font-size: .82rem;
    line-height: 1.8;
    margin-top: .2rem;
}

/* Leaflet پیش‌فرض چپ‌چین است */
.leaflet-container {
    font-family: 'Vazirmatn', sans-serif;
    direction: ltr;
}

.leaflet-popup-content {
    margin: .7rem .8rem;
}

.leaflet-control-layers {
    direction: rtl;
    text-align: right;
    font-family: 'Vazirmatn', sans-serif;
    border-radius: var(--radius-xs) !important;
}

.leaflet-control-attribution {
    font-family: 'Vazirmatn', sans-serif;
    font-size: .68rem;
}

.map-note,
.map-hint {
    font-size: .8rem;
    color: var(--soft);
    margin-top: .5rem;
    display: flex;
    align-items: center;
    gap: .35rem;
}

.map-hint {
    color: var(--role);
    font-weight: 500;
}

/* راهنمای رنگ‌ها زیر نقشه */
.map-legend {
    display: flex;
    gap: .9rem;
    flex-wrap: wrap;
    margin-top: .75rem;
    font-size: .82rem;
}

.map-legend span.dot {
    display: inline-block;
    width: .7rem;
    height: .7rem;
    border-radius: 50%;
    margin-inline-end: .3rem;
    vertical-align: middle;
}

/* قاب تصویر — جای عکس واقعی که بهزاد بعداً می‌گذارد */
.media-frame {
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--tint);
    border: 1px solid var(--line);
    aspect-ratio: 16 / 10;
    display: grid;
    place-items: center;
}

.media-frame > img,
.media-frame > svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* دکمه کوچک باید واقعاً کوچک بماند — padding پایه را خنثی می‌کند */
.btn-sm {
    padding: .3rem .7rem;
    font-size: .85rem;
}

.btn-lg {
    padding: .75rem 1.6rem;
    font-size: 1.05rem;
}

/* ============================================================
   پاس شکیل‌سازی — ۱۴۰۵/۰۷/۲۸

   سه ایراد اصلی که ظاهر را «اداری» می‌کرد:
   ۱. همه کارت‌ها یک وزن بصری داشتند، پس چشم نمی‌دانست کجا را نگاه کند
   ۲. فاصله‌ها یکنواخت و تنگ بود، صفحه نفس نمی‌کشید
   ۳. جدول‌ها و فرم‌ها استایل خام بوت‌استرپ داشتند
   ============================================================ */

/* ───────── ریتم عمودی ───────── */
/* ───────── سرصفحه صفحه ───────── */
/* عنوان و دکمه‌های عمل یک بلوک واحدند، نه دو چیز شناور */
.page-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    padding-bottom: 1.1rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--line);
}

.page-head .page-sub {
    color: var(--soft);
    font-size: .88rem;
    margin-top: .3rem;
}

/* ───────── کارت ───────── */
.card {
    transition: box-shadow .16s ease, transform .16s ease;
}

/* کارت‌هایی که لینک‌اند باید حس کلیک‌پذیری بدهند */
a > .card:hover,
.card-link:hover {
    box-shadow: 0 2px 4px rgba(16, 40, 48, .06), 0 12px 28px -10px rgba(16, 40, 48, .22);
    transform: translateY(-2px);
}

.card-header {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .85rem 1.1rem;
    font-size: .95rem;
    letter-spacing: -.005em;
}

.card-body {
    padding: 1.1rem;
}

/* ───────── کارت آمار ───────── */
/* عدد باید اول دیده شود، برچسب بعد — نه هم‌وزن */
.stat-card {
    border: none;
    border-inline-start: 3px solid var(--role);
    background: linear-gradient(180deg, #fff 0%, #fcfdfe 100%);
}

.stat-card .stat-value {
    font-size: 1.85rem;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.02em;
    color: var(--ink);
}

.stat-card .stat-label {
    font-size: .82rem;
    color: var(--soft);
    margin-top: .15rem;
}

.stat-card.ok     { border-inline-start-color: var(--ok); }
.stat-card.warn   { border-inline-start-color: var(--warn); }
.stat-card.danger { border-inline-start-color: var(--danger); }

/* ───────── جدول ───────── */
.table {
    --bs-table-border-color: var(--line);
    margin-bottom: 0;
}

.table > thead > tr > th {
    background: var(--tint);
    color: var(--soft);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .01em;
    text-transform: none;
    padding: .7rem 1.1rem;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}

.table > tbody > tr > td {
    padding: .85rem 1.1rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--line);
}

.table > tbody > tr:last-child > td {
    border-bottom: none;
}

.table-hover > tbody > tr:hover > * {
    background: var(--role-soft);
    --bs-table-accent-bg: transparent;
}

/* جدول داخل کارت نباید گوشه‌های کارت را بشکند */
.card > .table-responsive:last-child,
.card > .card-body.p-0 > .table-responsive {
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    overflow: hidden;
}

/* ───────── فرم ───────── */
.form-control,
.form-select {
    border-color: var(--line);
    border-radius: var(--radius-xs);
    padding: .55rem .8rem;
    font-size: .95rem;
    transition: border-color .14s ease, box-shadow .14s ease;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--role);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--role) 14%, transparent);
}

.form-label {
    font-size: .85rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: .35rem;
}

.form-text {
    font-size: .8rem;
    color: var(--soft);
}

.form-check-input:checked {
    background-color: var(--role);
    border-color: var(--role);
}

.form-check-input:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--role) 14%, transparent);
}

/* ───────── دکمه ───────── */
.btn-outline-primary {
    color: var(--role);
    border-color: color-mix(in srgb, var(--role) 35%, transparent);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background: var(--role);
    border-color: var(--role);
    color: #fff;
}

.btn:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--role) 22%, transparent);
}

/* ───────── نشان وضعیت ───────── */
.pill {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .22rem .65rem;
    border-radius: 2rem;
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

/* ───────── حالت خالی ───────── */
.empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--soft);
}

.empty-state .icon {
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 auto .9rem;
    border-radius: 50%;
    background: var(--role-soft);
    color: var(--role);
    font-size: 1.5rem;
}

.empty-state p {
    margin-bottom: .4rem;
    font-size: .95rem;
}

/* ───────── هشدار ───────── */
.alert {
    border: none;
    border-radius: var(--radius-sm);
    border-inline-start: 3px solid transparent;
    padding: .85rem 1.1rem;
    font-size: .92rem;
}

.alert-success { background: var(--ok-bg);     border-inline-start-color: var(--ok);     color: var(--ok); }
.alert-danger  { background: var(--danger-bg); border-inline-start-color: var(--danger); color: var(--danger); }
.alert-warning { background: var(--warn-bg);   border-inline-start-color: var(--warn);   color: var(--warn); }
.alert-info    { background: var(--info-bg);   border-inline-start-color: var(--info);   color: var(--info); }

/* ───────── فهرست ───────── */
.list-group-item {
    border-color: var(--line);
    padding: .85rem 1.1rem;
}

.list-group-item-action:hover {
    background: var(--role-soft);
}

/* ───────── پاورقی ───────── */

/* ───────── امتیازدهی ستاره‌ای ───────── */
/* ترتیب ستاره‌ها در markup معکوس است (۵ تا ۱) تا با سلکتور ~ بتوان
   ستاره‌های قبل از انتخاب‌شده را هم رنگی کرد — در RTL این یعنی راست به چپ */
.rating-row {
    display: inline-flex;
    flex-direction: row;
    gap: .2rem;
    font-size: 1.6rem;
}

.rating-row input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.rating-row label {
    color: var(--line);
    cursor: pointer;
    transition: color .12s ease, transform .12s ease;
}

.rating-row label:hover,
.rating-row label:hover ~ label,
.rating-row input:checked ~ label {
    color: #e8a317;
}

.rating-row label:hover {
    transform: scale(1.12);
}

.rating-row input:focus-visible + label {
    outline: 2px solid var(--role);
    outline-offset: 2px;
    border-radius: .3rem;
}

/* ستاره‌های نمایشی (فقط خواندنی) */
.stars {
    color: #e8a317;
    font-size: .9rem;
    margin-inline-start: .4rem;
}

/* ───────── ردیف نظر ───────── */
.review-item {
    padding: 1rem 0;
    border-bottom: 1px solid var(--line);
}

.review-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.center-reply {
    margin-top: .7rem;
    padding: .65rem .85rem;
    background: var(--role-soft);
    border-radius: var(--radius-xs);
    border-inline-start: 2px solid var(--role);
}

/* ───────── نوار وضعیت آفلاین ───────── */
/* پایین صفحه می‌نشیند نه بالا: نوار بالا چسبان است و پوشاندنش
   عنوان صفحه را از پرستار می‌گیرد */
.offline-banner {
    position: fixed;
    inset-inline: 1rem;
    bottom: 1rem;
    z-index: 1080;
    display: none;
    align-items: center;
    gap: .5rem;
    padding: .8rem 1.1rem;
    border-radius: var(--radius-sm);
    font-size: .9rem;
    font-weight: 600;
    box-shadow: var(--shadow);
}

.offline-banner.show {
    display: flex;
}

.offline-banner.tone-warn {
    background: var(--warn-bg);
    color: var(--warn);
    border: 1px solid color-mix(in srgb, var(--warn) 25%, transparent);
}

.offline-banner.tone-ok {
    background: var(--ok-bg);
    color: var(--ok);
    border: 1px solid color-mix(in srgb, var(--ok) 25%, transparent);
}

@media (min-width: 576px) {
    .offline-banner {
        inset-inline: auto 1.5rem;
        max-width: 26rem;
    }
}

/* ───────── تماس صوتی و تصویری ───────── */
.call-overlay {
    position: fixed;
    inset: 0;
    z-index: 1090;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(8, 20, 24, .78);
    backdrop-filter: blur(6px);
}

.call-overlay.show {
    display: flex;
}

.call-box {
    width: min(94vw, 34rem);
    background: var(--card);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
}

.call-head {
    padding: 1.1rem 1.3rem .7rem;
    text-align: center;
}

.call-peer {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
}

.call-state {
    display: block;
    color: var(--soft);
    font-size: .9rem;
    margin-top: .25rem;
    font-variant-numeric: tabular-nums;
}

.call-media {
    position: relative;
    background: #0b1a1e;
    aspect-ratio: 4 / 3;
}

.call-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* تصویر خودی کوچک در گوشه */
#callLocal {
    position: absolute;
    inset-block-end: .7rem;
    inset-inline-end: .7rem;
    width: 7rem;
    height: auto;
    aspect-ratio: 3 / 4;
    border-radius: var(--radius-xs);
    border: 2px solid rgba(255, 255, 255, .7);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .4);
}

.call-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    padding: 1.1rem;
}

.call-btn {
    display: grid;
    place-items: center;
    width: 3.4rem;
    height: 3.4rem;
    border-radius: 50%;
    border: none;
    color: #fff;
    font-size: 1.3rem;
    transition: transform .12s ease, filter .12s ease;
}

.call-btn:hover {
    transform: scale(1.06);
}

.call-accept { background: var(--ok); }
.call-end    { background: var(--danger); }
.call-mute   { background: var(--soft); }
.call-mute.is-off { background: var(--warn); }

/* دکمه تماس در فهرست مخاطبان */
.btn-call {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

/* پنل سالمند: دکمه‌های تماس درشت‌تر */
.elderly-mode .call-btn {
    width: 4.4rem;
    height: 4.4rem;
    font-size: 1.7rem;
}

.elderly-mode .call-peer {
    font-size: 1.55rem;
}

/* ═══════════════════════════════════════════════════════════
   نمودار روند
   ═══════════════════════════════════════════════════════════ */

.trend-box {
    position: relative;
}

.trend-svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
}

.trend-grid {
    stroke: #e8ecf1;
    stroke-width: 1;
    stroke-dasharray: 3 4;
}

.trend-axis {
    stroke: #cfd6de;
    stroke-width: 1;
}

.trend-tick {
    font-size: .68rem;
    fill: var(--soft);
}

.trend-legend {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1rem;
    margin-top: .6rem;
    font-size: .82rem;
    color: var(--soft);
}

.trend-legend-item {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.trend-legend-item i {
    width: .8rem;
    height: .8rem;
    border-radius: 50%;
    display: inline-block;
}

.chart-empty {
    padding: 2.4rem 1rem;
    text-align: center;
    color: var(--soft);
    font-size: .9rem;
    background: #fafbfc;
    border-radius: var(--r-md);
    border: 1px dashed #e2e7ec;
}

/* ─── بازه علائم حیاتی: نشان‌دادن انحراف در جدول ─── */

.vital-cell {
    display: inline-flex;
    align-items: baseline;
    gap: .35rem;
    white-space: nowrap;
}

.vital-out {
    color: var(--danger);
    font-weight: 700;
}

.vital-out-low::after,
.vital-out-high::after {
    font-family: bootstrap-icons;
    font-size: .8em;
    margin-inline-start: .15rem;
    vertical-align: .05em;
}

.vital-out-low::after {
    /* bi-arrow-down-short */
    content: "\f124";
}

.vital-out-high::after {
    /* bi-arrow-up-short */
    content: "\f145";
}

.vital-ok {
    color: var(--ok);
}

/* ═══════════════════════════════════════════════════════════
   دسترس‌پذیری — بزرگ‌نمایی، کنتراست، حرکت کمتر
   اندازه پایه روی ریشه عوض می‌شود تا کل چیدمان با متن بزرگ شود،
   نه فقط خودِ متن که بعد از کادرش بیرون می‌زند.
   ═══════════════════════════════════════════════════════════ */

html.a11y-contrast {
    --ink: #000;
    --soft: #3a4149;
}

html.a11y-contrast .card,
html.a11y-contrast .table,
html.a11y-contrast .form-control,
html.a11y-contrast .form-select {
    border-color: #4a5560 !important;
}

html.a11y-contrast .text-muted {
    color: #3a4149 !important;
}

html.a11y-contrast .pill {
    outline: 1px solid currentColor;
}

html.a11y-motion *,
html.a11y-motion *::before,
html.a11y-motion *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
}

html.a11y-touch .btn,
html.a11y-touch .form-control,
html.a11y-touch .form-select {
    min-height: 3rem;
    font-size: 1.05rem;
}

html.a11y-touch .side-link {
    padding-block: .85rem;
}

html.a11y-touch .table td,
html.a11y-touch .table th {
    padding-block: .9rem;
}

/* نوار تنظیم دسترس‌پذیری در بالای صفحه تنظیمات */
.a11y-preview {
    border: 1px solid #e2e7ec;
    border-radius: var(--r-md);
    padding: 1rem 1.15rem;
    background: #fafbfc;
}

/* ═══════════════════════════════════════════════════════════
   دکمه نمایش گذرواژه
   ═══════════════════════════════════════════════════════════ */

.pw-group {
    /* گوشه گرد input-group در راست‌چین خودش درست می‌شود؛
       این فقط برای هم‌ارتفاع ماندن دکمه با فیلد است */
    flex-wrap: nowrap;
}

.pw-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3rem;
    color: var(--soft);
    border-color: #d7dde3;
}

.pw-toggle:hover,
.pw-toggle:focus {
    color: var(--pri);
    background: #f3f6f8;
    border-color: #c6ced6;
}

.pw-toggle.is-on {
    color: var(--pri);
    background: var(--pri-bg, #eaf4f3);
}

html.a11y-touch .pw-toggle {
    min-width: 3.4rem;
}

/* ═══════════════════════════════════════════════════════════
   عکس واقعی کاربر، و جای‌گزین حرفی

   جای‌گزین عمداً حرف است نه آدمک خاکستری: آدمک همه را شبیه هم
   می‌کند و در فهرست بیست‌نفره هیچ کمکی به تشخیص نمی‌کند.
   ═══════════════════════════════════════════════════════════ */

.avatar {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    object-fit: cover;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background: #eef1f4;
    border: 1px solid rgba(0, 0, 0, .06);
    overflow: hidden;
}

.avatar-sm { width: 2rem;   height: 2rem;   font-size: .72rem; }
.avatar-lg { width: 4rem;   height: 4rem;   font-size: 1.15rem; }
.avatar-xl { width: 6.5rem; height: 6.5rem; font-size: 1.8rem; }

.avatar-letter {
    font-weight: 700;
    font-size: .82rem;
    letter-spacing: -.02em;
    color: #fff;
    user-select: none;
}

/* پالت هم‌خانواده رنگ‌های نقشه: سیر و کم‌اشباع، تا در کنار هم
   شلوغ نشود و متن سفید رویشان خوانا بماند */
.avatar-letter.tone-0 { background: #0f6f68; }
.avatar-letter.tone-1 { background: #1d5fa8; }
.avatar-letter.tone-2 { background: #1a6b4d; }
.avatar-letter.tone-3 { background: #a9690a; }
.avatar-letter.tone-4 { background: #b7641f; }
.avatar-letter.tone-5 { background: #8d3f74; }
.avatar-letter.tone-6 { background: #5b45a8; }
.avatar-letter.tone-7 { background: #3d4757; }

/* کادر انتخاب و پیش‌نمایش عکس */
.photo-picker {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.photo-picker .avatar {
    box-shadow: 0 2px 10px rgba(16, 24, 32, .08);
}

.photo-hint {
    font-size: .8rem;
    color: var(--soft);
}

html.a11y-contrast .avatar {
    border-color: #4a5560;
}

/* عکس واقعی در نوار بالا — همان اندازه و شکل حرفِ جایگزین */
.user-avatar-img {
    object-fit: cover;
    padding: 0;
}

/* قاب عکس اصلی صفحه نخست — نسبت ثابت تا با عوض‌شدن عکس،
   چیدمان بالا و پایین نپرد */
.hero-frame {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .2);
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.hero-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}