/* =========================================================================
   سامانه بایگانی و مدیریت اسناد — سیستم طراحی پایه
   پالت: سبز-اقیانوسی آرشیوی (برند) + کهربایی (تاکید ثانویه) روی زمینه کاغذی خنثی
   فونت: Vazirmatn (فارسی، خوانا، مدرن، وزن‌های متغیر برای سلسله‌مراتب typography)
   ========================================================================= */

:root {
    /* رنگ پایه */
    --paper: #F5F6F3;
    --surface: #FFFFFF;
    --ink-900: #16232B;
    --ink-700: #3B4A52;
    --ink-500: #6B7B82;
    --line: #E1E6E3;
    --line-strong: #CBD3CF;

    /* برند: سبز آرشیوی */
    --brand: #2F6F62;
    --brand-dark: #22514A;
    --brand-tint: #E7F1EE;

    /* تاکید ثانویه: کهربایی (نشان "به‌زودی"، هشدارهای ملایم) */
    --amber: #B8863B;
    --amber-tint: #F6EEE0;

    /* وضعیت‌ها */
    --danger: #B3261E;
    --danger-tint: #FBEAE9;
    --success: #1E7B45;
    --success-tint: #E8F5EC;

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --shadow-sm: 0 1px 2px rgba(22,35,43,0.06);
    --shadow-md: 0 8px 24px rgba(22,35,43,0.10);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--paper);
    color: var(--ink-900);
    font-family: 'Vazirmatn', Tahoma, sans-serif;
    font-size: 15px;
    line-height: 1.8;
}

h1, h2, h3, h4 { margin: 0 0 6px; font-weight: 800; color: var(--ink-900); letter-spacing: -0.01em; }
h1 { font-size: 26px; }
h2 { font-size: 20px; }
h3 { font-size: 16px; }
p  { margin: 0 0 10px; color: var(--ink-700); }
a  { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

.muted { color: var(--ink-500); font-size: 13.5px; }
.eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    color: var(--brand);
    background: var(--brand-tint);
    padding: 4px 10px;
    border-radius: 999px;
    letter-spacing: .02em;
    margin-bottom: 10px;
}

/* =========================================================================
   فرم‌ها
   ========================================================================= */
.form-field { margin-bottom: 16px; }
.form-field label {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink-700);
    margin-bottom: 6px;
}
.input, input[type=text].input, input[type=password].input,
.input select, select.input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink-900);
    font-family: inherit;
    font-size: 14.5px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.input:focus, select.input:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-tint);
}
.input::placeholder { color: var(--ink-500); opacity: .8; }

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
}
@media (max-width: 720px) { .form-grid { grid-template-columns: 1fr; } }

/* =========================================================================
   دکمه‌ها
   ========================================================================= */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 18px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, opacity .15s ease;
}
.btn:disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; pointer-events: none; }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); }
.btn-secondary { background: var(--surface); color: var(--ink-900); border-color: var(--line-strong); }
.btn-secondary:hover { border-color: var(--brand); color: var(--brand); }
.btn-ghost { background: transparent; color: var(--ink-700); border-color: transparent; }
.btn-ghost:hover { background: var(--paper); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { opacity: .9; }
.btn-block { width: 100%; }
.btn-sm { padding: 6px 12px; font-size: 13px; }

/* =========================================================================
   کارت
   ========================================================================= */
.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--shadow-sm);
}
.card + .card { margin-top: 20px; }
.card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.card-header h2, .card-header h3 { margin: 0; }

/* =========================================================================
   پیام / Alert
   ========================================================================= */
