/* =========================================================================
   personnel-card.css
   استایل اختصاصی کارت پرسنلی و تردد سازمانی - شرکت مدیران درب
   شامل:
   ۱) نسخه چاپی (تم سفید با خطوط تیره، استاندارد و بدون اتلاف تونر)
   ۲) نسخه دیجیتال (تم تیره سازمانی با کادر QR پرکنتراست)
   ========================================================================= */

/* مودال کارت پرسنلی */
.personnel-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(28, 18, 11, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}

.personnel-modal-dialog {
    background: #FFFFFF;
    border-radius: 20px;
    border: 1px solid #EADFCF;
    box-shadow: 0 25px 50px -12px rgba(40, 26, 16, 0.35);
    max-width: 540px;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: cardModalPop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes cardModalPop {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(8px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.personnel-modal-header {
    background: #24160C;
    color: #FAF3EA;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(212, 163, 115, 0.25);
}

.personnel-modal-title {
    font-size: 14px;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.personnel-modal-title-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22C55E;
    box-shadow: 0 0 8px #22C55E;
}

.personnel-modal-close {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #FAF3EA;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    transition: all 0.2s;
}

.personnel-modal-close:hover {
    background: #B3261E;
    border-color: #B3261E;
    color: white;
}

/* تولبار انتخاب نسخه */
.personnel-card-toolbar {
    background: #FAF6F0;
    border-bottom: 1px solid #EADFCF;
    padding: 10px 18px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.card-mode-tabs {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #EFE7DC;
    padding: 4px;
    border-radius: 10px;
}

.btn-card-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 700;
    color: #7A6657;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-card-tab:hover {
    color: #2D1F16;
}

.btn-card-tab.active {
    background: #FFFFFF;
    color: #24160C;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.card-toolbar-hint {
    font-size: 11px;
    color: #8C5A32;
    font-weight: 600;
}

/* بدنه مودال */
.personnel-modal-body {
    padding: 24px;
    background: #F4EFEA;
    overflow-y: auto;
    max-height: calc(85vh - 160px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
}

#personnel-card-mount {
    width: 100%;
    display: flex;
    justify-content: center;
}

.pc-card-wrapper {
    width: 100%;
    max-width: 440px;
    display: flex;
    justify-content: center;
}

/* =========================================================================
   کارت پرسنلی مشترک (ابعاد استاندارد ۸۵.۶ × ۵۴)
   ========================================================================= */
.personnel-card {
    width: 100%;
    max-width: 440px;
    aspect-ratio: 85.6 / 54;
    border-radius: 16px;
    padding: 18px 22px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    user-select: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
}

/* هدر کارت */
.pc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.pc-company-name {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.2px;
}

.pc-code-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 6px;
}

.pc-code-label {
    font-size: 11px;
    opacity: 0.85;
}

.pc-code-val {
    font-family: monospace;
    font-weight: 800;
    letter-spacing: 0.8px;
}

/* بدنه کارت: نام پرسنل در ستون راست + جعبه QR Code بزرگ در ستون چپ */
.pc-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: auto 0;
    width: 100%;
}

.pc-info-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
}

.pc-person-name {
    font-size: 20px;
    font-weight: 900;
    line-height: 1.3;
}

