/* ============================================================================
   کاغذ درمانگاهی — زبان بصری سیستم کش‌لس
   کاغذ گرم، خطوط مویی، سبز پزشکی، دکمه‌های ضخیم لمسی، فضای سفید سخاوتمند.
   بدون سایه‌های شناور، بدون گرادیان، بدون رنگ تزیینی.
   ========================================================================= */

@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 {
    /* کاغذ */
    --paper: #FBFAF7;
    --paper-sunk: #F4F2ED;
    --paper-raised: #FFFFFF;

    /* مرکب */
    --ink: #1C1F1E;
    --ink-soft: #55605B;
    --ink-faint: #8A948F;

    /* خطوط مویی */
    --rule: #E3DFD6;
    --rule-strong: #C9C3B6;

    /* سبز پزشکی — تنها رنگ تأکید */
    --green: #0F7A5A;
    --green-dark: #0A5B43;
    --green-wash: #E8F2EE;

    /* فقط برای معنا، نه تزیین */
    --danger: #A8322A;
    --danger-wash: #F7EBEA;
    --warn: #8A6212;
    --warn-wash: #FAF2E0;

    --radius: 10px;
    --radius-sm: 6px;

    /* هدف لمسی روی تبلت: هرگز کمتر از این */
    --touch: 56px;

    --shell-max: 1400px;
}

* {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: 'Vazirmatn', 'Segoe UI', Tahoma, sans-serif;
    font-size: 15px;
    line-height: 1.7;
    direction: rtl;
    -webkit-font-smoothing: antialiased;
}

/* اعداد همیشه جدولی تا ستون مبالغ تکان نخورد */
.num,
td.num,
.money,
input[type="number"],
input[inputmode="numeric"] {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    letter-spacing: 0;
}

h1, h2, h3, h4 {
    margin: 0 0 .6rem;
    font-weight: 700;
    line-height: 1.4;
}

h1 { font-size: 1.5rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.05rem; }

a {
    color: var(--green-dark);
    text-decoration: none;
}

a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- اسکلت صفحه */

.shell {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: 232px;
    flex-shrink: 0;
    background: var(--paper-sunk);
    border-inline-start: 1px solid var(--rule);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.sidebar-brand {
    padding: 1.1rem 1.1rem .9rem;
    border-bottom: 1px solid var(--rule);
}

.sidebar-brand .mark {
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -.01em;
}

.sidebar-brand .sub {
    font-size: .78rem;
    color: var(--ink-faint);
}

.nav-section {
    padding: .9rem 0 .3rem;
}

.nav-section > .label {
    padding: 0 1.1rem .35rem;
    font-size: .72rem;
    color: var(--ink-faint);
    letter-spacing: .03em;
}

.nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .62rem 1.1rem;
    color: var(--ink-soft);
    border-inline-start: 3px solid transparent;
    font-size: .93rem;
}

.nav-link:hover {
    background: rgba(15, 122, 90, .05);
    color: var(--ink);
    text-decoration: none;
}

.nav-link.active {
    background: var(--paper-raised);
    color: var(--green-dark);
    border-inline-start-color: var(--green);
    font-weight: 500;
}

.nav-link .count {
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    background: var(--danger);
    color: #fff;
    font-size: .72rem;
    display: grid;
    place-items: center;
    font-variant-numeric: tabular-nums;
}

.sidebar-foot {
    margin-top: auto;
    padding: .9rem 1.1rem;
    border-top: 1px solid var(--rule);
    font-size: .82rem;
    color: var(--ink-faint);
}

.main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* دکمه منو و پرده پشت آن؛ فقط روی صفحه‌های باریک دیده می‌شوند */

.nav-toggle {
    display: none;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius-sm);
    background: var(--paper-raised);
    color: var(--ink);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
}

.nav-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(28, 31, 30, .45);
    z-index: 40;
}

.topbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .75rem 1.4rem;
    background: var(--paper-raised);
    border-bottom: 1px solid var(--rule);
    position: sticky;
    top: 0;
    z-index: 20;
}

.topbar .title {
    font-weight: 700;
    font-size: 1.05rem;
}

.topbar .spacer { flex: 1; }

.topbar .meta {
    font-size: .84rem;
    color: var(--ink-soft);
    display: flex;
    align-items: center;
    gap: 1rem;
}

.content {
    padding: 1.4rem;
    max-width: var(--shell-max);
    width: 100%;
}

/* ---------------------------------------------------------------- کارت و جعبه */