.alert { padding: 12px 14px; border-radius: var(--radius-sm); font-size: 14px; margin-top: 14px; border: 1px solid transparent; }
.alert-error   { background: var(--danger-tint);  color: var(--danger);  border-color: #F3C9C5; }
.alert-success { background: var(--success-tint); color: var(--success); border-color: #C7E6D2; }
.alert-amber   { background: var(--amber-tint);   color: var(--amber);   border-color: #E9D8B6; }

/* =========================================================================
   نشان (Badge)
   ========================================================================= */
.badge { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.badge-soon { background: var(--amber-tint); color: var(--amber); }
.badge-on   { background: var(--success-tint); color: var(--success); }
.badge-off  { background: var(--danger-tint); color: var(--danger); }

/* =========================================================================
   جدول
   ========================================================================= */
/* روی موبایل، وقتی مجموع عرض ستون‌ها (به‌خصوص با متن فارسی + لینک‌های عملیات کنار هم) از عرض
   کارت بیشتر شود، خودِ table.grid با اسکرول افقی داخلی نشان داده می‌شود - به‌جای بیرون‌زدن از کادر
   کارت (که قبلاً در همه صفحات لیست/گزارش سراسر سامانه پیش می‌آمد، چون هیچ‌جا overflow کنترل نمی‌شد).
   این یک تغییر CSS-only است: چون همه‌ی صفحات از همین کلاس table.grid استفاده می‌کنند، نیازی به
   تغییر هیچ فایل aspx نیست.
   نکته‌ی مهم: display:block روی خودِ table باعث می‌شود مرورگر thead و tbody را به‌جای یک جدول
   واحد، دو «جدول ناشناس/anonymous» جدا از هم بچیند - یعنی عرض هر ستون در سربرگ (thead) کاملاً
   مستقل از عرض همان ستون در بدنه (tbody) محاسبه می‌شود و این دو دیگر هم‌تراز نمی‌مانند (برخلاف
   توضیح قبلی این کامنت). روی گوشی چون عرض کارت خیلی کم است این ناهم‌ترازی معمولاً به چشم نمی‌آید،
   ولی روی دسکتاپ که عرض کافی هست باعث می‌شود بخشی از جدول (مثلاً چند ستون اول سمت راست) به‌طرز
   عجیبی جمع شود و یک فضای خالی بزرگ سمت چپ جدول بیفتد. برای همین این رفتار (display:block +
   overflow-x:auto) را فقط داخل مدیا-کوئری موبایل نگه می‌داریم؛ در دسکتاپ جدول همان چیدمان استاندارد
   table (پیش‌فرض مرورگر) را دارد که ستون‌های thead/tbody را دقیقاً هم‌تراز می‌کند. */
table.grid {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
@media (max-width: 860px) {
    table.grid {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}
table.grid th {
    text-align: right;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ink-500);
    padding: 10px 12px;
    border-bottom: 2px solid var(--line);
    background: transparent;
}
table.grid td { padding: 12px; border-bottom: 1px solid var(--line); color: var(--ink-900); }
table.grid tr:hover td { background: var(--paper); }
table.grid a.row-action { font-size: 13px; font-weight: 600; }

/* =========================================================================
   Layout: پوسته پنل ادمین (Site.master)
   ========================================================================= */
.app-shell { display: flex; min-height: 100vh; align-items: stretch; }

.sidebar {
    width: 252px;
    flex: 0 0 252px;
    background: var(--ink-900);
    color: #fff;
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    /* روی موبایل (پایین‌تر) sidebar به‌صورت position:fixed با height:100vh نمایش داده می‌شود؛
       بدون overflow-y:auto، وقتی تعداد آیتم‌های منو از ارتفاع صفحه بیشتر شود، آیتم‌های پایینی
       (مثلاً تنظیمات سیستم/خروج) نه دیده می‌شوند نه با اسکرول قابل‌دسترسی‌اند - چون خودِ عنصر
       fixed هیچ اسکرولی نمی‌گیرد و از صفحه اصلی هم مستقل است. این خط همیشه‌فعال است چون در حالت
       دسکتاپ (بدون ارتفاع ثابت) اثری ندارد و فقط وقتی واقعاً لازم باشد (موبایل) کار می‌کند. */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 6px 8px 22px; border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: 18px; }
.sidebar-brand .brand-name { font-weight: 800; font-size: 15px; color: #fff; }
.sidebar-brand .brand-sub { display:block; font-size: 11px; color: rgba(255,255,255,.55); font-weight: 400; }

.sidebar-nav { display: flex; flex-direction: column; gap: 2px; }
.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    color: rgba(255,255,255,.75);
    font-size: 14px;
    font-weight: 600;
}
.nav-item:hover { background: rgba(255,255,255,.06); color: #fff; text-decoration: none; }
.nav-item.is-active { background: var(--brand); color: #fff; }
.nav-item.is-disabled { color: rgba(255,255,255,.35); cursor: default; }
.nav-item.is-disabled:hover { background: transparent; }
.nav-item .nav-icon { width: 18px; height: 18px; flex: none; opacity: .9; }
.nav-item .badge-soon { margin-inline-start: auto; }
.nav-section-title {
    margin-top: 14px;
    padding: 10px 12px 4px;
    font-size: 11px;
    font-weight: 700;
    color: rgba(255,255,255,.38);
    letter-spacing: .03em;
}

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

.topbar {
    height: 64px;
    flex: 0 0 64px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px;
}
.topbar .page-title { margin: 0; font-size: 18px; }
.topbar-user { display: flex; align-items: center; gap: 14px; }
.topbar-user .user-name { font-size: 13.5px; font-weight: 700; color: var(--ink-700); }

/* =========================================================================
   زنگوله اطلاعیه‌ها در هدر پنل عمومی (PortalSite.master) — در همه صفحات پنل دیده
   می‌شود، نه فقط داشبورد، تا پیام‌های شخصی حتی بدون رسیدن اعلان فوری گم نشوند.
   ========================================================================= */
.notif-bell-wrap { position: relative; }
.notif-bell-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--ink-700);
    cursor: pointer;
    padding: 0;
}
.notif-bell-btn:hover { background: var(--brand-tint); color: var(--brand); border-color: var(--line); }
.notif-bell-btn svg { width: 20px; height: 20px; }
.notif-badge {
    position: absolute;
    top: 2px;
    inset-inline-end: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--danger);
    color: #fff;
    font-size: 10.5px;
    font-weight: 800;
    line-height: 16px;
    text-align: center;
}
.notif-panel {
    position: absolute;
    top: calc(100% + 10px);
    inset-inline-end: -8px;
    width: 340px;
    max-width: calc(100vw - 24px);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 32px rgba(22,35,43,.14);
    z-index: 60;
    overflow: hidden;
}
.notif-panel-head { padding: 13px 16px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.notif-list { display: flex; flex-direction: column; max-height: 360px; overflow-y: auto; }
.notif-item { padding: 12px 16px; border-bottom: 1px solid var(--line); position: relative; }
.notif-item:last-child { border-bottom: none; }
.notif-item.unread { background: var(--brand-tint); }
.notif-item.unread::before {
    content: '';
    position: absolute;
    top: 16px;
    inset-inline-start: 6px;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--brand);
}
.notif-item.unread { padding-inline-start: 20px; }
.notif-item-title { font-weight: 700; font-size: 13.5px; margin-bottom: 2px; }
.notif-item-body { font-size: 12.5px; color: var(--ink-700); line-height: 1.7; }
.notif-item-date { font-size: 11px; margin-top: 5px; }
.notif-panel-footer {
    display: block;
    text-align: center;
    padding: 11px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--brand);
    border-top: 1px solid var(--line);
    background: var(--paper);
}
.notif-panel-footer:hover { background: var(--brand-tint); text-decoration: none; }
@media (max-width: 700px) {
    .notif-panel { position: fixed; top: 64px; inset-inline: 10px; width: auto; }
}

.content { padding: 28px; max-width: 1080px; width: 100%; }

/* =========================================================================
   Layout: پوسته صفحات ورود (AuthSite.master)
   ========================================================================= */
.auth-body { background: var(--ink-900); }
.auth-shell {
    min-height: 100vh;
    display: flex;
    align-items: stretch;
}
.auth-side {
    flex: 1 1 46%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60px 64px;
    color: #fff;
    background:
        radial-gradient(600px 400px at 20% 15%, rgba(47,111,98,.55), transparent 60%),
        linear-gradient(160deg, var(--ink-900) 0%, #0F1A20 100%);
}
.auth-side .brand-mark-lg { width: 56px; height: 56px; margin-bottom: 22px; }
.auth-side h2 { color: #fff; font-size: 26px; max-width: 380px; }
.auth-side p { color: rgba(255,255,255,.65); max-width: 380px; }

.auth-card-wrap {
    flex: 1 1 54%;
    background: var(--paper);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
}
.auth-card {
    width: 100%;
    max-width: 380px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 32px;
}
.auth-card-header { margin-bottom: 22px; }
.auth-foot { margin-top: 18px; text-align: center; font-size: 13.5px; }

@media (max-width: 860px) {
    .auth-side { display: none; }
    .auth-card-wrap { flex: 1 1 100%; }
}
/* دکمه همبرگری - فقط روی موبایل دیده می‌شود */
.hamburger-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: var(--ink-900);
    cursor: pointer;
    border-radius: var(--radius-sm);
    flex: none;
}
.hamburger-btn:hover { background: var(--paper); }
.hamburger-btn svg { width: 22px; height: 22px; }

.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 26, 32, .5);
    z-index: 40;
}
.sidebar-backdrop.is-open { display: block; }

@media (max-width: 860px) {
    .hamburger-btn { display: inline-flex; }
    .sidebar {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        height: 100vh;
        z-index: 50;
        transform: translateX(100%);
        transition: transform .25s ease;
        box-shadow: -8px 0 24px rgba(0,0,0,.25);
    }
    .sidebar.is-open { transform: translateX(0); }
    .content { padding: 16px; }
    .topbar { padding: 0 12px; }
    .topbar .page-title { font-size: 15px; }
}


/* دسترسی‌پذیری: نمایش واضح فوکوس کیبورد */
a:focus-visible, button:focus-visible, .btn:focus-visible,
input:focus-visible, select:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* دسترسی از راه پنل عمومی: کارت‌های داشبورد */
.quicklink-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}
.quicklink-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    padding: 18px 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--ink-900);
    transition: border-color .15s ease, transform .1s ease;
}
.quicklink-card:hover { border-color: var(--brand); text-decoration: none; transform: translateY(-2px); }
.quicklink-icon { width: 34px; height: 34px; color: var(--brand); }
.quicklink-icon svg { width: 100%; height: 100%; }
.quicklink-title { font-size: 13px; font-weight: 700; }