.pc-qr-col {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pc-qr-box {
    background: #FFFFFF;
    border-radius: 10px;
    padding: 6px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pc-qr-target {
    width: 110px;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pc-qr-target img,
.pc-qr-target canvas {
    width: 110px !important;
    height: 110px !important;
    display: block;
}

/* پاورقی کارت: آدرس سامانه */
.pc-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 8px;
}

.pc-erp-url {
    font-size: 12px;
    font-family: monospace;
    letter-spacing: 1px;
    font-weight: 700;
    direction: ltr;
}

/* -------------------------------------------------------------------------
   ۱) نسخه چاپی (تم روشن رسمی سازمانی - بدون اتلاف تونر، مناسب چاپ)
   ------------------------------------------------------------------------- */
.personnel-card-print {
    background: #FFFFFF;
    border: 2px solid #1C120B;
    color: #1C120B;
}

.personnel-card-print .pc-header-print {
    border-bottom: 1.5px solid #1C120B;
    padding-bottom: 8px;
}

.personnel-card-print .pc-company-name-print {
    color: #1C120B;
}

.personnel-card-print .pc-code-badge-print {
    background: #F4EFEA;
    color: #1C120B;
    border: 1.5px solid #1C120B;
}

.personnel-card-print .pc-person-name-print {
    color: #000000;
}

.personnel-card-print .pc-qr-box-print {
    border: 1.5px solid #1C120B;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.personnel-card-print .pc-footer-print {
    border-top: 1.5px solid #1C120B;
}

.personnel-card-print .pc-erp-url-print {
    color: #1C120B;
}

/* -------------------------------------------------------------------------
   ۲) نسخه دیجیتال (تم تیره رسمی سازمانی با کنتراست بالا)
   ------------------------------------------------------------------------- */
.personnel-card-digital {
    background: linear-gradient(135deg, #1C120B 0%, #2A1A0F 55%, #3B2415 100%);
    border: 1.5px solid #D4A373;
    color: #FAF3EA;
}

.personnel-card-digital .pc-header-digital {
    border-bottom: 1px solid rgba(212, 163, 115, 0.35);
    padding-bottom: 8px;
}

.personnel-card-digital .pc-company-name-digital {
    color: #FAF3EA;
}

.personnel-card-digital .pc-code-badge-digital {
    background: rgba(212, 163, 115, 0.15);
    color: #FAF3EA;
    border: 1px solid rgba(212, 163, 115, 0.4);
}

.personnel-card-digital .pc-person-name-digital {
    color: #FFFFFF;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.personnel-card-digital .pc-qr-box-digital {
    background: #FFFFFF;
    border: 1.5px solid #D4A373;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.personnel-card-digital .pc-footer-digital {
    border-top: 1px dashed rgba(212, 163, 115, 0.3);
}

.personnel-card-digital .pc-erp-url-digital {
    color: #D4A373;
}

/* =========================================================================
   فوتر مودال و دکمه‌ها
   ========================================================================= */
.personnel-modal-footer {
    padding: 12px 20px;
    background: #FFFFFF;
    border-top: 1px solid #EADFCF;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.footer-print-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.print-spec-hint {
    font-size: 11px;
    color: #7A6657;
    font-weight: 600;
}

.btn-card-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    text-decoration: none;
}

.btn-card-print {
    background: linear-gradient(135deg, #8C5A32 0%, #A76938 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(140, 90, 50, 0.25);
}

.btn-card-print:hover {
    background: linear-gradient(135deg, #784C29 0%, #8C5A32 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(140, 90, 50, 0.35);
}

.btn-card-close {
    background: #FAF6F0;
    border: 1px solid #EADFCF;
    color: #5E4939;
}

.btn-card-close:hover {
    background: #EFE7DC;
    color: #2D1F16;
}

/* دکمه‌های باز کردن کارت در داشبورد و اعضا */
.my-card-header-btn {
    background: rgba(212, 163, 115, 0.15);
    border: 1px solid rgba(212, 163, 115, 0.4);
    color: #FAF3EA;
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.my-card-header-btn:hover {
    background: rgba(212, 163, 115, 0.3);
    border-color: #D4A373;
    color: #FFFFFF;
    transform: translateY(-1px);
}

.btn-action-card {
    padding: 6px 12px;
    background: #FAF6F0;
    border: 1px solid #EADFCF;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    color: #8C5A32;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.btn-action-card:hover {
    background: #FAECDC;
    border-color: #D4A373;
    color: #784C29;
}

/* =========================================================================
   قوانین پرینت اختصاصی (@media print)
   چاپ بی‌نقص تک‌کارت در ابعاد دقیق استاندارد ۸۵.۶ × ۵۴ میلی‌متر
   ========================================================================= */
@media print {
    @page {
        size: A4 portrait;
        margin: 10mm;
    }

    body:has(#personnel-print-container) * {
        visibility: hidden !important;
    }

    #personnel-print-container,
    #personnel-print-container * {
        visibility: visible !important;
    }

    .no-print,
    .no-print *,
    .personnel-modal-header,
    .personnel-modal-footer,
    .personnel-card-toolbar,
    .personnel-modal-close {
        display: none !important;
        visibility: hidden !important;
    }

    .personnel-modal-overlay {
        background: transparent !important;
        backdrop-filter: none !important;
        position: static !important;
        width: 100% !important;
        height: auto !important;
        padding: 0 !important;
        display: block !important;
    }

    .personnel-modal-dialog {
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
        max-width: none !important;
        width: 100% !important;
    }

    #personnel-print-container {
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        background: transparent !important;
        padding-top: 15mm !important;
        z-index: 999999 !important;
    }

    .pc-card-wrapper {
        width: 85.6mm !important;
        max-width: 85.6mm !important;
        display: flex !important;
        justify-content: center !important;
        page-break-inside: avoid !important;
    }

    .personnel-card {
        width: 85.6mm !important;
        min-width: 85.6mm !important;
        max-width: 85.6mm !important;
        height: 54mm !important;
        min-height: 54mm !important;
        max-height: 54mm !important;
        aspect-ratio: auto !important;
        padding: 4mm 6mm !important;
        border-radius: 2.5mm !important;
        box-shadow: none !important;
        page-break-inside: avoid !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* نسخه چاپی در پرینت */
    .personnel-card-print {
        background: #FFFFFF !important;
        border: 1.5px solid #000000 !important;
        color: #000000 !important;
    }

    /* نسخه دیجیتال در پرینت */
    .personnel-card-digital {
        background: #1C120B !important;
        border: 1.2px solid #D4A373 !important;
        color: #FAF3EA !important;
    }

    .pc-header {
        padding-bottom: 1.5mm !important;
    }

    .pc-company-name {
        font-size: 8.5pt !important;
        font-weight: 800 !important;
    }

    .pc-code-badge {
        font-size: 7pt !important;
        padding: 0.5mm 2mm !important;
        border-radius: 1mm !important;
    }

    .pc-body {
        gap: 3mm !important;
    }

    .pc-person-name {
        font-size: 12pt !important;
        font-weight: 900 !important;
        line-height: 1.2 !important;
    }

    .pc-qr-box {
        padding: 1mm !important;
        border-radius: 1.5mm !important;
        background: #FFFFFF !important;
    }

    .pc-qr-target,
    .pc-qr-target img,
    .pc-qr-target canvas {
        width: 27mm !important;
        height: 27mm !important;
    }

    .pc-footer {
        padding-top: 1.5mm !important;
    }

    .pc-erp-url {
        font-size: 7pt !important;
        font-weight: 700 !important;
    }
}