/* =====================================================================
   مدیریت — پوستهٔ داشبورد پنل‌های /manager و /admin

   چیدمان: نوار ناوبری ثابت سمت راست (شروعِ خواندن در RTL) و محتوا سمت چپ.
   این فایل بعد از app.css و custom.css بارگذاری می‌شود، پس هرجا لازم بوده
   قانون‌های عمومی برنامه با اولویت بالاتر بازنویسی شده‌اند.
   ===================================================================== */

:root {
    --panel-nav-w: 264px;

    /* رنگ‌ها همان پالتِ برند هستند که اپ هم از آن می‌آید (`mobile/src/theme.ts`:
       brand #0F6B3F، brandDark #0A4F2E، brandDeep #08301E، accent #1E9E5A).
       نوار ناوبری قبلاً سرمهٔ #132033 با تأکیدِ زردِ #f0b429 بود؛ هیچ‌کدام از آن
       دو جای دیگری از سامانه نبودند و پنل را از اپ جدا می‌انداختند. */
    --panel-nav-bg-1: #0a4f2e;
    --panel-nav-bg-2: #08301e;
    --panel-nav-fg: rgba(255, 255, 255, .78);
    --panel-nav-muted: rgba(255, 255, 255, .58);

    /* تأکید روی زمینهٔ تیره: سبزِ روشنِ همان خانواده (نه زرد) */
    --panel-accent: #4ed08a;
    --panel-accent-soft: rgba(78, 208, 138, .16);

    --panel-bg: #f1f4f3;
    --panel-line: #e3e9e5;
    /* خطِ قوی‌تر برای حالتِ هاور (قبلاً سرمه‌ایِ #c9d6ea بود) */
    --panel-line-strong: #cddbd3;
    --panel-ink: #10231a;
    --panel-muted: #6b7c73;

    /* پیوند‌ها و حالتِ فعال در محتوای روشن — جای سرمهٔ Bootstrap */
    --panel-link: #0f6b3f;
    --panel-link-strong: #0a4f2e;
    --panel-link-soft: #e6f2eb;

    /* قرمز و هشدارِ برند — همان دو تایی که اپ در `mobile/src/theme.ts`
       دارد (`danger #B4342A`، `warning #8A6116`). آبی/زردِ پیش‌فرضِ بوت‌استرپ
       جای دیگری از سامانه نبود و پنل را از اپ جدا می‌انداخت. */
    --panel-danger: #b4342a;
    --panel-danger-soft: #fbeae8;
    --panel-warning: #8a6116;
    --panel-warning-soft: #fdf3e2;

    --panel-radius: 14px;
}

html {
    scroll-behavior: smooth;
}

body.panel-page {
    margin: 0;
    background-color: var(--panel-bg) !important;
    color: var(--panel-ink);
    /* متن راست‌چین: بدنهٔ LTR همین مقدار را به left رزولو می‌کرد و همه
       فرزندانش آن را ارث می‌بردند. */
    text-align: right;
    -webkit-font-smoothing: antialiased;
}

/* واترمارک عمومی برنامه در پنل خیلی کم‌رنگ‌تر می‌شود تا خوانایی حفظ شود */
body.panel-page::before {
    opacity: .04 !important;
}

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

/* ---------------------------------------------------------- نوار ناوبری */

.panel-nav {
    position: fixed;
    top: 0;
    bottom: 0;
    inset-inline-start: 0;
    z-index: 1040;

    display: flex;
    flex-direction: column;
    width: var(--panel-nav-w);
    padding: 1.15rem .85rem 1rem;
    overflow: hidden;

    color: var(--panel-nav-fg);
    background: linear-gradient(180deg, var(--panel-nav-bg-1) 0%, var(--panel-nav-bg-2) 100%);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .05), 0 24px 45px -35px rgba(4, 26, 16, .9);
}

.panel-brand {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .15rem .35rem 1.05rem;
}

/* لوگوی رسمیِ برنامه جای مربعِ حرف «م» */
.panel-brand-logo {
    display: block;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    padding: 2px;
    border-radius: 12px;
    background: #fff;
    object-fit: contain;
    box-shadow: 0 8px 18px -10px rgba(78, 208, 138, .55);
}

.panel-brand-text {
    min-width: 0;
}

.panel-brand-text strong {
    display: block;
    color: #fff;
    font-size: 1.02rem;
    line-height: 1.6;
}

.panel-brand-text small {
    display: block;
    color: var(--panel-nav-muted);
    font-size: .72rem;
}

.panel-nav-close {
    display: none;
    margin-inline-start: auto;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 9px;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

.panel-nav-scroll {
    flex: 1 1 auto;
    padding: 0 .15rem;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .18) transparent;
}

.panel-nav-scroll::-webkit-scrollbar {
    width: 6px;
}

.panel-nav-scroll::-webkit-scrollbar-thumb {
    border-radius: 99px;
    background: rgba(255, 255, 255, .16);
}

.panel-nav-label {
    margin: .9rem .55rem .45rem;
    color: var(--panel-nav-muted);
    font-size: .68rem;
    font-weight: 600;
}

.panel-nav-links {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.panel-nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .58rem .7rem;
    border-radius: 11px;
    color: var(--panel-nav-fg);
    font-size: .9rem;
    line-height: 1.8;
    text-decoration: none;
    transition: background-color .18s ease, color .18s ease;
}

.panel-nav-link:hover,
.panel-nav-link:focus {
    background: rgba(255, 255, 255, .07);
    color: #fff;
    text-decoration: none;
}

.panel-nav-link:focus-visible {
    outline: 2px solid var(--panel-accent);
    outline-offset: 2px;
}

.panel-nav-link.is-active {
    background: var(--panel-accent-soft);
    color: #fff;
    font-weight: 600;
}

/* نشانگر بخش فعال روی لبهٔ بیرونی نوار */
.panel-nav-link.is-active::before {
    content: "";
    position: absolute;
    inset-inline-start: -1rem;
    top: 50%;
    width: 4px;
    height: 22px;
    border-radius: 99px;
    background: var(--panel-accent);
    transform: translateY(-50%);
}

.panel-nav-icon,
.panel-nav-icon svg {
    display: block;
}

.panel-nav-icon {
    display: inline-flex;
    flex: 0 0 19px;
    color: currentColor;
    opacity: .85;
}

.panel-nav-icon svg {
    width: 19px;
    height: 19px;
}

.panel-nav-link.is-active .panel-nav-icon {
    color: var(--panel-accent);
    opacity: 1;
}

.panel-nav-text {
    min-width: 0;
}

.panel-nav-badge {
    margin-inline-start: auto;
    padding: .05rem .45rem;
    border-radius: 99px;
    background: rgba(255, 255, 255, .1);
    color: rgba(255, 255, 255, .82);
    font-size: .7rem;
}

.panel-nav-user {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-top: .9rem;
    padding: .6rem .65rem;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 12px;
    background: rgba(255, 255, 255, .05);
}

.panel-avatar {
    display: flex;
    flex: 0 0 36px;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .13);
    color: #fff;
    font-size: .92rem;
    font-weight: 600;
}

.panel-user-text {
    min-width: 0;
}

.panel-user-text strong {
    display: block;
    overflow: hidden;
    color: #fff;
    font-size: .85rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.panel-user-text small {
    display: block;
    overflow: hidden;
    color: var(--panel-nav-muted);
    font-size: .7rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.panel-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1035;
    background: rgba(8, 40, 25, .5);
}

/* ------------------------------------------------------ ستون محتوا */

.panel-wrap {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    min-height: 100vh;
    padding-inline-start: var(--panel-nav-w);
}

.panel-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;

    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .85rem 1.5rem;
    border-bottom: 1px solid var(--panel-line);
    background: rgba(255, 255, 255, .88);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.panel-burger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--panel-line);
    border-radius: 11px;
    background: #fff;
    color: var(--panel-ink);
    cursor: pointer;
}

.panel-burger svg {
    width: 20px;
    height: 20px;
}

