/* ==========================================================================
   نسخه‌ی آفلاین پنل تکنسین — نوار وضعیت اتصال، صف ارسال، بنر نصب وب‌اپ
   ========================================================================== */

/* فونت محلی (وقتی آفلاین است و CDN وزیرمتن در دسترس نیست) */
@font-face{
    font-family:'Vazirmatn';
    src:url('fonts/Vazirmatn-Regular.ttf') format('truetype');
    font-weight:400;font-display:swap;
}
@font-face{
    font-family:'Vazirmatn';
    src:url('fonts/Vazirmatn-Bold.ttf') format('truetype');
    font-weight:700;font-display:swap;
}

/* ---------- نوار وضعیت اتصال (چسبان بالای فرم) ---------- */
#tp-offline-topbar{
    position:sticky;
    top:0;
    z-index:60;
    margin:-20px -20px 15px;
    padding:9px 14px;
    font-size:13px;
    font-weight:700;
    display:flex;
    align-items:center;
    gap:8px;
    border-radius:14px 14px 0 0;
    line-height:1.5;
}
#tp-offline-topbar.tp-on{ background:#e7f6ec; color:#1e7e34; }
#tp-offline-topbar.tp-off{ background:#fdecea; color:#c0392b; }
#tp-offline-topbar .tp-dot{
    width:9px;height:9px;border-radius:50%;
    background:currentColor;flex:none;
    box-shadow:0 0 0 3px rgba(0,0,0,.07);
}
#tp-offline-topbar.tp-off .tp-dot{ animation:tp-pulse 1.4s ease-in-out infinite; }
@keyframes tp-pulse{ 0%,100%{opacity:1} 50%{opacity:.35} }

/* دکمه‌ی کوچکِ خروج — همیشه ته نوار وضعیت (چه RTL چه LTR) */
#tp-logout-btn{
    margin-inline-start:auto;
    font-size:11px;
    font-weight:700;
    color:inherit;
    opacity:.75;
    text-decoration:underline;
    white-space:nowrap;
    flex:none;
}
#tp-logout-btn:hover{ opacity:1; }

@media(max-width:600px){
    #tp-offline-topbar{ margin:-15px -15px 12px; }
}

/* ---------- صف ارسال ---------- */
#tp-offline-queue{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-bottom:16px;
}
#tp-offline-queue:empty{ display:none; }

.tp-q-divider{
    font-size:11px;
    font-weight:700;
    color:#999;
    margin:4px 0 -2px;
    padding-top:6px;
    border-top:1px dashed #e0e0e0;
}

