/* ==========================================================================
   میز خدمت فناوری اطلاعات — بیمارستان نیمه شعبان
   زبان بصری: مدرن و نرم (One UI): پس‌زمینهٔ خاکستری روشن، کارت‌های گردِ بزرگ،
   سایهٔ نرم به‌جای خط، نوارهای شناور، رنگ‌های پاستلی، فضای تنفس زیاد.
   ========================================================================== */

:root {
    --bg:          #eef1f8;
    --surface:     #ffffff;
    --surface-2:   #f4f6fc;
    --surface-3:   #e8ecf6;

    --ink:         #131c33;
    --ink-2:       #56617a;
    --ink-3:       #8d96ab;

    --line:        #e7ebf4;

    /* سرمه‌ای نشان بیمارستان */
    --brand:       #12295c;
    --brand-600:   #1c3d82;
    --brand-500:   #2f62c4;
    --brand-tint:  #e2eaff;

    /* زرد نشان بیمارستان */
    --gold:        #ffd400;
    --gold-tint:   #fff3c2;

    /* رنگ‌های معنایی — تینت‌ها کمی پررنگ‌تر تا صفحه زنده باشد */
    --blue:        #2b7fff;   --blue-t:    #ddeaff;
    --cyan:        #06a6e0;   --cyan-t:    #d6f1fc;
    --green:       #0bbd7f;   --green-t:   #d6f6ea;
    --amber:       #fb9c0c;   --amber-t:   #ffeed2;
    --red:         #f4544d;   --red-t:     #ffe1e0;
    --violet:      #8b5cf6;   --violet-t:  #eae2fe;
    --slate:       #7e8aa3;   --slate-t:   #e7eaf3;
    --pink:        #f472b6;   --pink-t:    #ffe2f0;

    --r-xl: 26px;
    --r-lg: 20px;
    --r-md: 14px;
    --r-sm: 10px;

    --sh-1: 0 1px 2px rgba(20,32,70,.05), 0 6px 18px rgba(20,32,70,.07);
    --sh-2: 0 3px 8px rgba(20,32,70,.08), 0 16px 34px rgba(20,32,70,.12);
}

* { font-family: Vazirmatn, "Segoe UI", Tahoma, sans-serif; }
.bi::before, [class^="bi-"]::before, [class*=" bi-"]::before { font-family: bootstrap-icons !important; }

body {
    --bs-body-font-family: Vazirmatn, "Segoe UI", Tahoma, sans-serif;
    font-family: Vazirmatn, "Segoe UI", Tahoma, sans-serif;
    background: var(--bg);
    color: var(--ink);
    font-size: 14px;
    margin: 0;
    -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #d5dae4; border-radius: 20px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #bfc6d4; background-clip: content-box; }

/* ── چیدمان ─────────────────────────────────────────────────── */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
    width: 260px; flex: 0 0 260px;
    background: var(--surface);
    display: flex; flex-direction: column;
    position: sticky; top: 0; height: 100vh;
    z-index: 1040;
}

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

/* ── نشان و نام ─────────────────────────────────────────────── */
.brand { display: flex; align-items: center; gap: .7rem; padding: 1.35rem 1.1rem .9rem; }