.panel-heading {
    margin: 0;
    color: var(--panel-ink);
    font-size: 1.15rem;
    font-weight: 700;
}

.panel-heading small {
    display: block;
    margin-top: .1rem;
    color: var(--panel-muted);
    font-size: .72rem;
    font-weight: 400;
}

.panel-topbar-end {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-inline-start: auto;
}

.panel-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .7rem;
    border: 1px solid var(--panel-line);
    border-radius: 99px;
    background: #fff;
    color: var(--panel-muted);
    font-size: .78rem;
    white-space: nowrap;
}

.panel-chip svg {
    width: 15px;
    height: 15px;
}

/* -------------------------------------- چیپِ وضعیتِ کانالِ زنده

   مارک‌آپ را `partials/timer-hub-chip.blade.php` می‌نویسد (هم در پنل مدیریت
   و هم در صفحهٔ حضور و غیاب) و متنش را `public/js/timer.js` عوض می‌کند؛
   تنها چیزی که اینجا تعریف می‌شود شکل و رنگِ دو حالت است:

     data-state="live"    → کانالِ WebSocket باز است (سبزِ برند)
     data-state="polling" → سوکت نیست، تازه‌سازی دوره‌ای است (خاکستری)

   رنگ عمداً از پالتِ خودِ پنل می‌آید (نه سبز/قرمزِ وضعیتِ تقویم) تا با
   زبانِ رنگیِ بقیهٔ نوار بالا یکی باشد.

   در حالتِ «زنده» نقطه نبض می‌گیرد (حلقهٔ سبز که از خودش بیرون می‌زند +
   نفسِ ملایمِ شفافیت). چرا لازم است: تغییرِ متن را کاربر فقط وقتی می‌بیند که
   نگاهش همان لحظه وسطِ چیپ باشد؛ حرکت چشم را می‌گیرد و بی‌آنکه چیزی نوشته
   شود می‌گوید «این کانال همین حالا باز است». در حالتِ «دوره‌ای» هیچ حرکتی
   نیست: سکونِ خاکستری خودش یعنی «فقط درخواستِ دوره‌ای».

   حرکت کاملاً تزئینی است؛ پس اگر کاربر Reduce Motion روشن کرده باشد، خاموش
   می‌شود و همان سایهٔ ثابتِ سبز جای نبض را می‌گیرد. */
.panel-live {
    gap: .45rem;
}

.panel-live-dot {
    flex: 0 0 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--panel-muted);
}

.panel-live[data-state="live"] {
    border-color: #cfe6da;
    background: var(--panel-link-soft);
    color: var(--panel-link-strong);
}

@keyframes panel-live-ring {
    0%   { box-shadow: 0 0 0 0 rgba(15, 107, 63, .38); }
    70%  { box-shadow: 0 0 0 7px rgba(15, 107, 63, 0); }
    100% { box-shadow: 0 0 0 0 rgba(15, 107, 63, 0); }
}

@keyframes panel-live-breathe {
    0%, 100% { opacity: 1; }
    50%      { opacity: .62; }
}

.panel-live[data-state="live"] .panel-live-dot {
    background: var(--panel-link);
    animation: panel-live-ring 2.4s ease-out infinite,
               panel-live-breathe 2.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .panel-live[data-state="live"] .panel-live-dot {
        animation: none;
        box-shadow: 0 0 0 3px rgba(15, 107, 63, .16);
    }
}

.panel-live-peers {
    color: var(--panel-muted);
}

.panel-live[data-state="live"] .panel-live-peers {
    color: var(--panel-link);
}

.panel-iconbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--panel-line);
    border-radius: 11px;
    background: #fff;
    color: var(--panel-muted);
    text-decoration: none;
    transition: color .18s ease, border-color .18s ease;
}

.panel-iconbtn:hover {
    color: #cf3d33;
    border-color: #f2c9c6;
    text-decoration: none;
}

.panel-iconbtn svg {
    width: 18px;
    height: 18px;
}

/* دکمهٔ سبزِ نوار بالای صفحهٔ حضور (امروز: «اپلیکیشن»).

   چرا کلاسِ اختصاصی و نه `btn btn-sm btn-primary`: آبیِ `btn-primary` را در
   همین فایل عمداً نگه داشته‌ایم، چون همان رنگ وضعیتِ روزهای تقویم است
   (حضور/مرخصی/غیبت). این دکمه کاری به تقویم ندارد و آبیِ بوت‌استرپ وسطِ
   پالتِ سبزِ پنل، «از یک برنامهٔ دیگر» به نظر می‌رسید. پس همان سبزِ برند
   را می‌گیرد. */
.att-topbtn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .32rem .8rem;
    border: 1px solid var(--panel-link);
    border-radius: 8px;
    background-color: var(--panel-link);
    color: #fff;
    font-size: .82rem;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.att-topbtn:hover,
.att-topbtn:focus {
    background-color: var(--panel-link-strong);
    border-color: var(--panel-link-strong);
    color: #fff;
    text-decoration: none;
}

/* همان دکمه با آیکونِ گوشی — فشرده‌تر تا در نوارِ شلوغِ بالای صفحه دو خط
   نشود. */
.att-topbtn-app {
    gap: .3rem;
    padding: .28rem .7rem;
    font-size: .8rem;
}

/* «ورود مدیر» برای بازدیدکنندهٔ بی‌نشست. عمداً متنِ کم‌رنگ و بدونِ قاب است،
   نه دکمه: این صفحه محلِ کارِ کارکنان است و مدیر فقط باید راهش را پیدا
   کند، نه اینکه دعوت به پنل وسطِ صفحهٔ حضور باشد. */
.att-login-link {
    color: var(--panel-muted);
    font-size: .78rem;
    text-decoration: none;
    border-bottom: 1px dashed var(--panel-line);
    padding-bottom: 1px;
}

.att-login-link:hover,
.att-login-link:focus {
    color: var(--panel-link);
    text-decoration: none;
}

.panel-content {
    flex: 1 1 auto;
    min-width: 0;
    padding: 1.4rem 1.5rem 2.2rem;
}

/* بخش‌های خود پنل با .container می‌آیند؛ داخل پنل کل عرض موجود را می‌گیرند */
.panel-content > .container {
    width: 100%;
    max-width: 100%;
}

.panel-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    flex-wrap: wrap;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--panel-line);
    background: rgba(255, 255, 255, .6);
    color: var(--panel-muted);
    font-size: .78rem;
}

.panel-footer a {
    color: var(--panel-muted);
}

/* ------------------------------------------------------------- کارت‌ها */

body.panel-page .panel-content .card {
    border: 1px solid var(--panel-line);
    border-radius: var(--panel-radius) !important;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 14px 34px -26px rgba(16, 24, 40, .55);
    margin-bottom: 1.35rem;
}

body.panel-page .panel-content .card-body {
    padding: 1.15rem 1.25rem;
}

body.panel-page .panel-content .card > .card-header {
    padding: .95rem 1.25rem;
    border-bottom: 1px solid var(--panel-line);
    border-radius: var(--panel-radius) var(--panel-radius) 0 0 !important;
    background: #fff;
    color: var(--panel-ink);
    font-size: 1.02rem;
    font-weight: 700;
}

body.panel-page .panel-content .card .card-header small {
    font-weight: 400;
}

body.panel-page .panel-content .card .card-header small a {
    color: var(--panel-muted);
}

body.panel-page .panel-content .card .card-header small a:hover {
    color: var(--panel-link);
}

/* کارت‌های تودرتو (مثل کارت هر کارمند در تقویم‌ها) سبک‌ترند */
body.panel-page .panel-content .card .card .card {
    border-color: #e8eeea;
    box-shadow: none;
    margin-bottom: 0;
}

body.panel-page .panel-content .card .card > .card-header {
    background: #f7f9f8;
    font-size: .9rem;
    font-weight: 600;
}

body.panel-page .panel-content .card-footer {
    border-top: 1px solid var(--panel-line);
    background: #fafcfb;
    border-radius: 0 0 var(--panel-radius) var(--panel-radius) !important;
}