.card {
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    margin-bottom: 1.2rem;
}

.card > header {
    padding: .85rem 1.1rem;
    border-bottom: 1px solid var(--rule);
    display: flex;
    align-items: center;
    gap: .8rem;
}

.card > header h2,
.card > header h3 {
    margin: 0;
    font-size: 1rem;
}

.card > header .spacer { flex: 1; }

.card-body { padding: 1.1rem; }

/*
   جدول‌ها همیشه داخل یک ناحیه اسکرول افقی می‌نشینند تا روی گوشی، ستون‌های
   زیاد باعث بیرون‌زدن کل صفحه نشوند. بدنه صفحه هرگز نباید افقی اسکرول شود.
*/
.card-body.tight {
    padding: 0;
    overflow-x: auto;
}

/*
   چیدمان دوستونی که خودش روی صفحه باریک تک‌ستونی می‌شود.
   جای گریدهای سفت‌شده «1fr 1fr» را گرفته که روی موبایل می‌شکستند.
*/
.split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    gap: 1.2rem;
    align-items: start;
}

/* دوستونی نامتقارن: ستون فرعی زیر ستون اصلی می‌رود */
.split-aside {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: 1.2rem;
    align-items: start;
}

@media (max-width: 1100px) {
    .split-aside { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------- کاشی آمار */

.stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1px;
    background: var(--rule);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 1.2rem;
}

.stat {
    background: var(--paper-raised);
    padding: 1rem 1.1rem;
}

.stat .label {
    font-size: .8rem;
    color: var(--ink-faint);
    margin-bottom: .3rem;
}

.stat .value {
    font-size: 1.5rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.25;
}

.stat .unit {
    font-size: .82rem;
    font-weight: 400;
    color: var(--ink-faint);
    margin-inline-start: .25rem;
}

.stat.alert .value { color: var(--danger); }
.stat.good .value { color: var(--green); }

/* ---------------------------------------------------------------- دکمه */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 42px;
    padding: .5rem 1.1rem;
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius-sm);
    background: var(--paper-raised);
    color: var(--ink);
    font: inherit;
    font-weight: 500;
    cursor: pointer;
    transition: background .12s, border-color .12s;
    text-decoration: none;
}

.btn:hover {
    background: var(--paper-sunk);
    text-decoration: none;
}

.btn:active { transform: translateY(1px); }

.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: .45;
    cursor: not-allowed;
    pointer-events: none;
}

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

.btn-primary:hover { background: var(--green-dark); border-color: var(--green-dark); }

.btn-danger {
    background: var(--paper-raised);
    border-color: var(--danger);
    color: var(--danger);
}

.btn-danger:hover { background: var(--danger-wash); }

.btn-sm { min-height: 34px; padding: .25rem .7rem; font-size: .85rem; }

.btn-lg { min-height: var(--touch); padding: .8rem 1.6rem; font-size: 1.05rem; }

.btn-block { width: 100%; }

/* ---------------------------------------------------------------- فرم */

.field { margin-bottom: 1rem; }

.field > label {
    display: block;
    font-size: .86rem;
    color: var(--ink-soft);
    margin-bottom: .32rem;
    font-weight: 500;
}

.field .hint {
    font-size: .78rem;
    color: var(--ink-faint);
    margin-top: .3rem;
}

input[type="text"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="search"],
select,
textarea {
    width: 100%;
    min-height: 42px;
    padding: .5rem .7rem;
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius-sm);
    background: var(--paper-raised);
    color: var(--ink);
    font: inherit;
}

input:focus,
select:focus,
textarea:focus {
    outline: 2px solid var(--green);
    outline-offset: -1px;
    border-color: var(--green);
}

textarea { min-height: 84px; resize: vertical; }

select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%),
                      linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
    background-position: left 1rem top 50%, left .7rem top 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-inline-start: 2rem;
}

.field-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0 1rem;
}

.check {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: 42px;
    cursor: pointer;
}

.check input {
    width: 20px;
    height: 20px;
    min-height: 0;
    accent-color: var(--green);
    cursor: pointer;
}

/* ---------------------------------------------------------------- جدول */

.table-wrap {
    overflow-x: auto;
    border-radius: var(--radius);
}

table.grid {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}

table.grid th {
    text-align: right;
    font-weight: 500;
    font-size: .82rem;
    color: var(--ink-soft);
    padding: .6rem .8rem;
    background: var(--paper-sunk);
    border-bottom: 1px solid var(--rule-strong);
    white-space: nowrap;
}