.brand-mark {
    width: 46px; height: 46px; flex: 0 0 46px;
    border-radius: 15px;
    display: grid; place-items: center;
    background: var(--surface-2);
    padding: 5px;
}
.brand-mark.lg { width: 104px; height: 104px; flex: 0 0 104px; border-radius: 32px; padding: 12px; background: #fff; box-shadow: var(--sh-1); }

.brand-text { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.brand-text strong { font-size: .96rem; font-weight: 800; letter-spacing: -.02em; }
.brand-text small { font-size: .73rem; color: var(--ink-3); }

/* ── منو ────────────────────────────────────────────────────── */
.side-nav { padding: .4rem .7rem 1rem; overflow-y: auto; flex: 1 1 auto; }

.side-nav .nav-link {
    display: flex; align-items: center; gap: .7rem;
    color: var(--ink-2);
    padding: .68rem .85rem;
    border-radius: var(--r-md);
    font-size: .875rem; font-weight: 600;
    margin-bottom: 3px;
    transition: background .16s, color .16s;
}
.side-nav .nav-link i { font-size: 1.1rem; width: 22px; text-align: center; color: var(--ink-3); transition: color .16s; }
.side-nav .nav-link:hover { background: var(--surface-2); color: var(--ink); }
.side-nav .nav-link:hover i { color: var(--ink-2); }

.side-nav .nav-link.active {
    background: linear-gradient(135deg, var(--brand-500), var(--brand-600));
    color: #fff;
    font-weight: 800;
    box-shadow: 0 5px 14px rgba(28,61,130,.28);
}
.side-nav .nav-link.active i { color: var(--gold); }

.nav-title {
    color: var(--ink-3); font-size: .7rem; font-weight: 700;
    padding: 1.1rem .85rem .4rem; letter-spacing: .02em;
}
.nav-sep { height: 1px; background: var(--line); margin: .8rem .85rem; border: 0; }

.side-foot { padding: .9rem 1.2rem; color: var(--ink-3); font-size: .72rem; line-height: 1.9; }

/* ── نوار بالا (شناور) ──────────────────────────────────────── */
.topbar {
    background: transparent;
    padding: 1.15rem 1.4rem .5rem;
    display: flex; align-items: center; gap: .9rem;
    position: sticky; top: 0; z-index: 1030;
    backdrop-filter: blur(10px);
}

.page-title {
    font-size: 1.55rem; font-weight: 800; margin: 0; flex: 1 1 auto;
    letter-spacing: -.03em;
}

.topbar-actions {
    display: flex; align-items: center; gap: .3rem;
    background: var(--surface);
    border-radius: 100px;
    padding: .3rem;
    box-shadow: var(--sh-1);
}

.btn-icon, .btn-bell {
    background: transparent; border: 0;
    width: 40px; height: 40px; border-radius: 50%;
    display: inline-grid; place-items: center;
    color: var(--ink-2); font-size: 1.2rem;
    transition: background .15s;
}
.btn-icon:hover, .btn-bell:hover { background: var(--surface-2); color: var(--brand); }

.btn-user {
    display: flex; align-items: center; gap: .55rem;
    background: transparent; border: 0;
    border-radius: 100px; padding: .2rem .7rem .2rem .3rem;
    color: var(--ink);
}
.btn-user:hover { background: var(--surface-2); }
.avatar {
    width: 34px; height: 34px; border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-500), var(--brand));
    color: #fff;
    display: grid; place-items: center; font-weight: 700; font-size: .9rem;
    box-shadow: 0 3px 9px rgba(47,98,196,.35);
}
.user-name { display: block; font-size: .82rem; font-weight: 700; line-height: 1.2; }
.user-role { display: block; font-size: .68rem; color: var(--ink-3); }

/* ── اعلان‌ها ───────────────────────────────────────────────── */
.notif-menu {
    width: 360px; padding: .4rem; background: var(--surface);
    border: 0; border-radius: var(--r-lg); overflow: hidden;
    box-shadow: var(--sh-2);
}
.notif-list { max-height: 400px; overflow-y: auto; }
.notif-item {
    display: flex; gap: .7rem; width: 100%; text-align: right;
    background: transparent; border: 0; border-radius: var(--r-md);
    padding: .7rem .75rem; margin-bottom: 2px;
}
.notif-item:hover { background: var(--surface-2); }
.notif-item.unread { background: var(--brand-tint); }
.notif-item.unread .notif-title { font-weight: 800; }
.notif-icon {
    font-size: 1rem; width: 36px; height: 36px; flex: 0 0 36px;
    border-radius: 50%; display: grid; place-items: center; background: var(--surface-3);
}
.notif-body { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.notif-title { font-size: .84rem; }
.notif-text { font-size: .76rem; color: var(--ink-2); white-space: normal; }
.notif-time { font-size: .69rem; color: var(--ink-3); }

/* ── محتوا و کارت‌ها ────────────────────────────────────────── */
.content { padding: .6rem 1.4rem 1.6rem; flex: 1 1 auto; }

.card {
    background: var(--surface);
    border: 0;
    border-radius: var(--r-xl);
    box-shadow: var(--sh-1);
    overflow: hidden;
}
.card-header {
    background: transparent;
    border-bottom: 0;
    font-weight: 800; font-size: 1rem;
    padding: 1.15rem 1.25rem .5rem;
    letter-spacing: -.02em;
    border-radius: 0 !important;
}
/* آیکن عنوان کارت رنگی، تا صفحه خشک نباشد */
.card-header > i:first-child, .card-header > span > i:first-child { color: var(--brand-500); }
.card-body { padding: 1rem 1.25rem 1.25rem; }

/* کارت آمار = کاشی پاستلی رنگی (رنگ از متغیر --c که در ویو ست می‌شود) */
.stat-card {
    --c: #2f62c4;
    background: var(--surface);   /* جایگزین برای مرورگرهای بدون color-mix */
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--c) 20%, #fff) 0%,
                                color-mix(in srgb, var(--c) 7%, #fff) 100%);
    border: 0;
    border-radius: var(--r-lg); padding: 1.05rem 1.1rem;
    display: flex; align-items: center; gap: .85rem;
    height: 100%; box-shadow: var(--sh-1);
    transition: transform .18s cubic-bezier(.4,0,.2,1), box-shadow .18s;
    position: relative; overflow: hidden;
}
/* درخشش نرم گوشهٔ کاشی */
.stat-card::after {
    content: ""; position: absolute; width: 120px; height: 120px; border-radius: 50%;
    background: color-mix(in srgb, var(--c) 14%, transparent);
    top: -55px; left: -35px; pointer-events: none;
}
a.stat-card:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }

.stat-icon {
    width: 46px; height: 46px; border-radius: 16px;
    display: grid; place-items: center; font-size: 1.3rem; flex: 0 0 46px;
    background: #fff; color: var(--c);
    box-shadow: 0 3px 10px rgba(20,32,70,.12);
    box-shadow: 0 3px 10px color-mix(in srgb, var(--c) 22%, transparent);
    position: relative; z-index: 1;
}
.stat-value { font-size: 1.7rem; font-weight: 800; line-height: 1.1; letter-spacing: -.03em; color: var(--ink); position: relative; z-index: 1; }
.stat-label { font-size: .79rem; color: var(--ink-2); font-weight: 600; position: relative; z-index: 1; }

/* ── جدول ───────────────────────────────────────────────────── */
.table { --bs-table-bg: transparent; margin: 0; color: var(--ink); }
.table > :not(caption) > * > * { padding: .9rem 1rem; vertical-align: middle; border: 0; box-shadow: none; }
.table thead th {
    background: transparent; color: var(--ink-3);
    font-size: .74rem; font-weight: 700; letter-spacing: .01em;
    padding-top: .4rem; padding-bottom: .6rem;
    white-space: nowrap; border-bottom: 1px solid var(--line) !important;
}
.table tbody tr { border-bottom: 1px solid var(--line); transition: background .14s; }
.table tbody tr:last-child { border-bottom: 0; }
.table tbody tr:hover { background: var(--surface-2); }

.ticket-row-overdue td:first-child { box-shadow: inset 3px 0 0 var(--red); }
.ticket-row-await td:first-child { box-shadow: inset 3px 0 0 var(--violet); }

