/**
 * ═══════════════════════════════════════════════════════════════
 *  RESPONSIVE DESKTOP — مجمع الحسين
 *  يُطبَّق فقط على الديسكتوب/اللابتوب (min-width: 1025px)
 *  أو عندما data-device="desktop"
 * ═══════════════════════════════════════════════════════════════
 */

/* ══════════════════════════════════════════════════
   DIALOG BOX — النوافذ المنبثقة في المنتصف
   يعمل بالكلاس rc-dialog وليس بعرض الشاشة
══════════════════════════════════════════════════ */

.rc-dialog {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(15, 23, 42, 0.6) !important;
    z-index: 10000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 24px !important;
    overflow-y: auto !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transform: none !important;
}

/* المحتوى الداخلي للـ Dialog */
.rc-dialog > div:first-of-type,
.rc-dialog > .modal-inner,
.rc-dialog > .edit-modal-inner,
.rc-dialog > [class*="modal-content"],
.rc-dialog > [class*="sheet-content"] {
    max-width: 600px !important;
    width: 100% !important;
    max-height: 90dvh !important;
    border-radius: 20px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3) !important;
    background: var(--bg-primary, #faf8f5);
    opacity: 0;
    transform: scale(0.96) translateY(-8px);
    transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.32, 0.72, 0, 1);
    will-change: transform, opacity;
}

/* عند الفتح */
.rc-dialog.rc-modal-visible > div:first-of-type,
.rc-dialog.rc-modal-visible > .modal-inner,
.rc-dialog.rc-modal-visible > .edit-modal-inner,
.rc-dialog.rc-modal-visible > [class*="modal-content"],
.rc-dialog.rc-modal-visible > [class*="sheet-content"] {
    opacity: 1 !important;
    transform: scale(1) translateY(0) !important;
}