/* ---------------------------------------------------- جدول‌ها و فرم‌ها */

body.panel-page .panel-content .table {
    margin-bottom: 0;
}

body.panel-page .panel-content .table th,
body.panel-page .panel-content .table td {
    vertical-align: middle;
}

body.panel-page .panel-content .table thead th {
    border-top: 0;
    border-bottom: 1px solid var(--panel-line);
    color: var(--panel-muted);
    font-size: .8rem;
    font-weight: 600;
}

body.panel-page .panel-content .table-striped tbody tr:nth-of-type(odd) {
    background-color: #f7f9f8;
}

body.panel-page .panel-content .table tbody tr:hover {
    background-color: #f2f6f4;
}

body.panel-page .form-control,
body.panel-page .form-select {
    border-color: #dbe3de;
    border-radius: 10px;
}

body.panel-page .form-control:focus,
body.panel-page .form-select:focus {
    border-color: #a8cfb8;
    box-shadow: 0 0 0 .18rem rgba(15, 107, 63, .12);
}

body.panel-page .input-group-text {
    border-color: #dbe3de;
    border-radius: 10px;
    background: #f4f7f5;
    color: var(--panel-muted);
    font-size: .82rem;
}

/* Bootstrap 4 گوشه‌های گروه ورودی را با فرض چیدمان LTR می‌چیند
   (`:not(:last-child)` گوشهٔ راست را صفر می‌کند). در پنل RTL ترتیب بصری
   عناصر برعکس ترتیب DOM است، پس رادیوس‌ها روی لبهٔ داخلی می‌افتادند و گروه
   «چپکی» دیده می‌شد.

   آن قاعدهٔ بوت‌استرپ از زنجیرهٔ `:not(...)` استفاده می‌کند و پنج کلاس
   اختصاصی‌بودن دارد (`.input-group:not(.has-validation) > :not(:last-child)...`)،
   پس یک انتخابگر سه‌کلاسی رویش اثر نمی‌گذارد و همیشه آخر حرف را می‌زند. برای
   همین هر چهار گوشهٔ عضوهای دو سر گروه صریح و با اولویت تنظیم می‌شود تا نتیجه
   به ترتیب و اختصاصی‌بودن قاعده‌های بوت‌استرپ وابسته نباشد. */
body.panel-page .input-group > .form-control,
body.panel-page .input-group > .custom-select,
body.panel-page .input-group > .custom-file,
body.panel-page .input-group > .input-group-text,
body.panel-page .input-group > .input-group-prepend,
body.panel-page .input-group > .input-group-append {
    border-radius: 0;
    margin-left: 0;
    margin-right: 0;
}

body.panel-page .input-group > * + * {
    margin-right: -1px;
}

/* عضو اولِ DOM در RTL سمت راست گروه است: گوشه‌های بیرونی‌اش راست و
   گوشه‌های داخلی‌اش تخت */
body.panel-page .input-group > :first-child,
body.panel-page .input-group > :first-child > .input-group-text,
body.panel-page .input-group > :first-child > .btn {
    border-top-right-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* عضو آخرِ DOM سمت چپ گروه است */
body.panel-page .input-group > :last-child,
body.panel-page .input-group > :last-child > .input-group-text,
body.panel-page .input-group > :last-child > .btn {
    border-top-left-radius: 10px !important;
    border-bottom-left-radius: 10px !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* گروه تک‌عضوی هم اول است و هم آخر؛ گوشه‌هایش کامل گرد می‌ماند */
body.panel-page .input-group > :only-child {
    border-radius: 10px !important;
}

body.panel-page .btn {
    border-radius: 10px;
}

body.panel-page .btn-sm {
    border-radius: 8px;
}

/* ------------------------------------------- کنترل‌های رنگیِ بوت‌استرپ

   چرا این بلوک لازم شد: خودِ پوسته (نوار ناوبری، کارت، جدول، تب) با پالتِ
   برند بازنویسی شده بود، ولی عناصری که کلاسشان را از خودِ صفحه می‌گیرند
   هنوز رنگِ پیش‌فرضِ بوت‌استرپ را می‌کشیدند و در نگاه اول «از یک برنامهٔ دیگر»
   به نظر می‌رسیدند:

     • پیوندهای داخل محتوا (حذف/گزارش/فعالیت/…) آبیِ `#3490dc` بودند.
     • چک‌باکس و سوییچِ فعال (`form-check-input` و `custom-control-input`)
       همان آبی را داشتند.
     • دکمه‌های خطیِ ابزارها (`btn-outline-primary`) آبیِ خالص بودند.

   چه چیزی عمداً دست‌نخورده ماند: `btn-primary` / `btn-success` /
   `btn-danger` / `btn-warning` / `btn-secondary` — این پنج، رنگِ **وضعیت** در
   مربع‌های روزِ تقویم‌اند (مرخصی/حضور/غیبت/خاص/بدون‌رکورد) و خواننده از همین
   تفاوتِ رنگ، وضعیتِ ماه را می‌خواند؛ سبزِ برند کردنِ «مرخصی» آن را با
   «حضور» یکی می‌کرد. پس پالتِ برند فقط جایی نشسته که رنگ معنا ندارد. */

/* دکمهٔ اصلیِ صفحهٔ دانلودِ اپ خودش زمینهٔ سبز و متنِ سفید دارد؛ این قاعده
   نباید متنش را سبز کند — سبز روی سبز اصلاً خوانا نیست. */
body.panel-page .panel-content a:not(.btn):not(.nav-link):not(.page-link):not(.app-dl-btn) {
    color: var(--panel-link);
}

body.panel-page .panel-content a:not(.btn):not(.nav-link):not(.page-link):not(.app-dl-btn):hover {
    color: var(--panel-link-strong);
}

/* عددِ روزِ تقویم داخل مربع می‌نشیند؛ آنجا رنگِ متن مالِ خودِ مربع است
   (سفید روی سبز/قرمز/زرد)، پس قاعدهٔ بالا نباید به آن دست بزند. */
body.panel-page .att-content .col a,
body.panel-page .att-days .col a {
    color: inherit;
    text-decoration: none;
}

/* چک‌باکس و سوییچِ فعال — بوت‌استرپ ۵ */
body.panel-page .form-check-input:checked {
    background-color: var(--panel-link);
    border-color: var(--panel-link);
}

body.panel-page .form-check-input:focus {
    border-color: #a8cfb8;
    box-shadow: 0 0 0 .18rem rgba(15, 107, 63, .16);
}

/* همان چیز در بوت‌استرپ ۴ (`custom-control`) که app.css هم دارد */
body.panel-page .custom-control-input:checked ~ .custom-control-label::before,
body.panel-page .custom-control-input:focus ~ .custom-control-label::before {
    border-color: var(--panel-link);
    background-color: var(--panel-link);
}

body.panel-page .custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 .18rem rgba(15, 107, 63, .16);
}

/* دکمه‌های خطیِ ابزارها («ورود مدیر»، «فعال کردن این روز»، «بازگردانی») */
body.panel-page .btn-outline-primary {
    color: var(--panel-link);
    border-color: #a8cfb8;
}

body.panel-page .btn-outline-primary:hover,
body.panel-page .btn-outline-primary:focus,
body.panel-page .btn-outline-primary:not(:disabled):not(.disabled):active {
    border-color: var(--panel-link);
    background-color: var(--panel-link);
    color: #fff;
}

body.panel-page .btn-outline-secondary {
    color: var(--panel-muted);
    border-color: var(--panel-line-strong);
}

body.panel-page .btn-outline-secondary:hover,
body.panel-page .btn-outline-secondary:focus {
    border-color: var(--panel-line-strong);
    background-color: #eef2f0;
    color: var(--panel-ink);
}

body.panel-page .btn-outline-danger {
    color: var(--panel-danger);
    border-color: #e6bdb8;
}

body.panel-page .btn-outline-danger:hover,
body.panel-page .btn-outline-danger:focus {
    border-color: var(--panel-danger);
    background-color: var(--panel-danger);
    color: #fff;
}

body.panel-page .btn-light {
    border-color: var(--panel-line);
    background-color: #fff;
    color: var(--panel-ink);
}

body.panel-page .btn-light:hover,
body.panel-page .btn-light:focus {
    border-color: var(--panel-line-strong);
    background-color: #f4f7f5;
}

/* پیام‌های سیستمی: سبزِ برند و هشدارِ برند جای زرد و سبزِ پیش‌فرض */
body.panel-page .alert-success {
    border-color: #cfe6da;
    background-color: var(--panel-link-soft);
    color: #0b5230;
}

body.panel-page .alert-warning {
    border-color: #efe0c4;
    background-color: var(--panel-warning-soft);
    color: var(--panel-warning);
}

body.panel-page .alert-danger {
    border-color: #f0cdc9;
    background-color: var(--panel-danger-soft);
    color: var(--panel-danger);
}

body.panel-page .panel-content .nav-tabs {
    width: auto;
    border-bottom: 1px solid var(--panel-line);
}

body.panel-page .panel-content .nav-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0 !important;
    color: var(--panel-muted);
    font-size: .88rem;
}