/* نوار ناوبری ساده پنل عمومی (بالای صفحه) */
.portal-nav { display: flex; gap: 4px; margin-inline-start: 18px; }
.portal-nav a {
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ink-700);
}
.portal-nav a:hover { background: var(--paper); text-decoration: none; }
.portal-nav a.is-active { background: var(--brand-tint); color: var(--brand); }

/* نوار بالای پنل عمومی: sticky + فضای امن بالای صفحه در وب‌اپ نصب‌شده (Notch/Status Bar) */
.portal-topbar {
    position: sticky;
    top: 0;
    z-index: 5;
    flex-wrap: wrap;
    row-gap: 6px;
    padding-top: calc(env(safe-area-inset-top, 0px) + 12px) !important;
    height: auto;
    min-height: 56px;
}
.portal-topbar-brand { display: flex; align-items: center; gap: 8px; flex: none; }

@media (max-width: 560px) {
    .portal-topbar { justify-content: space-between; padding-inline: 12px !important; }
    .portal-topbar-brand { order: 1; }
    .topbar-user { order: 2; }
    .portal-nav { order: 3; width: 100%; margin-inline-start: 0; justify-content: center; }
    .portal-topbar .user-name { display: none; }
}

/* =========================================================================
   داشبورد پنل عمومی: هیرو خوش‌آمدگویی + آمار مدارک + کارت‌های رنگی دسترسی سریع
   ========================================================================= */