@media (min-width: 1025px) {

    /* ── تخصيصات النوافذ — ديسكتوب ── */

    /* نوافذ المحتوى القابل للتمرير — خصائص مشتركة */
    #editModal.rc-dialog > div,
    #addModal.rc-dialog > div,
    #attLeaveModal.rc-dialog > div,
    #attEmpModal.rc-dialog > .modal-content,
    #whEditModal.rc-dialog > .modal-content,
    #whInventoryModal.rc-dialog > .modal-content,
    #warehouseMaterialLogModal.rc-dialog > .modal-content,
    #operationDetailModal.rc-dialog > .form-content,
    #confirmModal.rc-dialog > .form-content {
        max-height: 82dvh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        border-radius: 20px !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    /* عروض مخصصة */
    #editModal.rc-dialog > div,
    #addModal.rc-dialog > div      { max-width: 580px !important; }
    #attLeaveModal.rc-dialog > div { max-width: 480px !important; }
    #attEmpModal.rc-dialog > .modal-content { max-width: 560px !important; }
    #whInventoryModal.rc-dialog > .modal-content { max-width: 700px !important; }
    #operationDetailModal.rc-dialog > .form-content { max-width: 400px !important; }
    #confirmModal.rc-dialog > .form-content { max-width: 500px !important; }

    /* نافذة الصلاحيات — أعرض */
    #permissionsModal.rc-dialog > div {
        max-width: 700px !important;
        max-height: 82dvh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        border-radius: 20px !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        opacity: 0;
        transform: scale(0.96) translateY(-8px);
        transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.32, 0.72, 0, 1);
    }
    #permissionsModal.rc-dialog.rc-modal-visible > div {
        opacity: 1 !important;
        transform: scale(1) translateY(0) !important;
    }

    /* whConfirmModal — flex layout: header ثابت + body يتمرر + footer ثابت */
    #whConfirmModal.rc-dialog > .modal-content {
        max-height: 88dvh !important;
        overflow: hidden !important;
        border-radius: 20px !important;
        display: flex !important;
        flex-direction: column !important;
    }
    #whConfirmModal.rc-dialog > .modal-content #whConfirmBody {
        flex: 1 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    /* نافذة معاينة الوصل — action bar ثابت + محتوى يتمرر */
    #voucherPreviewModal.rc-dialog {
        align-items: center !important;
        padding: 24px !important;
    }
    #voucherPreviewModal.rc-dialog > .modal-inner {
        max-width: 820px !important;
        width: 100% !important;
        max-height: 92dvh !important;
        overflow: hidden !important;
        border-radius: 12px !important;
        box-shadow: 0 25px 60px rgba(0,0,0,0.5) !important;
        background: #1e293b !important;
        display: flex !important;
        flex-direction: column !important;
        margin: auto !important;
    }
    /* action bar ثابت أعلى */
    #voucherPreviewModal.rc-dialog > .modal-inner > .voucher-action-bar {
        flex-shrink: 0 !important;
        position: static !important;
    }
    /* ورقة الوصل تتمرر */
    #voucherPreviewModal.rc-dialog > .modal-inner > .voucher-modal-content {
        flex: 1 !important;
        overflow-y: auto !important;
        overflow-x: auto !important;
        margin: 0 !important;
        width: 100% !important;
        min-height: unset !important;
        border-radius: 0 !important;
    }

    /* مودال الآليات — ديسكتوب */
    #veh-modal-overlay.rc-dialog > #veh-modal-box {
        max-width: 560px !important;
        max-height: 88dvh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        border-radius: 20px !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    /* شريط التمرير مرئي دائماً على الديسكتوب */
    :root { scrollbar-gutter: stable; }

    /* ══════════════════════════════════════════════════
       LAYOUT — تخطيط مخصص للديسكتوب
    ══════════════════════════════════════════════════ */

    /* Stats — 4 أعمدة */
    .stats-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 16px !important;
    }

    /* Quick actions — 4 أعمدة */
    .quick-actions {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 16px !important;
    }

    /* Page content — أقصى عرض محدود */
    .app-main .page-content {
        max-width: 960px !important;
        padding: 28px 24px 48px !important;
    }

    /* Cards */
    .card {
        padding: 24px !important;
        border-radius: 20px !important;
    }

    /* List items — hover واضح */
    .list-item {
        transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
        cursor: pointer;
    }
    .list-item:hover {
        background: var(--bg-secondary) !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
        transform: translateX(-2px);
    }

    /* أزرار — hover مرئي */
    button:not(:disabled):hover,
    .filter-btn:hover,
    .action-btn-edit:hover,
    .action-btn-delete:hover {
        opacity: 0.9;
    }

    /* Nav tabs — hover مرئي */
    .nav-tab:not(.active):hover {
        background: rgba(255, 255, 255, 0.08);
    }

    /* Quick actions — hover مع رفع */
    .quick-action:hover {
        transform: translateY(-6px) scale(1.02) !important;
    }

    /* إخفاء شريط التمرير في بعض العناصر */
    .sort-filters {
        flex-wrap: wrap !important;
        overflow-x: visible !important;
    }

    /* Topbar layout — الشريط الجانبي مخفي على الديسكتوب */
    .sidebar-toggle {
        display: none !important;
    }

    .app-sidebar {
        display: none !important;
    }

    .sidebar-backdrop {
        display: none !important;
    }

    .topbar-nav {
        display: flex !important;
    }

    /* ══════════════════════════════════════════════════
       HOVER STATES — خاصة بالديسكتوب فقط
    ══════════════════════════════════════════════════ */

    .stat-card:hover {
        transform: translateY(-4px) !important;
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(212, 175, 55, 0.1) !important;
    }

    .header-btn:hover {
        background: rgba(255, 255, 255, 0.2) !important;
    }

    .submit-btn:hover {
        filter: brightness(1.05);
        transform: translateY(-1px);
    }

    /* Tooltips — تظهر عند hover على الديسكتوب فقط */
    [data-tooltip] {
        position: relative;
    }
    [data-tooltip]::after {
        content: attr(data-tooltip);
        position: absolute;
        bottom: calc(100% + 6px);
        right: 50%;
        transform: translateX(50%);
        background: #1a1f3c;
        color: #fff;
        font-size: 11px;
        font-weight: 600;
        padding: 5px 10px;
        border-radius: 8px;
        white-space: nowrap;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.15s ease;
        z-index: 9999;
        font-family: var(--font-primary, 'Tajawal', sans-serif);
    }
    [data-tooltip]:hover::after {
        opacity: 1;
    }

    /* ══════════════════════════════════════════════════
       GRID LAYOUTS — ديسكتوب
    ══════════════════════════════════════════════════ */

    /* نماذج الإضافة — عمودين */
    .form-grid-2 {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 16px !important;
    }

    /* فلاتر — صف واحد */
    .filter-row {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 10px !important;
        align-items: center !important;
    }
}

/* ══════════════════════════════════════════════════
   LARGE DESKTOP — 1400px+
══════════════════════════════════════════════════ */
@media (min-width: 1400px) {
    .app-main .page-content {
        max-width: 1100px !important;
    }

    .stats-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 20px !important;
    }

    .quick-actions {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 20px !important;
    }
}