/* ── نشان‌های نرم ───────────────────────────────────────────── */
.badge {
    border-radius: 100px; font-weight: 700; font-size: .74rem;
    padding: .34em .75em; letter-spacing: -.01em;
    display: inline-flex; align-items: center; gap: .25rem;
}
.badge[class*="text-bg-"] { border: 0; }
.badge.text-bg-primary   { background: var(--brand-tint) !important; color: var(--brand) !important; }
.badge.text-bg-secondary { background: var(--slate-t) !important;  color: #5d6879 !important; }
.badge.text-bg-success   { background: var(--green-t) !important;  color: #067a55 !important; }
.badge.text-bg-danger    { background: var(--red-t) !important;    color: #c62828 !important; }
.badge.text-bg-warning   { background: var(--amber-t) !important;  color: #a06a00 !important; }
.badge.text-bg-info      { background: var(--cyan-t) !important;   color: #0678a5 !important; }
.badge.text-bg-dark      { background: var(--surface-3) !important; color: var(--ink) !important; }
.badge.text-bg-light     { background: var(--surface-2) !important; color: var(--ink-2) !important; }
.badge.text-bg-purple, .badge.bg-purple { background: var(--violet-t) !important; color: #6d3fd4 !important; }
.badge.bg-danger { background: var(--red) !important; color: #fff !important; }

/* برچسب وضعیت روی سربرگ تیکت */
.stamp-lg {
    display: inline-flex; align-items: center; gap: .4rem;
    border-radius: 100px; padding: .45rem 1rem;
    font-weight: 800; font-size: .86rem;
    background: var(--surface-3);
}
.stamp-lg.text-primary   { background: var(--brand-tint); }
.stamp-lg.text-info      { background: var(--cyan-t); }
.stamp-lg.text-warning   { background: var(--amber-t); }
.stamp-lg.text-danger    { background: var(--red-t); }
.stamp-lg.text-success   { background: var(--green-t); }
.stamp-lg.text-secondary { background: var(--slate-t); }
.stamp-lg.text-purple    { background: var(--violet-t); }
.stamp-lg.text-dark      { background: var(--surface-3); }

.text-primary   { color: var(--brand-500) !important; }
.text-success   { color: #067a55 !important; }
.text-danger    { color: #d33 !important; }
.text-warning   { color: #a06a00 !important; }
.text-info      { color: #0678a5 !important; }
.text-secondary { color: var(--slate) !important; }
.text-dark      { color: var(--ink) !important; }
.text-muted     { color: var(--ink-3) !important; }
.text-purple    { color: #6d3fd4 !important; }
.bg-purple      { background-color: var(--violet) !important; color: #fff; }
.bg-purple-soft { background: var(--violet-t) !important; color: #6d3fd4 !important; }
.border-purple  { border-color: var(--violet) !important; }

.chip {
    display: inline-flex; align-items: center; gap: .35rem;
    background: var(--surface-2); border: 0;
    border-radius: 100px; padding: .35rem .8rem; font-size: .76rem;
    color: var(--ink-2); font-weight: 600;
}

.ticket-no {
    font-family: "Segoe UI", monospace; direction: ltr; unicode-bidi: embed;
    font-size: .76rem; font-weight: 700; color: var(--ink-3);
    background: var(--surface-2); border-radius: 8px; padding: .2rem .5rem;
    display: inline-block;
}

/* ── سربرگ فرم صفحهٔ تیکت ───────────────────────────────────── */
.form-band {
    display: flex; align-items: center; justify-content: space-between;
    gap: .75rem; flex-wrap: wrap;
    padding: .2rem .5rem .8rem;
    font-size: .78rem; color: var(--ink-3);
}
.form-band .fb-org { font-weight: 700; color: var(--brand); }
.form-band .fb-title { display: none; }
.form-band .fb-serial { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }

/* ── فرم ────────────────────────────────────────────────────── */
.form-label { font-size: .8rem; font-weight: 700; color: var(--ink-2); margin-bottom: .4rem; }
.form-control, .form-select {
    border-radius: var(--r-md); border: 1.5px solid transparent;
    background: var(--surface-2); color: var(--ink);
    font-size: .875rem; padding: .65rem .9rem;
    transition: background .15s, border-color .15s;
}
.form-control::placeholder { color: var(--ink-3); }
.form-control:focus, .form-select:focus {
    border-color: var(--brand-500); background: var(--surface); box-shadow: none;
}
.form-control-sm, .form-select-sm { padding: .45rem .7rem; border-radius: var(--r-sm); font-size: .82rem; }

/* گروه ورودی مثل یک فیلد یکپارچه دیده شود، نه دو جعبهٔ چسبیده */
.input-group {
    background: var(--surface-2); border-radius: var(--r-md);
    border: 1.5px solid transparent; overflow: hidden;
    transition: border-color .15s, background .15s;
}
.input-group:focus-within { border-color: var(--brand-500); background: var(--surface); }
.input-group .input-group-text { background: transparent; border: 0; color: var(--ink-3); padding-right: .9rem; }
.input-group .form-control { background: transparent; border: 0; }
.input-group .form-control:focus { background: transparent; }
.form-text { font-size: .75rem; color: var(--ink-3); }
.form-check-input { border-color: #cfd5e2; }
.form-check-input:checked { background-color: var(--brand-500); border-color: var(--brand-500); }
.form-check-input:focus { box-shadow: none; border-color: var(--brand-500); }

.btn {
    border-radius: 100px; font-size: .85rem; font-weight: 700;
    padding: .55rem 1.2rem; border: 0;
    transition: transform .12s, filter .15s, background .15s;
}
.btn:active { transform: scale(.97); }
.btn-sm { padding: .38rem .85rem; font-size: .79rem; }
.btn-primary {
    background: linear-gradient(135deg, var(--brand-500), var(--brand-600));
    color: #fff; box-shadow: 0 4px 12px rgba(28,61,130,.28);
}
.btn-primary:hover { background: linear-gradient(135deg, #3a6ed2, var(--brand-600)); color: #fff; box-shadow: 0 6px 18px rgba(28,61,130,.34); }
.btn-outline-primary { background: var(--brand-tint); color: var(--brand); }
.btn-outline-primary:hover { background: #dbe4f5; color: var(--brand); }
.btn-outline-secondary { background: var(--surface-2); color: var(--ink-2); }
.btn-outline-secondary:hover { background: var(--surface-3); color: var(--ink); }
.btn-success { background: var(--green); color: #fff; }
.btn-success:hover { background: #0ea472; color: #fff; }
.btn-danger { background: var(--red); color: #fff; }
.btn-outline-danger { background: var(--red-t); color: #c62828; }
.btn-outline-danger:hover { background: #fbdada; color: #c62828; }
.btn-purple { background: var(--violet); color: #fff; }
.btn-purple:hover { background: #7c4ef0; color: #fff; }
.btn-link { color: var(--brand-500); font-weight: 600; }

.text-danger.field-validation-error { font-size: .76rem; display: block; margin-top: .3rem; }

.alert { border-radius: var(--r-lg); border: 0; padding: .85rem 1.1rem; font-size: .85rem; }
.alert-success { background: var(--green-t); color: #06694a; }
.alert-danger  { background: var(--red-t);   color: #b3261e; }
.alert-info    { background: var(--brand-tint); color: var(--brand); }
.alert-warning { background: var(--amber-t); color: #8a5a00; }
.alert-light   { background: var(--surface-2); color: var(--ink-2); }

/* انتخاب فوریت */
.priority-picker { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.priority-picker input { position: absolute; opacity: 0; }
.priority-picker label {
    border: 2px solid transparent; border-radius: var(--r-md);
    padding: .7rem .4rem; text-align: center; cursor: pointer;
    font-size: .82rem; font-weight: 700; background: var(--surface-2);
    color: var(--ink-2); transition: all .15s;
}
.priority-picker label:hover { background: var(--surface-3); }
.priority-picker input:checked + label.p-low  { background: var(--slate-t);  color: #5d6879; border-color: var(--slate); }
.priority-picker input:checked + label.p-med  { background: var(--cyan-t);   color: #0678a5; border-color: var(--cyan); }
.priority-picker input:checked + label.p-high { background: var(--amber-t);  color: #a06a00; border-color: var(--amber); }
.priority-picker input:checked + label.p-crit { background: var(--red-t);    color: #c62828; border-color: var(--red); }

/* انتخاب نوع درخواست */
.type-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .5rem; }
.type-picker input { position: absolute; opacity: 0; }
.type-picker label {
    display: flex; align-items: center; gap: .55rem;
    border: 2px solid transparent; border-radius: var(--r-md);
    padding: .7rem .8rem; cursor: pointer;
    font-size: .83rem; font-weight: 600; background: var(--surface-2);
    color: var(--ink-2); transition: all .15s; height: 100%;
}
.type-picker label i { font-size: 1.15rem; color: var(--ink-3); flex: 0 0 auto; transition: color .15s; }
.type-picker label:hover { background: var(--surface-3); }
.type-picker input:checked + label {
    background: var(--brand-tint); color: var(--brand);
    border-color: var(--brand-500); font-weight: 800;
}
.type-picker input:checked + label i { color: var(--brand-500); }
.type-picker input:focus-visible + label { outline: 2px solid var(--brand-500); outline-offset: 2px; }

/* نمره‌دادن */
.rating-picker { display: flex; flex-direction: column; gap: .25rem; }
.rating-picker .form-check { padding: .5rem .8rem .5rem 2.2rem; border-radius: var(--r-md); background: var(--surface-2); }
.rating-picker .form-check:hover { background: var(--surface-3); }
.rating-picker .form-check-label { display: flex; align-items: center; gap: .6rem; cursor: pointer; }
.rating-picker .stars { color: var(--amber); font-size: 1.1rem; letter-spacing: .12rem; }

/* ── گفتگو ──────────────────────────────────────────────────── */
.chat {
    display: flex; flex-direction: column; gap: .9rem;
    padding: 1.1rem 1.25rem; max-height: 620px; overflow-y: auto;
    background: var(--surface-2);
}
.msg { display: flex; gap: .6rem; max-width: 82%; }
.msg.mine { align-self: flex-start; }
.msg.theirs { align-self: flex-end; }

.msg-avatar {
    width: 36px; height: 36px; border-radius: 50%; flex: 0 0 36px;
    display: grid; place-items: center; font-weight: 700; font-size: .85rem;
    background: var(--surface-3); color: var(--ink-2);
}
.msg.mine .msg-avatar { background: var(--brand); color: #fff; }

.msg-bubble {
    position: relative;
    background: var(--surface); border: 0;
    border-radius: var(--r-lg); padding: .8rem 1rem;
    box-shadow: var(--sh-1);
}
.msg.theirs .msg-bubble { border-top-right-radius: 6px; }
.msg.mine .msg-bubble { background: var(--brand-tint); border-top-left-radius: 6px; }
.msg-bubble.internal { background: var(--amber-t); }

.msg-meta { font-size: .7rem; color: var(--ink-3); margin-bottom: .2rem; display: flex; gap: .4rem; align-items: center; }
.msg-text { white-space: pre-wrap; font-size: .875rem; line-height: 1.95; }

.msg-sender {
    font-size: .83rem; font-weight: 800; color: var(--ink);
    display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
    margin-bottom: .3rem; padding-left: 2.4rem;
}
.msg-sender .msg-you { font-weight: 500; font-size: .72rem; color: var(--ink-3); }

.msg-clip {
    position: absolute; top: .7rem; left: .8rem;
    display: inline-flex; align-items: center; gap: .12rem;
    color: var(--brand-500); font-size: .85rem; line-height: 1;
}
.msg-clip b { font-size: .68rem; }

.msg-system { align-self: center; max-width: 92%; }
.msg-system .sys-pill {
    background: var(--surface-3); color: var(--ink-2);
    border-radius: 100px; padding: .4rem 1rem;
    font-size: .75rem; text-align: center; white-space: pre-wrap;
}

.att-list { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .55rem; }
.att {
    display: inline-flex; align-items: center; gap: .4rem;
    background: var(--surface-2); border: 0;
    border-radius: 100px; padding: .35rem .8rem; font-size: .76rem;
    color: var(--ink-2); font-weight: 600;
}
.msg.mine .att { background: rgba(255,255,255,.75); }
.att:hover { background: var(--brand-tint); color: var(--brand); }
.att i { color: var(--brand-500); }
.att-name { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── تایم‌لاین ──────────────────────────────────────────────── */
.timeline { position: relative; padding-right: 1.3rem; }
.timeline::before { content: ""; position: absolute; right: 9px; top: 10px; bottom: 10px; width: 2px; background: var(--line); border-radius: 2px; }
.tl-item { position: relative; padding: 0 .5rem 1.15rem 0; }
.tl-dot {
    position: absolute; right: -1.3rem; top: 1px;
    width: 20px; height: 20px; border-radius: 50%;
    display: grid; place-items: center; font-size: .6rem; color: #fff;
    box-shadow: 0 0 0 3px var(--surface);
}
.tl-title { font-size: .84rem; line-height: 1.7; }
.tl-time { font-size: .72rem; color: var(--ink-3); }

/* ── نمودارها ───────────────────────────────────────────────── */
.bar-row { display: flex; align-items: center; gap: .7rem; margin-bottom: .7rem; }
.bar-label { flex: 0 0 118px; font-size: .8rem; color: var(--ink-2); font-weight: 600; text-align: left; }
.bar-track { flex: 1 1 auto; height: 13px; background: var(--surface-3); border-radius: 100px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 100px; transition: width .5s cubic-bezier(.4,0,.2,1); filter: saturate(1.15); }
.bar-value { flex: 0 0 66px; font-size: .76rem; color: var(--ink-3); font-weight: 600; }

.donut-wrap { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.donut-legend { display: flex; flex-direction: column; gap: .5rem; font-size: .8rem; }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-left: .5rem; }

.trend-chart { display: flex; align-items: flex-end; gap: .9rem; height: 200px; padding-top: .5rem; overflow-x: auto; }
.trend-col { flex: 1 1 0; min-width: 54px; display: flex; flex-direction: column; align-items: center; gap: .45rem; height: 100%; }
.trend-bars { flex: 1 1 auto; display: flex; align-items: flex-end; gap: 5px; width: 100%; justify-content: center; }
.trend-bar { width: 16px; border-radius: 100px; min-height: 5px; transition: height .5s cubic-bezier(.4,0,.2,1); }
.trend-label { font-size: .7rem; color: var(--ink-3); white-space: nowrap; font-weight: 600; }

/* ── ورود / ثبت‌نام ─────────────────────────────────────────── */
.auth-body { background: var(--bg); }
.auth-wrap { display: flex; min-height: 100vh; }

.auth-side {
    flex: 1 1 46%;
    background: linear-gradient(160deg, #16305f 0%, #12295c 55%, #0d1f47 100%);
    color: #fff; display: grid; place-items: center; padding: 2.5rem;
    position: relative; overflow: hidden;
}
.auth-side::before {
    content: ""; position: absolute; width: 460px; height: 460px; border-radius: 50%;
    background: rgba(255,212,0,.10); top: -160px; left: -120px;
}
.auth-side::after {
    content: ""; position: absolute; width: 300px; height: 300px; border-radius: 50%;
    background: rgba(255,255,255,.05); bottom: -110px; right: -80px;
}
.auth-side-inner { max-width: 400px; position: relative; z-index: 1; }
.auth-side h2 { font-size: 1.6rem; margin: 1.3rem 0 .3rem; font-weight: 800; letter-spacing: -.02em; }
.auth-sub { font-size: .82rem; color: rgba(255,255,255,.62); font-weight: 600; margin-bottom: .9rem; }
.auth-side p { color: rgba(255,255,255,.75); font-size: .88rem; line-height: 2.1; }
.auth-points { list-style: none; padding: 0; margin: 1.6rem 0 0; }
.auth-points li {
    display: flex; gap: .75rem; align-items: center; padding: .65rem 0;
    font-size: .85rem; color: rgba(255,255,255,.9);
}
.auth-points i {
    color: var(--gold); font-size: .95rem;
    width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%;
    background: rgba(255,255,255,.09); display: grid; place-items: center;
}

.auth-main { flex: 1 1 54%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.1rem; padding: 2rem 1.25rem; }

.auth-brand { display: flex; align-items: center; gap: .8rem; width: 100%; max-width: 430px; }
.auth-brand strong { display: block; font-size: 1.05rem; font-weight: 800; }
.auth-brand small { display: block; font-size: .76rem; color: var(--ink-3); }

.auth-card {
    width: 100%; max-width: 430px;
    background: var(--surface); border: 0;
    border-radius: var(--r-xl); padding: 2rem;
    box-shadow: var(--sh-1);
}
.auth-card h1 { font-size: 1.4rem; font-weight: 800; margin-bottom: .35rem; letter-spacing: -.03em; }
.auth-card .sub { color: var(--ink-3); font-size: .85rem; margin-bottom: 1.5rem; line-height: 1.9; }

.otp-input {
    letter-spacing: .8rem; text-align: center; font-size: 1.6rem;
    direction: ltr; font-weight: 800; padding: .85rem;
    border-radius: var(--r-md);
}
.otp-timer { font-size: .82rem; color: var(--ink-3); font-weight: 600; }
.dev-code {
    background: var(--gold-tint); border: 0; color: #7a5d00;
    border-radius: var(--r-md); padding: .8rem 1rem; font-size: .82rem; margin-bottom: 1.2rem;
}
.dev-code b { direction: ltr; display: inline-block; font-size: 1.1rem; letter-spacing: .25rem; font-weight: 800; }

/* ── متفرقه ─────────────────────────────────────────────────── */
.empty-state { text-align: center; padding: 3.2rem 1rem; color: var(--ink-3); }
.empty-state i { font-size: 2.8rem; opacity: .25; display: block; margin-bottom: .8rem; }

.filter-bar { background: var(--surface); border: 0; border-radius: var(--r-xl); padding: 1.1rem 1.25rem; box-shadow: var(--sh-1); }

.scope-tabs { display: flex; gap: .4rem; flex-wrap: wrap; }
.scope-tabs a {
    padding: .5rem 1.05rem; border-radius: 100px; font-size: .82rem; font-weight: 600;
    border: 0; background: var(--surface); color: var(--ink-2); box-shadow: var(--sh-1);
}
.scope-tabs a:hover { background: var(--surface-2); color: var(--ink); }
.scope-tabs a.active {
    background: linear-gradient(135deg, var(--brand-500), var(--brand-600));
    color: #fff; font-weight: 700; box-shadow: 0 4px 12px rgba(28,61,130,.28);
}

.list-group-item { background: transparent; border: 0; border-bottom: 1px solid var(--line); color: var(--ink); padding: .85rem 1.25rem; }
.list-group-item:last-child { border-bottom: 0; }
.list-group-item-action:hover { background: var(--surface-2); }

.pagination { gap: .3rem; }
.pagination .page-link { color: var(--ink-2); border: 0; border-radius: 50% !important; width: 36px; height: 36px; display: grid; place-items: center; font-weight: 600; }
.pagination .page-link:hover { background: var(--surface-2); }
.pagination .active .page-link { background: var(--brand); color: #fff; }

.dropdown-menu { background: var(--surface); border: 0; border-radius: var(--r-lg); box-shadow: var(--sh-2); padding: .4rem; }
.dropdown-item { color: var(--ink); border-radius: var(--r-sm); padding: .55rem .8rem; font-size: .85rem; }
.dropdown-item:hover { background: var(--surface-2); }
.bg-light { background: var(--surface-2) !important; }
.border-bottom, .border-top { border-color: var(--line) !important; }
code { color: #c62828; background: var(--red-t); padding: .1rem .35rem; border-radius: 6px; }

.sidebar-backdrop { display: none; }

/* ── موبایل ─────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
    .sidebar {
        position: fixed; right: 0; top: 0; transform: translateX(100%);
        transition: transform .24s cubic-bezier(.4,0,.2,1);
        box-shadow: -8px 0 30px rgba(16,24,40,.10);
    }
    .sidebar.open { transform: translateX(0); }
    .sidebar-backdrop.show {
        display: block; position: fixed; inset: 0; background: rgba(16,24,40,.35); z-index: 1035;
    }
    .auth-side { display: none; }
    .content { padding: .5rem .9rem 1.2rem; }
    .topbar { padding: .9rem 1rem .4rem; }
}

/* جدول‌های عریض روی موبایل به کارت تبدیل می‌شوند */
@media (max-width: 767.98px) {
    .table-cards thead { display: none; }
    .table-cards, .table-cards tbody, .table-cards tr, .table-cards td { display: block; width: 100%; }
    .table-cards tr {
        border: 0; border-radius: var(--r-lg);
        background: var(--surface-2); margin-bottom: .7rem; padding: .35rem 0;
    }
    .table-cards tr:hover { background: var(--surface-2); }
    .table-cards td {
        display: flex; align-items: center; justify-content: space-between; gap: .75rem;
        border: 0 !important; padding: .5rem .9rem; text-align: left;
    }
    .table-cards td::before {
        content: attr(data-label);
        color: var(--ink-3); font-size: .75rem; font-weight: 700;
        flex: 0 0 auto; text-align: right;
    }
    .table-cards td[data-label=""]::before, .table-cards td:not([data-label])::before { content: none; }
    .table-cards .form-select, .table-cards .form-control { max-width: 190px; }
    .ticket-row-overdue td:first-child, .ticket-row-await td:first-child { box-shadow: none; }
    .ticket-row-overdue { box-shadow: inset 0 0 0 2px var(--red-t); }
    .ticket-row-await { box-shadow: inset 0 0 0 2px var(--violet-t); }
}

@media (max-width: 575.98px) {
    .bar-label { flex: 0 0 84px; font-size: .74rem; }
    .bar-value { flex: 0 0 auto; font-size: .72rem; }
    .page-title { font-size: 1.25rem; }
    .stat-value { font-size: 1.35rem; }
    .msg { max-width: 95%; }
    .notif-menu { width: calc(100vw - 1.5rem); }
    .auth-card { padding: 1.4rem; }
    .card-header { padding: 1rem 1rem .4rem; font-size: .94rem; }
    .card-body { padding: .85rem 1rem 1rem; }
    .priority-picker { grid-template-columns: repeat(2, 1fr); }
}

@media print {
    .sidebar, .topbar, .btn, .filter-bar, .scope-tabs { display: none !important; }
    body { background: #fff; }
    .content { padding: 0; }
    .card { box-shadow: none; border: 1px solid #ddd; }
}