table.grid td {
    padding: .6rem .8rem;
    border-bottom: 1px solid var(--rule);
    vertical-align: middle;
}

table.grid tbody tr:hover { background: rgba(15, 122, 90, .035); }

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

table.grid tfoot td {
    padding: .7rem .8rem;
    background: var(--paper-sunk);
    border-top: 2px solid var(--rule-strong);
    font-weight: 700;
}

td.num, th.num { text-align: left; direction: ltr; }

.empty {
    padding: 3rem 1rem;
    text-align: center;
    color: var(--ink-faint);
}

/* ---------------------------------------------------------------- برچسب وضعیت */

.tag {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .12rem .5rem;
    border-radius: 4px;
    font-size: .78rem;
    font-weight: 500;
    white-space: nowrap;
    border: 1px solid transparent;
}

.tag::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.tag-ok { background: var(--green-wash); color: var(--green-dark); border-color: #C3DFD5; }
.tag-bad { background: var(--danger-wash); color: var(--danger); border-color: #E8CFCD; }
.tag-warn { background: var(--warn-wash); color: var(--warn); border-color: #E8DBB8; }
.tag-mute { background: var(--paper-sunk); color: var(--ink-faint); border-color: var(--rule); }

/* ---------------------------------------------------------------- پیام */

.alert {
    padding: .8rem 1rem;
    border-radius: var(--radius-sm);
    border: 1px solid;
    margin-bottom: 1rem;
    font-size: .92rem;
}

.alert-ok { background: var(--green-wash); border-color: #C3DFD5; color: var(--green-dark); }
.alert-bad { background: var(--danger-wash); border-color: #E8CFCD; color: var(--danger); }
.alert-warn { background: var(--warn-wash); border-color: #E8DBB8; color: var(--warn); }

/* ---------------------------------------------------------------- صفحه‌بندی */

.pager {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .8rem 1.1rem;
    border-top: 1px solid var(--rule);
    font-size: .86rem;
    color: var(--ink-soft);
    flex-wrap: wrap;
}

.pager .spacer { flex: 1; }

/* ---------------------------------------------------------------- عیب‌یابی کارتخوان */

.diag {
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    background: var(--paper);
    padding: .9rem 1rem;
    margin-top: .8rem;
}

.diag-running { color: var(--ink-soft); font-size: .9rem; }

.diag-head {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    flex-wrap: wrap;
    font-weight: 700;
    font-size: 1rem;
    padding-bottom: .6rem;
    border-bottom: 1px solid var(--rule);
}

.diag-head.ok { color: var(--green-dark); }
.diag-head.bad { color: var(--danger); }

.diag-target {
    font-weight: 400;
    font-size: .82rem;
    color: var(--ink-faint);
    font-variant-numeric: tabular-nums;
}

.diag-steps {
    list-style: none;
    margin: .6rem 0 0;
    padding: 0;
    display: grid;
    gap: .45rem;
}

.diag-step {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: .5rem;
    font-size: .88rem;
    line-height: 1.6;
}

.diag-icon {
    width: 20px;
    height: 20px;
    margin-top: .15rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: .72rem;
    font-weight: 700;
}

.diag-step.ok .diag-icon { background: var(--green-wash); color: var(--green-dark); }
.diag-step.warn .diag-icon { background: var(--warn-wash); color: var(--warn); }
.diag-step.bad .diag-icon { background: var(--danger-wash); color: var(--danger); }
.diag-step.mute .diag-icon { background: var(--paper-sunk); color: var(--ink-faint); }

.diag-sub {
    margin-top: .9rem;
    font-weight: 700;
    font-size: .9rem;
}

.diag-actions {
    margin: .4rem 0 0;
    padding-inline-start: 1.3rem;
    display: grid;
    gap: .35rem;
    font-size: .88rem;
    line-height: 1.7;
}

.diag-meta {
    margin-top: .6rem;
    font-size: .78rem;
    color: var(--ink-faint);
}

/* ---------------------------------------------------------------- ورود */

.login-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    background:
        repeating-linear-gradient(0deg, transparent 0 31px, var(--rule) 31px 32px),
        var(--paper);
}

.login-card {
    width: 100%;
    max-width: 400px;
    background: var(--paper-raised);
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius);
    padding: 1.8rem;
}

.login-card .brand {
    text-align: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1.2rem;
    border-bottom: 1px solid var(--rule);
}

.login-card .brand .mark {
    font-size: 1.3rem;
    font-weight: 700;
}

.login-card .brand .sub {
    font-size: .85rem;
    color: var(--ink-faint);
}

/* ---------------------------------------------------------------- واکنش‌گرا */

/* تبلت افقی: منو باریک‌تر، فاصله‌ها جمع‌تر */
@media (max-width: 1180px) {
    .sidebar { width: 200px; }
    .content { padding: 1.1rem; }
    .topbar { padding: .7rem 1.1rem; }
}

/*
   تبلت عمودی و موبایل: منوی کناری به کشوی روی‌هم‌افتاده تبدیل می‌شود.
   بدون این، ۲۳۲ پیکسل منو از عرض صفحه گوشی می‌زد بیرون و جدول‌ها له می‌شدند.
*/
@media (max-width: 900px) {
    .nav-toggle { display: inline-flex; }

    .sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        right: 0;
        width: 270px;
        max-width: 84vw;
        height: 100dvh;
        z-index: 50;
        border-inline-start: 1px solid var(--rule-strong);

        /*
           باز و بسته بودن کشو فقط به یک کلاس وابسته است، نه به پایان یافتن انیمیشن.
           visibility بدون transition عوض می‌شود تا اگر انیمیشن اجرا نشود (وب‌ویو قدیمی،
           صفحه در پس‌زمینه، حالت کم‌مصرف) کشوی بسته نه دیده شود و نه با انگشت یا Tab
           قابل دسترسی باشد. باز شدن با لغزش انیمیت می‌شود؛ بسته شدن آنی است.
        */
        transform: translateX(100%);
        visibility: hidden;
        transition: transform .2s ease-out;
    }

    .shell.nav-open .sidebar {
        transform: none;
        visibility: visible;
    }

    .shell.nav-open .nav-backdrop { display: block; }

    .main { width: 100%; }

    .topbar .meta { font-size: .78rem; gap: .6rem; }
    .content { padding: .9rem; }

    /* عنوان صفحه نباید نوار بالا را بشکند */
    .topbar .title {
        font-size: .98rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
    }
}

/* موبایل */
@media (max-width: 640px) {
    body { font-size: 14px; }

    .content { padding: .7rem; }
    .card { margin-bottom: .9rem; }
    .card-body { padding: .9rem; }
    .card > header { padding: .75rem .9rem; flex-wrap: wrap; gap: .5rem; }

    /* تاریخ کامل روی گوشی جا نمی‌شود */
    .topbar .meta { display: none; }

    .stat-row { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
    .stat { padding: .8rem .9rem; }
    .stat .value { font-size: 1.25rem; }

    .split { grid-template-columns: minmax(0, 1fr); }

    /* دکمه‌ها روی گوشی تمام‌عرض تا با انگشت خطا نخورد */
    .card-body > form > .btn,
    .card-body > .btn { width: 100%; }

    table.grid { font-size: .84rem; }
    table.grid th, table.grid td { padding: .5rem .55rem; }

    .pager { padding: .7rem .8rem; font-size: .8rem; }
    .pager .btn-sm { min-height: 38px; min-width: 38px; }

    .login-card { padding: 1.2rem; }
}

/*
   دستگاه لمسی: هدف‌های کوچک بزرگ می‌شوند.
   این با عرض صفحه سنجیده نمی‌شود بلکه با نوع اشاره‌گر، چون تبلت ۱۰ اینچ افقی
   عرض دسکتاپ دارد ولی با انگشت کار می‌کند.
*/
@media (pointer: coarse) {
    .btn-sm {
        min-height: 40px;
        padding-inline: .8rem;
    }

    .check input { width: 22px; height: 22px; }

    /* فاصله سطرهای جدول کمی باز می‌شود تا لینک‌ها به هم نچسبند */
    table.grid td { padding-block: .7rem; }
}

/* احترام به تنظیم «کاهش حرکت» سیستم‌عامل */
@media (prefers-reduced-motion: reduce) {
    .sidebar,
    .btn,
    .k-item { transition: none !important; }

    .pay-bar i { animation: none !important; width: 100% !important; }
}

/* ---------------------------------------------------------------- چاپ */

@media print {
    .sidebar, .topbar, .no-print, .pager, .nav-toggle, .nav-backdrop { display: none !important; }
    body { background: #fff; font-size: 11pt; }
    .card { border: none; margin: 0; }
    .content { padding: 0; }
    table.grid { font-size: 10pt; }
}