body.panel-page .panel-content .nav-tabs .nav-link.active {
    border-bottom-color: var(--panel-link);
    background: transparent;
    color: var(--panel-link);
    font-weight: 600;
}

body.panel-page .panel-content code {
    color: #b45309;
}

/* ------------------------------------------- کنترل تاریخ فعال سامانه */

.panel-chip-btn {
    cursor: pointer;
    font-family: inherit;
}

.panel-chip-btn:hover {
    border-color: var(--panel-line-strong);
    color: var(--panel-ink);
    text-decoration: none;
}

.panel-chip-btn.is-override {
    border-color: #e8d8b6;
    background: #fdf3e2;
    color: #8a6116;
    font-weight: 600;
}

.panel-chip-caret {
    width: 13px;
    height: 13px;
    opacity: .55;
}

.panel-datepick {
    position: relative;
}

.panel-datepick-menu {
    min-width: 272px;
    padding: .95rem;
    border: 1px solid var(--panel-line);
    border-radius: 14px;
    box-shadow: 0 22px 45px -30px rgba(4, 26, 16, .55);
}

.panel-datepick-title {
    margin: 0 0 .5rem;
    color: var(--panel-ink);
    font-size: .82rem;
    font-weight: 600;
}

.panel-datepick-label {
    display: block;
    margin-bottom: .35rem;
    color: var(--panel-muted);
    font-size: .78rem;
}

.panel-datepick-sep {
    position: relative;
    margin: 1rem 0;
    border-top: 1px dashed var(--panel-line);
    text-align: center;
}

.panel-datepick-sep span {
    position: relative;
    top: -.72rem;
    padding: 0 .5rem;
    background: #fff;
    color: var(--panel-muted);
    font-size: .72rem;
}

/* انتخاب‌گر جلالیِ «یک روز دقیق» (js/jdate-picker.js) */

.panel-datepick-value {
    display: block;
    width: 100%;
    text-align: right;
    cursor: pointer;
    background: #fff;
    font-variant-numeric: tabular-nums;
}

.panel-datepick-value:hover,
.panel-datepick-value:focus {
    border-color: var(--panel-line-strong);
    color: var(--panel-ink);
}

.jdp {
    margin-top: .4rem;
    padding: .5rem;
    border: 1px solid var(--panel-line);
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 14px 30px -24px rgba(9, 20, 38, .8);
}

.jdp-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .35rem;
    margin-bottom: .4rem;
}

.jdp-title {
    color: var(--panel-ink);
    font-size: .8rem;
    font-weight: 600;
}

.jdp-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 27px;
    height: 25px;
    padding: 0;
    border: 1px solid var(--panel-line);
    border-radius: 7px;
    background: #fff;
    color: var(--panel-muted);
    cursor: pointer;
}

.jdp-nav:hover {
    border-color: var(--panel-line-strong);
    color: var(--panel-ink);
}

.jdp-nav svg {
    width: 13px;
    height: 13px;
}

.jdp-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.jdp-wd {
    padding: .1rem 0 .2rem;
    color: var(--panel-muted);
    font-size: .66rem;
    font-weight: 700;
    text-align: center;
}

.jdp-day {
    padding: .28rem 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--panel-ink);
    font-family: inherit;
    font-size: .75rem;
    line-height: 1.1;
    cursor: pointer;
}

.jdp-day:hover {
    background: #eef4f0;
}

.jdp-day.is-empty {
    visibility: hidden;
    cursor: default;
}

.jdp-day.is-today {
    box-shadow: inset 0 0 0 1px var(--panel-line-strong);
    font-weight: 700;
}

.jdp-day.is-sel {
    background: var(--panel-link);
    color: #fff;
    font-weight: 700;
}

.jdp-day.is-sel:hover {
    background: var(--panel-link);
}

.jdp-foot {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: .45rem;
}

.jdp-today {
    padding: .15rem .55rem;
    border: 1px solid var(--panel-line);
    border-radius: 99px;
    background: #fff;
    color: var(--panel-muted);
    font-family: inherit;
    font-size: .7rem;
    cursor: pointer;
}

.jdp-today:hover {
    border-color: var(--panel-line-strong);
    color: var(--panel-ink);
}

/* نوار هشدار وقتی سامانه روی تاریخی غیر از امروز کار می‌کند */
.panel-datebar {
    display: flex;
    align-items: center;
    gap: .7rem;
    flex-wrap: wrap;
    padding: .7rem 1.5rem;
    border-bottom: 1px solid #e8d8b6;
    background: #fdf3e2;
    color: #8a6116;
    font-size: .85rem;
}

.panel-datebar-icon {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    color: #8a6116;
}

.panel-datebar-text strong {
    font-weight: 700;
}

.panel-datebar-text small {
    display: block;
    color: #a08453;
    font-size: .75rem;
}

.panel-datebar-form {
    margin-inline-start: auto;
}

/* =====================================================================
   صفحهٔ حضور و غیاب (صفحهٔ اصلی)
   پوستهٔ همان داشبورد است، فقط به‌جای نوار کناری یک هدر دارد.
   ===================================================================== */

.att-topbar-inner {
    display: flex;
    align-items: center;
    gap: .85rem;
    flex: 1 1 auto;
    flex-wrap: wrap;
    width: 100%;
    max-width: 1560px;
    margin: 0 auto;
}