.tp-q-card{
    border:1px solid #e3e3e3;
    border-radius:10px;
    padding:10px 12px;
    background:#fafafa;
}
.tp-q-card.tp-s-sending{ border-color:#0073aa; background:#f2f8fc; }
.tp-q-card.tp-s-done{ border-color:#cdeccd; background:#f4fbf4; }
.tp-q-card.tp-s-error{ border-color:#f0b7b2; background:#fdf2f1; }

/* تأییدِ کوچک «ارسال شد» — گذرا، بدون دکمه */
.tp-q-card.tp-q-note{
    padding:7px 12px;
    opacity:.9;
    animation:tp-note-in .2s ease-out;
}
.tp-q-card.tp-q-note .tp-q-title{ font-weight:600; }
@keyframes tp-note-in{ from{opacity:0; transform:translateY(-4px)} to{opacity:.9; transform:none} }

.tp-q-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
}
.tp-q-title{ font-weight:700; font-size:13px; word-break:break-word; }
.tp-q-pill{
    font-size:11px;
    font-weight:700;
    padding:2px 9px;
    border-radius:10px;
    white-space:nowrap;
    flex:none;
}
.tp-pill-pending{ background:#ececec; color:#555; }
.tp-pill-sending{ background:#0073aa; color:#fff; }
.tp-pill-done{ background:#2e7d32; color:#fff; }
.tp-pill-error{ background:#c0392b; color:#fff; }

.tp-q-meta{ font-size:11px; color:#777; margin-top:4px; line-height:1.7; }

.tp-q-diag{
    margin-top:7px;
    padding:6px 8px;
    background:#2b2b2b;
    color:#e6e6e6;
    border-radius:6px;
    font-size:10px;
    line-height:1.5;
    word-break:break-all;
    white-space:pre-wrap;
    max-height:120px;
    overflow:auto;
}

.tp-q-bar{
    height:6px;
    border-radius:3px;
    background:#e3e3e3;
    overflow:hidden;
    margin-top:8px;
}
.tp-q-bar > i{
    display:block;
    height:100%;
    width:0;
    background:#0073aa;
    transition:width .25s linear;
}

.tp-q-actions{
    margin-top:9px;
    display:flex;
    flex-wrap:wrap;
    gap:6px;
}
.tp-q-btn{
    font-family:inherit;
    font-size:11px;
    font-weight:700;
    padding:6px 11px;
    border-radius:6px;
    border:none;
    cursor:pointer;
    background:#0073aa;
    color:#fff;
    text-decoration:none;
    display:inline-block;
}
.tp-q-btn:hover{ background:#005f8d; color:#fff; }
.tp-q-btn.tp-ghost{ background:#ececec; color:#444; }
.tp-q-btn.tp-ghost:hover{ background:#dcdcdc; }

/* ---------- بنر پیشنهاد نصب وب‌اپ ---------- */
#tp-install-banner{
    display:none;
    margin-bottom:14px;
    border:1px solid #cfe0ef;
    background:#f2f8fc;
    border-radius:10px;
    padding:11px 13px;
    font-size:12px;
    color:#31556b;
    line-height:1.8;
}
#tp-install-banner.tp-show{ display:block; }
#tp-install-banner .tp-ib-head{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:13px;
    font-weight:700;
    color:#1c4763;
}
#tp-install-banner .tp-ib-head .tp-ib-ico{ font-size:16px; }
.tp-ib-actions{
    display:flex;
    gap:8px;
    margin-top:9px;
}
.tp-ib-actions button{
    font-family:inherit;
    font-size:12px;
    font-weight:700;
    padding:7px 14px;
    border-radius:6px;
    border:none;
    cursor:pointer;
}
#tp-install-yes{ background:#0073aa; color:#fff; }
#tp-install-no{ background:transparent; color:#8a8a8a; }
.tp-ios-steps{ margin:7px 0 0; padding-right:18px; }
.tp-ios-steps li{ margin-bottom:3px; }

/* ---------- فوتر (نسخه + پاک‌کردن کش) ---------- */
#tp-cache-tools{
    margin-top:18px;
    padding-top:10px;
    border-top:1px dashed #eee;
    text-align:center;
    font-size:10.5px;
    color:#aaa;
}
#tp-clear-cache-btn{
    font-family:inherit;
    font-size:10.5px;
    color:#888;
    background:none;
    border:none;
    text-decoration:underline;
    cursor:pointer;
    padding:0;
}
#tp-clear-cache-btn:disabled{ opacity:.6; text-decoration:none; cursor:default; }

/* ---------- توست ---------- */
#tp-offline-toast{
    position:fixed;
    left:50%;
    bottom:22px;
    transform:translateX(-50%) translateY(20px);
    background:#222;
    color:#fff;
    font-size:12.5px;
    font-family:inherit;
    padding:9px 17px;
    border-radius:20px;
    opacity:0;
    transition:opacity .25s, transform .25s;
    z-index:99999;
    pointer-events:none;
    max-width:90%;
    text-align:center;
    box-shadow:0 6px 24px rgba(0,0,0,.25);
}
#tp-offline-toast.tp-show{
    opacity:1;
    transform:translateX(-50%) translateY(0);
}