.portal-hero {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: center;
    justify-content: space-between;
    background:
        radial-gradient(500px 260px at 15% 0%, rgba(184,134,59,.25), transparent 60%),
        linear-gradient(135deg, var(--ink-900) 0%, #1E3B33 100%);
    color: #fff;
    border-radius: var(--radius-lg);
    padding: 28px 30px;
    margin-bottom: 18px;
}
.portal-hero-text h1 { color: #fff; font-size: 24px; margin: 4px 0 6px; }
.portal-hero-text p { color: rgba(255,255,255,.62); margin: 0; font-size: 13.5px; }

.portal-hero-progress { min-width: 220px; flex: 0 0 auto; }
.progress-ring-label { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.progress-ring-percent { font-size: 26px; font-weight: 800; color: #fff; }
.progress-ring-caption { font-size: 12.5px; color: rgba(255,255,255,.55); }
.progress-bar {
    width: 220px;
    height: 8px;
    border-radius: 999px;
    background: rgba(255,255,255,.15);
    overflow: hidden;
}
.progress-bar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #B8863B, #E3B463);
    border-radius: 999px;
    transition: width .4s ease;
}
.progress-stats { margin-top: 8px; font-size: 12.5px; color: rgba(255,255,255,.6); }
.progress-stats b { color: #fff; }

.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }
.stat-chip {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-inline-start: 4px solid var(--line-strong);
}
.stat-chip-num { font-size: 20px; font-weight: 800; color: var(--ink-900); }
.stat-chip-label { font-size: 12px; color: var(--ink-500); }
.stat-chip-pending { border-inline-start-color: var(--amber); }
.stat-chip-rejected { border-inline-start-color: var(--danger); }
.stat-chip-missing { border-inline-start-color: var(--ink-500); }

/* رنگ کارت‌های KPI «فعالیت امروز» در داشبورد ادمین - هم‌راستا با رنگ نشان‌های فید فعالیت‌ها */
.stat-chip-insert { border-inline-start-color: var(--success); }
.stat-chip-insert .stat-chip-num { color: var(--success); }
.stat-chip-update { border-inline-start-color: var(--amber); }
.stat-chip-update .stat-chip-num { color: var(--amber); }
.stat-chip-delete { border-inline-start-color: var(--danger); }
.stat-chip-delete .stat-chip-num { color: var(--danger); }
.stat-chip-login { border-inline-start-color: var(--brand); }
.stat-chip-login .stat-chip-num { color: var(--brand); }

.quicklink-icon-circle {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 11px;
}
.quicklink-icon-circle svg { width: 100%; height: 100%; }
.qc-blue   { background: #E7F0FB; color: #2563A8; }
.qc-purple { background: #F1EBFB; color: #6B46C1; }
.qc-amber  { background: var(--amber-tint); color: var(--amber); }
.qc-red    { background: var(--danger-tint); color: var(--danger); }
.qc-green  { background: var(--success-tint); color: var(--success); }
.qc-teal   { background: var(--brand-tint); color: var(--brand); }
.qc-gray   { background: #EEF0EF; color: var(--ink-500); }

@media (max-width: 560px) {
    .portal-hero { padding: 22px; }
    .portal-hero-progress { width: 100%; }
    .progress-bar { width: 100%; }
    .stat-row { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .stat-chip { padding: 10px 12px; }
}

/* لیست اطلاعیه‌ها در داشبورد پنل عمومی */
.announce-list { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.announce-item {
    border: 1px solid var(--line);
    border-inline-start: 3px solid var(--brand);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    background: var(--paper);
}
.announce-title { font-weight: 700; font-size: 14px; margin-bottom: 2px; }
.announce-body { font-size: 13.5px; color: var(--ink-700); }
.announce-date { font-size: 11.5px; margin-top: 4px; }

/* =========================================================================
   کارت هر مدرک در Portal/MyDocuments.aspx + پیش‌نمایش قبل از ارسال نهایی
   ========================================================================= */
.doc-card {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 16px;
    margin-bottom: 12px;
    background: var(--surface);
}
.doc-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}
.doc-card-title { font-weight: 700; font-size: 14.5px; margin-inline-end: 8px; }

.doc-upload-cell { margin-top: 6px; }
.doc-preview {
    margin-top: 10px;
    align-items: center;
    gap: 10px;
}
.doc-preview-img {
    max-width: 160px;
    max-height: 160px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    object-fit: cover;
}
.doc-preview-file {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font-size: 13px;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* نشان "آماده ارسال" زیر پیش‌نمایش هر مدرک در Portal/MyDocuments.aspx */
.doc-preview { flex-direction: column; align-items: flex-start; gap: 6px; }
.doc-ready-tag {
    font-size: 12px;
    font-weight: 700;
    color: var(--success);
    background: var(--success-tint);
    padding: 3px 10px;
    border-radius: 999px;
}

/* نشان گرد زرد کنار «بررسی مدارک» در سایدبار ادمین */
.nav-badge-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--amber);
    color: #1F1503;
    font-size: 11px;
    font-weight: 800;
    margin-inline-start: auto;
}

/* پیش‌نمایش کوچک مدرک کنار دکمه «مشاهده» در Admin/PersonDocuments.aspx */
.doc-thumb {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    margin-inline-end: 8px;
}
.doc-thumb-pdf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    background: var(--paper);
    font-size: 18px;
    margin-inline-end: 8px;
}

/* گروه منو با زیرمنو (مثل «بررسی مدارک» با دو زیرشاخه جستجو/لیست) - آکاردئون قابل باز/بسته */
.nav-group { margin-top: 2px; }
.nav-group-title {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    color: rgba(255,255,255,.65);
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
}
.nav-group-title:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav-group.is-open .nav-group-title { color: #fff; }
.nav-group-title .nav-icon { width: 18px; height: 18px; opacity: .8; flex: none; }
.nav-caret { width: 14px; height: 14px; flex: none; margin-inline-start: auto; transition: transform .18s ease; opacity: .6; }
.nav-group.is-open .nav-caret { transform: rotate(180deg); }

.nav-subgroup {
    max-height: 0;
    overflow: hidden;
    transition: max-height .2s ease;
}
.nav-group.is-open .nav-subgroup { max-height: 200px; }

.nav-subitem {
    display: block;
    padding: 8px 12px 8px 12px;
    padding-inline-start: 34px;
    border-radius: var(--radius-sm);
    color: rgba(255,255,255,.7);
    font-size: 13.5px;
    font-weight: 600;
}
.nav-subitem:hover { background: rgba(255,255,255,.06); color: #fff; text-decoration: none; }
.nav-subitem.is-active { background: var(--brand); color: #fff; }

/* هدر بخش‌بندی مدارک بر اساس دسته (هویتی/تحصیلی/...) در چک‌لیست پنل و ادمین */
.doc-category-heading {
    font-size: 15px;
    font-weight: 800;
    color: var(--brand);
    margin: 18px 0 8px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--brand-tint);
}
.doc-category-heading:first-child { margin-top: 0; }

/* =========================================================================
   داشبورد پرونده در Admin/Archive.aspx: هدر شبیه یک پرونده واقعی + باکس‌های
   دسته‌بندی مدارک که با کلیک باز/بسته می‌شوند
   ========================================================================= */
.dossier-header {
    display: flex;
    align-items: center;
    gap: 20px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 20px 24px;
    margin-bottom: 18px;
}
.dossier-photo-wrap { flex: none; }
.dossier-photo {
    width: 84px;
    height: 84px;
    border-radius: var(--radius-md);
    object-fit: cover;
    border: 1px solid var(--line);
    background: var(--paper);
}
.dossier-photo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    color: var(--ink-500);
}
.dossier-info h1 { font-size: 20px; margin: 4px 0 4px; }
.dossier-info p { margin: 0; color: var(--ink-500); font-size: 13.5px; }

.doc-category-box {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    margin-bottom: 12px;
    overflow: hidden;
}
.doc-category-box summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    font-weight: 800;
    font-size: 15px;
    color: var(--ink-900);
}
.doc-category-box summary::-webkit-details-marker { display: none; }
.doc-category-box-title { flex: none; }
.doc-category-box-chevron {
    width: 18px;
    height: 18px;
    margin-inline-start: auto;
    transition: transform .15s ease;
    color: var(--ink-500);
}
.doc-category-box[open] .doc-category-box-chevron,
details.doc-category-box[open] > summary .doc-category-box-chevron { transform: rotate(180deg); }
.doc-category-box-body { padding: 4px 20px 20px; border-top: 1px solid var(--line); }

.doc-physical-row {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--line);
    font-size: 13.5px;
}

/* =========================================================================
   نمودارهای میله‌ای ساده (Admin/Reports.aspx) - بدون نیاز به کتابخانه جانبی
   ========================================================================= */
.report-bar-list { display: flex; flex-direction: column; gap: 10px; }
.report-bar-row {
    display: grid;
    grid-template-columns: 140px 1fr 40px;
    align-items: center;
    gap: 10px;
}
.report-bar-label { font-size: 13px; color: var(--ink-700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.report-bar-track {
    height: 10px;
    background: var(--paper);
    border-radius: 999px;
    overflow: hidden;
}
.report-bar-fill {
    height: 100%;
    width: 0%;
    background: var(--brand);
    border-radius: 999px;
    transition: width .3s ease;
}
.report-bar-success { background: var(--success); }
.report-bar-pending { background: var(--amber); }
.report-bar-danger  { background: var(--danger); }
.report-bar-value { font-size: 13px; font-weight: 700; text-align: left; }

@media (max-width: 560px) {
    .report-bar-row { grid-template-columns: 90px 1fr 34px; }
    .report-bar-label { font-size: 12px; }
}

/* =========================================================================
   لیست گروه‌بندی‌شده افراد چندرشته‌ای (Admin/Reports.aspx)
   ========================================================================= */
.multi-enroll-list { display: flex; flex-direction: column; }
.multi-enroll-row {
    display: grid;
    grid-template-columns: 110px 1fr 140px 70px 90px;
    align-items: center;
    gap: 10px;
    padding: 8px 4px;
    border-bottom: 1px solid var(--line);
    font-size: 13px;
}
.multi-enroll-row:last-child { border-bottom: none; }
.multi-enroll-code { font-weight: 700; color: var(--ink-900); }
.multi-enroll-meta { color: var(--ink-700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.multi-enroll-year { text-align: left; color: var(--ink-500); font-size: 12px; }

@media (max-width: 700px) {
    .multi-enroll-row { grid-template-columns: 1fr 1fr; gap: 4px; padding: 8px 4px; }
    .multi-enroll-year { text-align: right; }
}

/* =========================================================================
   فید «آخرین فعالیت‌ها» در داشبورد ادمین + صفحه کامل Admin/ActivityLog.aspx
   ========================================================================= */
.activity-list { display: flex; flex-direction: column; }
.activity-row {
    display: grid;
    grid-template-columns: 140px 150px 1fr 140px;
    align-items: center;
    gap: 10px;
    padding: 10px 4px;
    border-bottom: 1px solid var(--line);
    font-size: 13px;
}
.activity-row:last-child { border-bottom: none; }
.activity-actor { font-weight: 700; color: var(--ink-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.activity-action { color: var(--brand); font-weight: 600; }
.activity-date { text-align: left; font-size: 12px; }

@media (max-width: 700px) {
    .activity-row { grid-template-columns: 1fr; gap: 2px; padding: 10px 4px; }
    .activity-date { text-align: right; }
}

/* نشان رنگی نوع عملیات در فید فعالیت‌ها - برای تفکیک چشمی سریع‌تر بین ردیف‌ها */
.badge-activity-insert  { background: var(--success-tint); color: var(--success); }
.badge-activity-update  { background: var(--amber-tint);   color: var(--amber); }
.badge-activity-delete  { background: var(--danger-tint);  color: var(--danger); }
.badge-activity-login   { background: var(--brand-tint);   color: var(--brand); }
.badge-activity-failed  { background: var(--danger-tint);  color: var(--danger); }
.badge-activity-neutral { background: #EEF0EF; color: var(--ink-500); }

/* =========================================================================
   راهنمای نصب سامانه روی گوشی - PWA (Portal/PortalLogin.aspx)
   ========================================================================= */
.install-guide {
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px dashed var(--line);
}
.install-guide-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    color: var(--ink-700);
    font-size: 13.5px;
    font-weight: 700;
}
.install-guide-toggle-icon { font-size: 16px; }
.install-guide-toggle-text { flex: 1 1 auto; text-align: right; }
.install-guide-chevron { font-size: 16px; color: var(--ink-500); }
.install-guide-body { margin-top: 14px; }
.install-guide-steps { margin: 0 0 10px; padding-inline-start: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.install-guide-steps li { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--ink-700); line-height: 1.6; }
.install-guide-step-num {
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--brand-tint);
    color: var(--brand);
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.install-guide-note { font-size: 12px; margin-top: 4px; }
.install-guide-dismiss {
    display: block;
    margin: 14px auto 0;
    background: none;
    border: none;
    color: var(--ink-500);
    font-size: 12px;
    text-decoration: underline;
    cursor: pointer;
    font-family: inherit;
}