.att-brand {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.att-brand-text strong {
    display: block;
    color: var(--panel-ink);
    font-size: 1.02rem;
}

.att-brand-text small {
    display: block;
    color: var(--panel-muted);
    font-size: .72rem;
}

.att-nav {
    display: flex;
    align-items: center;
    gap: .25rem;
    margin-inline-start: .5rem;
}

.att-nav-link {
    padding: .4rem .85rem;
    border-radius: 999px;
    color: var(--panel-muted);
    font-size: .86rem;
    text-decoration: none;
}

.att-nav-link:hover {
    background: var(--panel-link-soft);
    color: var(--panel-ink);
    text-decoration: none;
}

.att-nav-link.is-active {
    background: var(--panel-link-soft);
    color: var(--panel-link);
    font-weight: 600;
}

.att-topbar-end {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-inline-start: auto;
}

.att-content {
    width: 100%;
    max-width: 1560px;
    margin: 0 auto;
}

/* کارت هر همکار در بخش تردد (بدون دست زدن به نمایه‌ها، فقط چیدمان) */
.att-content .card-img-top {
    display: block;
    width: 100%;
    height: 240px;
    object-fit: cover;
    background: var(--panel-line);
}

.att-content .card-title {
    color: var(--panel-ink);
    font-size: 1.02rem;
    font-weight: 700;
}

.att-content .card-subtitle {
    color: var(--panel-muted);
    font-size: .8rem;
}

/* جعبهٔ تایمر زیر نام همکار */
.att-content .inverse-timer {
    width: auto;
    margin: .2rem .4rem .8rem;
    padding: .65rem 1rem;
    border: 1px solid var(--panel-line);
    border-radius: 12px;
    background: linear-gradient(180deg, #f8fbf9, #eef4f0);
}

.att-content .digital-timer {
    font-size: 1.3rem !important;
    font-weight: 700;
}

/* دکمه‌های شروع/توقف در یک ردیف با فاصله (شروع سمت راست در RTL) */
/* دکمه‌های شروع/توقف در یک ردیف با فاصله (شروع سمت راست در RTL).
   به `body.panel-page` چسبیده تا در هر دو صفحه (حضور‌غیاب و میزکار) اعمال
   شود؛ بوت‌استرپ برای عضو اولِ گروه گوشهٔ راست را صفر می‌کند که در RTL گوشهٔ
   داخلیِ جفت است و ظاهر «چپکی» می‌سازد، پس هر چهار گوشه صریح و با اولویت
   تنظیم می‌شود تا هر دو دکمه یکسان گِرد شوند. */
body.panel-page .tab-pane .btn-group {
    display: flex !important;
    gap: .5rem;
    justify-content: center;
    direction: rtl;
}

body.panel-page .tab-pane .btn-group > .btn {
    flex: 1 1 0;
    margin: 0;
    border-top-left-radius: 10px !important;
    border-top-right-radius: 10px !important;
    border-bottom-left-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
}

/* خلاصهٔ پای هر ماه (حضور/غیبت/...) با فاصله و چیدمان راست‌به‌چپ */
body.panel-page .card-footer .btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    direction: rtl;
}

body.panel-page .card-footer .btn-group > .btn {
    margin: 0;
    border-radius: 8px !important;
}

/* خانه‌های روزهای ماه در «فعالیت ماهانه»
   کلاس‌های رنگی از خود صفحه می‌آیند (btn-success و...)؛ اینجا فقط شکل‌شان و
   رنگ روزهای بدون داده تنظیم می‌شود. */
.att-content .row > .col {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    margin-bottom: 0;
    border: 0;
    /* شکاف سفید بین خانه‌ها بدون تغییر عرض (`.col` عرض ثابت ۱۶٪ دارد).
       عدد از ۳ به ۲ آمد: با ۳ پیکسل، خانه‌ها بی‌دلیل کوچک‌تر از آنچه هستند
       دیده می‌شدند و شکاف سفید بیشتر از خودِ روز به چشم می‌آمد. */
    box-shadow: inset 0 0 0 2px #fff;
    border-radius: 10px;
    font-size: .82rem;
}

/* رنگ خانه‌هایی که هیچ وضعیتی ندارند (بدون کلاس `btn-*`).
   این رنگ عمداً روی قاعدهٔ پایه گذاشته نشد: آن قاعده با ویژگی بیشتر
   (`0,3,0` در برابر `0,1,0`) رنگِ کلاس‌های وضعیتِ خودِ صفحه
   (`btn-success` حضور، `btn-danger` غیبت، `btn-warning` خاص، …) را خنثی
   می‌کرد و همهٔ روزها خاکستریِ یکسان دیده می‌شدند. */
.att-content .row > .col:not([class*="btn-"]) {
    background: #e8eeea;
    color: #64748b;
}

/* تعطیل فقط وقتی خاکستریِ تیره بگیرد که وضعیتِ دیگری (خاص/حضور/…) نداشته
   باشد. قبلاً این قاعده روی رنگ کلاس وضعیت می‌نشست و روزِ «خاص روی تعطیل»
   در صفحهٔ اصلی برخلاف میزکار زرد دیده نمی‌شد. */
.att-content .row > .col.cln-holiday:not([class*="btn-"]) {
    background: #5b6b64;
    color: #fff;
}

.att-content .row > .col.cln-disabled {
    background: #e7ecea;
    color: #93a09a;
}

/* خانه‌های روزهای ماه در «فعالیت ماهانه» */
.att-days .col {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    margin-bottom: 0;
    border: 0;
    border-radius: 10px;
    /* شکاف سفید بدون تغییر عرض خانه‌ها (`.col` در این برنامه عرض ثابت دارد) */
    box-shadow: inset 0 0 0 3px #fff;
    color: #fff;
    font-size: .82rem;
}

.att-days .col.cln-holiday {
    color: #fff;
}

.att-days .col.cln-disabled {
    background: #eef1f0;
    color: #97a29c;
}

/* خانه‌های روز باید مربع باشند: عرض `.col` برابر ۱۶٪ ردیف است و ارتفاع قبلاً
   یا ثابتِ ۵۰ پیکسل بود (`app.css`: `.col { height: 50px }` که بر `aspect-ratio`
   غلبه می‌کند) یا ۳۴ پیکسل، پس خانه مستطیل دیده می‌شد. اینجا `height: auto`
   می‌شود و ارتفاع = عرض، یعنی مربع واقعی در هر عرض صفحه. */
body.panel-page .row > .col {
    height: auto;
    aspect-ratio: 1;
    min-height: 0;
}

/* پیش‌فرض مرورگر برای هر ul یک `padding-inline-start: 40px` است که در RTL
   سمت راست می‌نشیند؛ بوت‌استرپ فقط `padding-left` را صفر می‌کند و نتیجه
   فاصلهٔ نامساوی چپ/راست در کارت تایمر بود (۲۲ پیکسل در برابر ۶۲). */
body.panel-page .list-group {
    padding-right: 0;
}

.att-summary {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

/* هدف پرش لنگرها کمی پایین‌تر از نوار چسبان بالا بیفتد */
body.panel-page .panel-content [id] {
    scroll-margin-top: 96px;
}

/* ----------------------------------------------------------- پیام‌ها */

/* توست‌ها در همهٔ صفحه‌های پنل به لبهٔ راست می‌چسبند.
   `right: 0` یعنی همان لبهٔ محتوا و فاصلهٔ دیداری را خودِ `p-3` روی پشته
   می‌سازد. عمداً دیگر به عرض منو (`--panel-nav-w`) عقب رانده نمی‌شوند و
   `z-index` بالاتر از منو (۱۰۴۰) اجازه می‌دهد روی منو بنشینند؛ قبلاً در
   صفحهٔ بدونِ منو همین قاعده ۲۸۰ پیکسل فاصلهٔ بی‌دلیل می‌ساخت و در
   صفحهٔ منودار توست را کنار منو نگه می‌داشت. */
body.panel-page .toasts-stack {
    right: 0 !important;
    z-index: 1080 !important;
}

/* --------------------------------------------------------- موبایل */

@media (max-width: 991.98px) {
    .panel-nav {
        inset-inline-start: auto;
        right: 0;
        transform: translateX(100%);
        transition: transform .28s ease;
        box-shadow: -18px 0 40px -28px rgba(9, 20, 38, .9);
    }

    body.panel-nav-open .panel-nav {
        transform: translateX(0);
    }

    body.panel-nav-open .panel-backdrop {
        display: block;
    }

    .panel-nav-close,
    .panel-burger {
        display: inline-flex;
    }

    .panel-wrap {
        padding-inline-start: 0;
    }

    .panel-topbar,
    .panel-content,
    .panel-footer {
        padding-right: 1rem;
        padding-left: 1rem;
    }
}

@media (max-width: 575.98px) {
    /* تاریخ فعال سامانه و چیپِ وضعیت روی موبایل هم می‌مانند: اولی برای
       پرش بین ماه‌ها لازم است و دومی همان چیزی است که کاربر دنبالش است؛
       در عوض برندِ فرعی و سربرگ‌های سریع که فقط تزئینی‌اند جمع می‌شوند. */
    .att-brand-text small,
    .att-nav {
        display: none;
    }

    .panel-chip {
        padding: .3rem .55rem;
        font-size: .74rem;
    }

    .panel-chip svg {
        width: 13px;
        height: 13px;
    }

    .panel-datepick-menu {
        min-width: 0;
        width: calc(100vw - 2.5rem);
    }
}

/* ------------------------------------------------------ صفحهٔ ورود */

.auth-page {
    min-height: 100vh;
}

.auth-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    min-height: 100vh;
    padding: 2rem 1rem;
}

.auth-card {
    width: 100%;
    max-width: 420px;
    padding: 1.6rem;
    border: 1px solid var(--panel-line);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 30px 60px -30px rgba(9, 20, 38, .45);
}

.auth-head {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin-bottom: 1.2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--panel-line);
}

