/* 
   حجر وبناء | التنسيق المخصص وتأثيرات الطباعة
*/

/* استيراد الخطوط الاحترافية */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700;800&display=swap');

body {
    font-family: 'Cairo', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* تأثيرات الانتقال والتمرير السلس */
.transition-all {
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* بطاقات ذات لمسة زجاجية خفيفة */
.glass-card {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.4);
}

/* تأثير التمرير للجدول على الهواتف */
.overflow-x-auto {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #f1f5f9;
}

.overflow-x-auto::-webkit-scrollbar {
    height: 6px;
}

.overflow-x-auto::-webkit-scrollbar-track {
    background: #f1f5f9;
}

.overflow-x-auto::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 6px;
}

/* تخصيص مظهر حقول المدخلات */
input:focus, select:focus, textarea:focus {
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.15) !important;
}

/* حركات الأسطر الجديدة */
@keyframes fadeInRow {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.new-row-animation {
    animation: fadeInRow 0.3s ease-out forwards;
}

/* ==========================================================================
   تنسيقات الطباعة الاحترافية (@media print)
   ========================================================================== */
@media print {
    /* إخفاء شريط الملاحة، الأزرار، والفلاتر وأي عناصر تفاعلية */
    header, 
    footer, 
    button, 
    .no-print,
    #live-search,
    .search-container,
    .action-buttons,
    .alert,
    #success-alert,
    #error-alert,
    .fixed {
        display: none !important;
    }

    /* تهيئة هيكل الصفحة للطباعة */
    body {
        background-color: #fff !important;
        color: #000 !important;
        font-size: 9.5pt;
        padding: 0 !important;
        margin: 0 !important;
    }

    main {
        padding: 0 !important;
        margin: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* كروت الإحصائيات أو كروت الحسابات */
    .bg-white {
        background-color: #fff !important;
        border: none !important;
        box-shadow: none !important;
    }

    /* تحسين مظهر الجداول للطباعة الفاخرة المدمجة */
    table {
        width: 100% !important;
        border-collapse: collapse !important;
        margin-top: 10px !important;
    }

    th, td {
        border: 1px solid #ddd !important;
        padding: 4px 6px !important;
        font-size: 8.5pt !important;
        color: #000 !important;
        background-color: transparent !important;
        text-align: right !important;
    }

    th {
        background-color: #f5f5f5 !important;
        font-weight: bold !important;
    }

    /* الرصيد الإجمالي بلون داكن وواضح للطباعة */
    .text-rose-600 {
        color: #b91c1c !important;
        font-weight: bold !important;
    }

    .text-emerald-600 {
        color: #047857 !important;
        font-weight: bold !important;
    }

    /* الحفاظ على فواصل الصفحات بطريقة صحيحة */
    tr {
        page-break-inside: avoid !important;
    }

    thead {
        display: table-header-group !important;
    }

    /* عرض ترويسة الفاتورة الورقية */
    .print-header {
        display: block !important;
        margin-bottom: 8px;
        border-bottom: 1.5px solid #333;
        padding-bottom: 6px;
    }

    /* إخفاء كارد الملخص الكبير بالطباعة */
    .print-hide-card {
        display: none !important;
    }

    .print-header h2 {
        font-size: 14pt;
        margin: 0 0 4px 0;
        font-weight: 800;
    }

    .print-header p {
        margin: 2px 0;
        color: #555;
        font-size: 8.5pt;
    }

    /* الحقول النصية وحقول الإدخال عند الطباعة (تخفي الحدود وتصبح مسطحة) */
    input, select {
        border: none !important;
        background: transparent !important;
        padding: 0 !important;
        box-shadow: none !important;
    }

    /* جعل حجم الخط أصغر داخل جدول المنتجات المفصل */
    .detailed-items-row table th, 
    .detailed-items-row table td {
        font-size: 8pt !important;
        padding: 3px 5px !important;
    }
}

/* إخفاء ترويسة الطباعة افتراضياً في المتصفح */
.print-header {
    display: none;
}

/* ==========================================================================
   تنسيقات نظام تواصل وملاحظات العمال المبتكر
   ========================================================================== */

/* تأثير التكبير النبضي عند التسجيل */
.scale-115 {
    transform: scale(1.12);
}

@keyframes micPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(244, 63, 94, 0.5);
    }
    70% {
        box-shadow: 0 0 0 12px rgba(244, 63, 94, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(244, 63, 94, 0);
    }
}

#record-btn.bg-rose-600 {
    animation: micPulse 1.2s infinite ease-in-out;
}

/* تحسينات بطاقات الملاحظات المخصصة */
.custom-audio-player {
    transition: all 0.2s ease-in-out;
}

.custom-audio-player:hover {
    border-color: rgba(124, 58, 237, 0.25) !important;
    background-color: #fafafa !important;
}

/* حركات تلاشي الأسطر وسهولة الإنزلاق */
.new-row-animation {
    animation: fadeInRow 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* ==========================================================================
   تنسيقات لوحة ملاحظات الزبائن الخاصة والتنبيهات المنهجية
   ========================================================================== */

/* تصميم البوستات التذكيرية الصغيرة (Sticky Notes) */
.sticky-note {
    background-color: #fffdf5;
    border-right: 4px solid #f59e0b;
    transition: all 0.2s ease-in-out;
}

.sticky-note:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.08);
}

/* حركة تدوير السهم اللطيفة عند الفتح والإغلاق */
.chevron-rotate {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.chevron-active {
    transform: rotate(180deg);
}

/* لوحة الملاحظات التفاعلية القابلة للطي */
.collapsible-notes-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.collapsible-notes-content.expanded {
    max-height: 1000px;
}

/* ==========================================================================
   تنسيقات حقل الاختيار المتقدم بالبحث (Searchable Select Dropdown)
   ========================================================================== */
.searchable-select-dropdown {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    display: block !important; /* السماح بحركة الـ CSS */
}

.searchable-select-dropdown.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.searchable-select-item {
    cursor: pointer;
    padding: 10px 16px;
    transition: background-color 0.15s ease;
}

.searchable-select-item:hover {
    background-color: #f3f4f6;
}

.searchable-select-item.selected {
    background-color: #fffbeb;
    color: #b45309;
    font-weight: 700;
}