.auth-logo {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: #fff;
    object-fit: contain;
    box-shadow: 0 6px 16px -10px rgba(9, 20, 38, .6);
}

.auth-brand strong {
    display: block;
    color: var(--panel-ink);
    font-size: 1.1rem;
}

.auth-brand small {
    display: block;
    color: var(--panel-muted);
    font-size: .78rem;
}

.auth-title {
    margin: 0 0 .25rem;
    color: var(--panel-ink);
    font-size: 1.15rem;
    font-weight: 700;
}

.auth-hint {
    margin: 0 0 1.1rem;
    color: var(--panel-muted);
    font-size: .82rem;
}

.auth-field {
    display: block;
    margin-bottom: .9rem;
}

.auth-field > span {
    display: block;
    margin-bottom: .35rem;
    color: var(--panel-ink);
    font-size: .82rem;
    font-weight: 600;
}

.auth-field .form-control {
    height: 44px;
    border: 1px solid var(--panel-line);
    border-radius: 10px;
}

.auth-field .form-control:focus {
    border-color: var(--panel-link);
    box-shadow: 0 0 0 3px rgba(15, 107, 63, .15);
}

.auth-remember {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: 0 0 1.1rem;
    color: var(--panel-muted);
    font-size: .82rem;
    cursor: pointer;
}

.auth-submit {
    width: 100%;
    height: 46px;
    border-radius: 10px;
    font-weight: 700;
}

/* راهنمای کوتاهِ زیرِ فیلد (مثلِ «حداقل ۶ کاراکتر»). عمداً کوچک و کم‌رنگ
   است تا با متنِ پیامِ خطا اشتباه گرفته نشود. */
.auth-field-hint {
    display: block;
    margin-top: .3rem;
    color: var(--panel-muted);
    font-size: .74rem;
}

/* کارتِ پیام (موفق/خطا) روی فرم‌های صفحه‌های ورود.

   قبلاً فقط ورودی‌ها قرمز می‌شدند و بالای فرم هیچ پیامی نبود؛ روی صفحهٔ
   تغییر رمز که خطا ممکن است به هیچ فیلدی نچسبد (رمزِ فعلیِ غلط)، باید یک
   جای مشخص برای خواندنِ دلیل باشد. */
.auth-note {
    margin-bottom: 1rem;
    padding: .6rem .8rem;
    border-radius: 10px;
    font-size: .82rem;
    line-height: 1.9;
}

.auth-note span {
    display: block;
}

.auth-note-ok {
    border: 1px solid #cfe8d7;
    background: #f2faf4;
    color: #14663c;
}

.auth-note-error {
    border: 1px solid #f0cfcb;
    background: #fdf4f3;
    color: #a12d24;
}

/* لینک‌های پایینِ فرم (بازگشت به پنل / خروج) — دو کنشِ کم‌اهمیت‌تر از
   ذخیره، پس در یک ردیفِ جدا و بدونِ دکمهٔ پُر می‌آیند. */
.auth-links {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    flex-wrap: wrap;
    margin-top: 1rem;
    font-size: .8rem;
}

.auth-links a {
    color: var(--panel-link);
    text-decoration: none;
}

.auth-links a:hover,
.auth-links a:focus {
    text-decoration: underline;
}

.auth-logout {
    margin: 0;
}

.auth-logout button {
    padding: 0;
    border: 0;
    background: none;
    color: var(--panel-muted);
    font-size: inherit;
    cursor: pointer;
}

.auth-logout button:hover,
.auth-logout button:focus {
    color: #a12d24;
    text-decoration: underline;
}

.auth-foot-note {
    margin: 1rem 0 0;
    padding-top: .8rem;
    border-top: 1px solid var(--panel-line);
    color: var(--panel-muted);
    font-size: .76rem;
    word-break: break-all;
}

.auth-foot {
    margin: 0;
    color: var(--panel-muted);
    font-size: .75rem;
}

/* ------------------------------------ صفحهٔ ورود: قطعِ اتصال

   کارت همیشه در HTML است و js/auth-connection.js با برداشتنِ `hidden`
   نشانش می‌دهد؛ پس در حالتِ عادی هیچ فضایی نمی‌گیرد. رنگ قرمز فقط برای
   «قطع است» است — وقتی دارد بررسی می‌کند (`is-checking`) خنثی می‌شود تا
   چشم کاربر الکی نگران نشود. */

.auth-connection {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin: 0 0 1rem;
    padding: .75rem .85rem;
    border: 1px solid rgba(220, 53, 69, .35);
    border-radius: 12px;
    background: rgba(220, 53, 69, .06);
    color: #b02a37;
}

.auth-connection[hidden] {
    display: none;
}

.auth-connection-icon {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(220, 53, 69, .12);
}

.auth-connection-text {
    flex: 1 1 auto;
    min-width: 0;
}

.auth-connection-text strong {
    display: block;
    font-size: .84rem;
}

.auth-connection-text small {
    display: block;
    margin-top: .15rem;
    color: var(--panel-muted);
    font-size: .74rem;
    line-height: 1.7;
}

.auth-connection-retry {
    flex: 0 0 auto;
    height: 38px;
    padding: 0 .9rem;
    border-radius: 10px;
    font-size: .8rem;
    font-weight: 700;
}

.auth-connection.is-checking {
    border-color: var(--panel-line);
    background: #f6f8f7;
    color: var(--panel-ink);
}

/* «در حال بررسی» یک حالتِ خنثی است، نه موفقیت؛ پس سرمه‌ایِ Bootstrap هم به
   سبزِ برند تبدیل نمی‌شود و به خاکستریِ سردِ اپ می‌رود. */
.auth-connection.is-checking .auth-connection-icon {
    background: rgba(34, 48, 58, .12);
    color: #22303a;
}

@media (max-width: 420px) {
    .auth-connection {
        flex-wrap: wrap;
    }

    .auth-connection-retry {
        width: 100%;
    }
}

/* --------------------------------------------- تقویم فعالیت سالانه */

.panel-cal-head {
    display: flex;
    align-items: center;
    gap: .9rem;
}

.panel-cal-avatar {
    flex: 0 0 auto;
    width: 84px;
    height: 84px;
    border: 1px solid var(--panel-line);
    border-radius: 18px;
    background: var(--panel-line);
    object-fit: cover;
}

.panel-cal-who {
    min-width: 0;
}

.panel-cal-who strong {
    display: block;
    color: var(--panel-ink);
    font-size: 1.05rem;
}

.panel-cal-who small {
    display: block;
    color: var(--panel-muted);
    font-size: .8rem;
}

/* ماه‌ها کنار هم می‌نشینند؛ قبلاً یک ستونِ تمام‌عرضِ بی‌پایان بود */
.panel-cal-months {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}

.panel-cal-month {
    margin: 0;
}

.panel-cal-month > .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.panel-cal-month-name {
    font-weight: 700;
}

.panel-cal-month-links {
    color: var(--panel-muted);
    font-size: .75rem;
    white-space: nowrap;
}

.panel-cal-month-links a {
    color: var(--panel-link);
    text-decoration: none;
}

.panel-cal-month-links a:hover {
    text-decoration: underline;
}

/* blockquote پیش‌فرض حاشیهٔ ۴۰ پیکسلی دارد و شبکهٔ روزها را جمع می‌کرد */
.panel-cal-month .blockquote {
    margin: 0;
    padding: 0;
}

.panel-cal-yearfoot p {
    margin: 0 0 .6rem;
    color: var(--panel-ink);
}

.panel-cal-yearfoot p:last-child {
    margin-bottom: 0;
}

@media (max-width: 575.98px) {
    .panel-cal-months {
        grid-template-columns: 1fr;
    }
}

/* --------------------------------------------- QR تأییدِ حضور روی کارتِ کارمند

   کارتِ هر کارمند در صفحهٔ «همکاران» یک مربعِ کوچک در گوشهٔ پایینِ عکس دارد
   که کدِ چرخانِ تأییدِ حضور را نشان می‌دهد (فایل: js/panel-qr.js).

   چرا گوشهٔ پایین و کوچک: عکسِ کارمند مهم‌ترین چیزِ کارت است و نباید پوشیده
   شود؛ ولی چرا ۹۶ پیکسل و نه ۴۰: کدِ QR با ۲۵ ماژول در ۴۰ پیکسل یعنی هر
   ماژول ۱٫۶ پیکسل و دوربینِ گوشی از فاصلهٔ معمول نمی‌خواند. راهِ حل: اندازهٔ
   خوانا در حالتِ عادی، و بزرگ‌شدنِ نرم با هاور/فوکوس تا کارمند گوشی را
   راحت مقابلش بگیرد (بدونِ رفتن به صفحهٔ دیگر). */
.presence-photo {
    position: relative;
    display: block;
}

.presence-qr {
    position: absolute;
    /* گوشهٔ پایین-چپِ عکس (سمتِ چپ در چیدمانِ راست‌به‌چپ). */
    left: .5rem;
    bottom: .5rem;
    display: block;
    /* از ۹۶ به ۸۲ آمد: روی کارت‌های سه‌ستونه مربع بیش از اندازه سهم می‌گرفت.
       خوانایی از دست نمی‌رود چون هاور همان‌جا کد را بزرگ می‌کند (زیر). */
    width: 82px;
    height: 82px;
    /* حاشیهٔ سفیدِ خودِ مربع از ۴ به ۳ آمد؛ حاشیهٔ اجباریِ داخلِ کد (۴ ماژول)
       سر جای خودش است و دوربین همان را می‌خواهد. */
    padding: 3px;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(16, 35, 26, .28);
    cursor: zoom-in;
    transition: transform .18s ease, box-shadow .18s ease;
}

.presence-qr canvas {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 6px;
    /* پیش از رسیدنِ کد، مربعِ خالی و بی‌معنی نباشد. */
    background-color: #fff;
}

.presence-qr:hover,
.presence-qr:focus {
    /* ۱٫۲۵ (≈۱۰۲px): بزرگ‌نماییِ کوچک و «سرِ جایش». از گوشهٔ پایین-چپِ خودش
       بزرگ می‌شود و جابه‌جا نمی‌شود؛ ۱٫۹ پیشین هم بزرگ بود و هم مربع را تا
       وسطِ عکس می‌آورد — همان چیزی که شبیهِ هاورِ عادی نبود. */
    transform: scale(1.25);
    transform-origin: bottom left;
    box-shadow: 0 10px 28px rgba(16, 35, 26, .34);
    z-index: 5;
}

/* تأییدشده: قیمتِ سبز دورِ کد — کارمند و مدیر با یک نگاه می‌فهمند کارِ امروز
   تمام است و لازم نیست چیزی اسکن شود. */
.presence-qr.is-confirmed {
    box-shadow: 0 0 0 3px var(--panel-accent), 0 3px 12px rgba(16, 35, 26, .28);
}

.presence-qr[hidden] {
    display: none;
}

/* «کارتِ من را بزرگ نشان بده» — کارمند در اپ روی اسکنِ QR می‌زند، هابِ سوکت
   خبر می‌دهد و `js/panel-qr.js` کلاسِ `is-spotlight` را روی همین ظرف می‌گذارد.

   چرا روی ظرفِ عکس و نه روی خودِ مربعِ QR: قرار نیست تنها یک مربع بزرگ شود،
   باید معلوم باشد کدِ **کدام** کارمند است — پس عکس و کارت هم حلقه و سایه
   می‌گیرند. ضمناً مربعِ بزرگ‌شده با `transform` از مرکزِ عکس بالا می‌آید و
   بیرون نمی‌زند (نسبت به `left: .5rem` حالتِ عادی که گوشه‌چسب است).

   این حالت موقتی است: خودِ اسکریپت بعد از ۴۵ ثانیه یا به‌محضِ تأییدِ حضور
   جمعش می‌کند؛ پس صفحه برای همیشه شلوغ نمی‌ماند. */
.presence-photo.is-spotlight {
    z-index: 4;
    border-radius: 10px;
    animation: presence-spotlight-ring 1.6s ease-out 3;
}

@keyframes presence-spotlight-ring {
    0%   { box-shadow: 0 0 0 0 rgba(15, 107, 63, .45); }
    70%  { box-shadow: 0 0 0 10px rgba(15, 107, 63, 0); }
    100% { box-shadow: 0 0 0 0 rgba(15, 107, 63, 0); }
}

.presence-photo.is-spotlight .presence-qr {
    /* بزرگ‌نماییِ **سرِ جای خودش**: قبلاً مربع به وسطِ عکس می‌پرید و از آنجا
       بزرگ می‌شد؛ حالا از همان گوشهٔ پایین-چپ رشد می‌کند — مثلِ هاورِ عادی،
       فقط بیشتر (۸۲ × ۲٫۲ ≈ ۱۸۰ پیکسل). */
    transform: scale(2.2);
    transform-origin: bottom left;
    padding: 5px;
    box-shadow: 0 16px 38px rgba(16, 35, 26, .5);
    cursor: default;
    z-index: 6;
}

/* در حالتِ بزرگ‌شده، هاور بزرگ‌ترش نمی‌کند (همان‌جا بزرگ است)؛ فقط سایه کمی
   عمیق‌تر می‌شود تا «قابلِ خواندن است» را برساند. */
.presence-photo.is-spotlight .presence-qr:hover,
.presence-photo.is-spotlight .presence-qr:focus {
    box-shadow: 0 18px 42px rgba(16, 35, 26, .55);
}

/* نوارِ «QR شما» — پیش از خبرِ سوکت پنهان است و در حالتِ بزرگ‌شده بالای عکس
   می‌نشیند تا کارمند بفهمد کارتِ خودش بالا آمده. */
.presence-spotlight-note {
    display: none;
}

.presence-photo.is-spotlight .presence-spotlight-note {
    position: absolute;
    top: .4rem;
    left: .4rem;
    right: .4rem;
    display: block;
    padding: .32rem .5rem;
    border-radius: 8px;
    background: var(--panel-accent);
    color: #fff;
    font-size: .78rem;
    font-weight: 600;
    text-align: center;
    z-index: 7;
}

@media (prefers-reduced-motion: reduce) {
    .presence-photo.is-spotlight {
        animation: none;
        box-shadow: 0 0 0 3px var(--panel-accent), 0 12px 30px rgba(16, 35, 26, .34);
    }
}

/* «تأیید دستیِ حضور» — راهِ فرارِ مدیر برای روزی که دوربینِ گوشیِ کارمند کار
   نمی‌کند. عمداً کم‌رنگ است تا کارِ روزمره به نظر نرسد.

   جای این دکمه بخشِ «کارمندها» در پنل مدیریت است، نه صفحهٔ اصلیِ حضور و
   غیاب: تأییدِ دستی کارِ مدیر است و آنجا هم عکس و وضعیتِ کارمند در دسترس
   است. */
.presence-confirm-row {
    text-align: center;
    margin-top: .5rem;
}

.presence-confirm {
    display: inline-block;
    margin: 0 auto .5rem;
    padding: .28rem .6rem;
    border: 1px dashed var(--panel-line-strong);
    border-radius: 8px;
    background: transparent;
    color: var(--panel-muted);
    font-size: .75rem;
}

.presence-confirm:hover,
.presence-confirm:focus {
    border-color: var(--panel-link);
    color: var(--panel-link);
}

.presence-confirm.is-failed {
    border-color: var(--panel-danger);
    color: var(--panel-danger);
}

/* تأییدشده: همان زبانِ نشانِ سبزِ QR، ولی روی خودِ دکمه — صفحهٔ مدیریت کدِ
   QR نشان نمی‌دهد، پس بدونِ این حالت مدیر هیچ بازخوردی نمی‌گرفت. */
.presence-confirm.is-confirmed {
    border-color: var(--panel-accent);
    border-style: solid;
    background: var(--panel-accent);
    color: #fff;
}

@media (max-width: 575.98px) {
    .presence-qr {
        width: 64px;
        height: 64px;
    }

    /* حالتِ بزرگ‌شده مقیاس است نه عرضِ ثابت، پس روی صفحهٔ کوچک هم نسبی
       می‌ماند (۶۴ × ۲٫۲ ≈ ۱۴۱ پیکسل) و به قاعدهٔ جدا نیازی نیست. */
}

/* =====================================================================
   صفحهٔ دانلودِ اپلیکیشن (/app)
   =====================================================================
   همان پوستهٔ صفحهٔ حضور؛ فقط محتوای این صفحه کارت‌های بلندِ خواندنی است،
   نه شبکهٔ کارتِ همکاران. پس عرض را محدود می‌کنیم تا سطرهای راهنما روی
   نمایشگرِ بزرگ به یک خطِ ۲۰۰۰ پیکسلی تبدیل نشوند. */

.app-dl {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
}

/* --- هدرِ صفحه: متن + QR --- */

.app-dl-hero {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    flex-wrap: wrap;
    padding: 1.6rem;
    border: 1px solid var(--panel-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(16, 35, 26, .06);
}

.app-dl-hero-text {
    flex: 1 1 380px;
    min-width: 0;
}

.app-dl-kicker {
    display: inline-block;
    margin-bottom: .5rem;
    padding: .18rem .6rem;
    border-radius: 999px;
    background: var(--panel-link-soft);
    color: var(--panel-link);
    font-size: .74rem;
    font-weight: 600;
}

.app-dl-hero h1 {
    margin: 0 0 .6rem;
    color: var(--panel-ink);
    font-size: 1.55rem;
    font-weight: 700;
}

.app-dl-lead {
    margin: 0 0 1.1rem;
    color: var(--panel-muted);
    font-size: .93rem;
    line-height: 2;
}

.app-dl-actions {
    display: flex;
    align-items: center;
    gap: .7rem;
    flex-wrap: wrap;
}

.app-dl-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .68rem 1.3rem;
    border: 1px solid var(--panel-link);
    border-radius: 10px;
    background: var(--panel-link);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    transition: background-color .18s ease, border-color .18s ease;
}

.app-dl-btn:hover,
.app-dl-btn:focus {
    background: var(--panel-link-strong);
    border-color: var(--panel-link-strong);
    color: #fff;
    text-decoration: none;
}

.app-dl-secondary {
    color: var(--panel-link);
    font-size: .86rem;
    text-decoration: none;
    border-bottom: 1px dashed var(--panel-link);
    padding-bottom: 1px;
}

.app-dl-secondary:hover,
.app-dl-secondary:focus {
    color: var(--panel-link-strong);
    text-decoration: none;
}

.app-dl-meta {
    margin: .9rem 0 0;
    color: var(--panel-muted);
    font-size: .78rem;
}

/* یادداشتِ کوچک زیرِ دکمهٔ دانلود: چه انتظاری از شروعِ خودکارِ دانلود داشته
   باشند و هشدارِ استانداردِ «فایل مضر است» اندروید چیست. */
.app-dl-note {
    margin: .7rem 0 0;
    color: var(--panel-muted);
    font-size: .76rem;
    line-height: 1.9;
}

.app-dl-warning {
    padding: .8rem 1rem;
    border: 1px solid #f0d9a8;
    border-radius: 10px;
    background: #fdf6e6;
    color: #7a5a11;
    font-size: .86rem;
    line-height: 1.9;
}

/* --- جعبهٔ QR --- */

.app-dl-qr {
    flex: 0 0 auto;
    width: 260px;
    max-width: 100%;
    text-align: center;
}

.app-dl-qr-box {
    width: 236px;
    height: 236px;
    margin: 0 auto;
    padding: 10px;
    border: 1px solid var(--panel-line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 6px 20px rgba(16, 35, 26, .12);
}

.app-dl-qr-box canvas {
    display: block;
    width: 100%;
    height: 100%;
    /* پیش از رسم، مربعِ سفیدِ خالی بهتر از کادرِ سیاه است. */
    background: #fff;
    border-radius: 6px;
}

.app-dl-qr-caption {
    margin: .7rem 0 .35rem;
    color: var(--panel-muted);
    font-size: .78rem;
    line-height: 1.8;
}

.app-dl-qr-url {
    display: block;
    padding: .3rem .4rem;
    border-radius: 6px;
    background: #f4f7f5;
    color: var(--panel-link);
    font-size: .72rem;
    direction: ltr;
    word-break: break-all;
}

/* --- کارتِ «قبل از هر چیز» --- */

.app-dl-callout {
    margin-top: 1.2rem;
    padding: 1.2rem 1.4rem;
    border: 1px solid #d7e8dd;
    border-inline-start: 4px solid var(--panel-accent);
    border-radius: 12px;
    background: #f6fbf8;
}

.app-dl-callout h2 {
    margin: 0 0 .6rem;
    color: var(--panel-ink);
    font-size: 1.06rem;
    font-weight: 700;
}

.app-dl-callout p {
    margin: 0 0 .6rem;
    color: var(--panel-ink);
    font-size: .9rem;
    line-height: 2;
}

.app-dl-callout-note {
    margin-bottom: 0 !important;
    color: var(--panel-muted) !important;
    font-size: .84rem !important;
}

/* --- قدم‌ها --- */

.app-dl-steps {
    margin-top: 1.6rem;
}

.app-dl-steps > h2,
.app-dl-faq > h2 {
    margin: 0 0 .9rem;
    color: var(--panel-ink);
    font-size: 1.15rem;
    font-weight: 700;
}

.app-dl-step-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: .8rem;
}

.app-dl-step {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--panel-line);
    border-radius: 12px;
    background: #fff;
}

.app-dl-step-num {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--panel-link-soft);
    color: var(--panel-link);
    font-size: .9rem;
    font-weight: 700;
}

.app-dl-step h3 {
    margin: 0 0 .35rem;
    color: var(--panel-ink);
    font-size: .97rem;
    font-weight: 700;
}

.app-dl-step p {
    margin: 0;
    color: var(--panel-muted);
    font-size: .87rem;
    line-height: 2;
}

.app-dl-inline-note {
    margin-top: .5rem !important;
    padding: .5rem .7rem;
    border-radius: 8px;
    background: #f4f7f5;
    color: var(--panel-ink) !important;
    font-size: .84rem !important;
}

/* --- پرسش‌های پرتکرار --- */

.app-dl-faq {
    margin: 1.6rem 0 .6rem;
}

.app-dl-faq dl {
    margin: 0;
    padding: 1.1rem 1.3rem;
    border: 1px solid var(--panel-line);
    border-radius: 12px;
    background: #fff;
}

.app-dl-faq dt {
    margin-top: .9rem;
    color: var(--panel-ink);
    font-size: .9rem;
    font-weight: 600;
}

.app-dl-faq dt:first-child {
    margin-top: 0;
}

.app-dl-faq dd {
    margin: .3rem 0 0;
    color: var(--panel-muted);
    font-size: .86rem;
    line-height: 2;
}

/* --- صفحهٔ کوچک --- */

@media (max-width: 767.98px) {
    .app-dl-hero {
        flex-direction: column-reverse;
        text-align: center;
    }

    .app-dl-actions {
        justify-content: center;
    }

    .app-dl-qr {
        width: 100%;
    }

    .app-dl-step {
        gap: .7rem;
    }
}