/* ==========================================================================
   RESPONSIVE UNIFIED STYLESHEET
   ملف التنسيقات المتجاوبة الموحد والشامل
   المسار: public/css/responsive.css
   ==========================================================================

   الأقسام:
   ─────────────────────────────────────────────
   1.  المتغيرات الأساسية (CSS Custom Properties)
   2.  تعريفات الحاويات (Container Definitions)
   3.  التحسينات العامة (Base Enhancements)
   4.  الشريط الجانبي المتجاوب (Responsive Sidebar)
   5.  شريط التنقل - صفحات الداشبورد (Navbar - Layouts)
   6.  القائمة المنسدلة للموبايل - CSS Checkbox Hack
   7.  Container Queries: النافبار
   8.  Container Queries: Hero Section
   9.  Container Queries: Stats Section
   10. Container Queries: Features Section
   11. Container Queries: CTA Section
   12. Container Queries: Page Content (صفحة عرض المحتوى)
   13. Container Queries: Footer
   14. الجداول المتجاوبة (Responsive Tables)
   15. بطاقات الإحصائيات - الداشبورد (Stats Cards)
   16. صفحة عرض الفاتورة (Invoice Show Page)
   17. صلاحيات الموظفين (Permissions Grid)
   18. الحركات والانتقالات (Animations)
   19. Fallback للمتصفحات القديمة
   20. تأثيرات التمرير (Hover Effects)
   21. احترام تفضيلات المستخدم (Accessibility)
   ========================================================================== */


/* ==========================================================================
   1. المتغيرات الأساسية (CSS Custom Properties)
   ========================================================================== */
:root {
    --sidebar-width: 16rem;       /* 256px - عرض الشريط الجانبي */
    --nav-height: 4rem;           /* 64px  - ارتفاع شريط التنقل */
    --transition-speed: 0.3s;     /* سرعة الانتقالات */
    --border-radius-sm: 0.375rem; /* 6px */
    --border-radius-md: 0.5rem;   /* 8px */
    --border-radius-lg: 0.75rem;  /* 12px */
    --border-radius-xl: 1rem;     /* 16px */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}


/* ==========================================================================
   2. تعريفات الحاويات (Container Definitions)
   تُستخدم مع Container Queries لتجاوب أدق على مستوى المكوّن
   ========================================================================== */

/* ── الصفحة الرئيسية (home.blade.php) ── */
.page-container   { container-type: inline-size; container-name: page; }
.nav-container    { container-type: inline-size; container-name: nav; }
.hero-container   { container-type: inline-size; container-name: hero; }
.stats-container  { container-type: inline-size; container-name: stats; }
.features-container { container-type: inline-size; container-name: features; }
.cta-container    { container-type: inline-size; container-name: cta; }
.footer-container { container-type: inline-size; container-name: footer; }

/* ── صفحة عرض المحتوى (page/show.blade.php) ── */
.nav-cq           { container-type: inline-size; container-name: nav; }
.page-content-cq  { container-type: inline-size; container-name: page-content; }
.footer-cq        { container-type: inline-size; container-name: footer; }


/* ==========================================================================
   3. التحسينات العامة (Base Enhancements)
   ========================================================================== */

/* منع التكبير عند التركيز على حقول الإدخال في iOS (حجم الخط >= 16px) */
input,
select,
textarea {
    font-size: 16px !important;
}

/* إزالة تأثير اللمس الأزرق على الموبايل */
* {
    -webkit-tap-highlight-color: transparent;
}

/* التأكد من أن الصور لا تتجاوز حدود الحاوية */
img {
    max-width: 100%;
    height: auto;
}

/* Box-sizing عام */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* تحسين الأزرار وعناصر التفاعل للهاتف */
@media (max-width: 767px) {
    button,
    .btn,
    a[role="button"],
    input[type="submit"],
    input[type="button"] {
        min-height: 44px; /* Apple Human Interface guideline للمس */
        min-width: 44px;
    }

    /* تحسين عنوان الصفحة */
    .page-title {
        font-size: 1.5rem !important;
    }

    /* تقليل المسافات الداخلية */
    .content-spacing {
        padding: 1rem !important;
    }

    .section-spacing {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }
}


/* ==========================================================================
   4. الشريط الجانبي المتجاوب (Responsive Sidebar)
   يُستخدم في: admin.blade.php, customer.blade.php, employee.blade.php
   ========================================================================== */

/* زر فتح/إغلاق القائمة الجانبية - مخفي على الشاشات الكبيرة */
.sidebar-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    color: inherit;
    font-size: 1.5rem;
    line-height: 1;
    z-index: 60;
}

/* طبقة التعتيم خلف الشريط الجانبي على الهاتف */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 40;
    opacity: 0;
    transition: opacity var(--transition-speed) ease;
}

.sidebar-overlay.active {
    display: block;
    opacity: 1;
}

/* ── شاشات أقل من 768px (هواتف وتابلت صغير) ── */
@media (max-width: 767px) {

    /* إظهار زر القائمة */
    .sidebar-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* الشريط الجانبي: يصبح drawer منزلق */
    .sidebar-responsive {
        position: fixed;
        top: 0;
        right: 0; /* RTL: ينزلق من اليمين */
        width: var(--sidebar-width);
        height: 100vh;
        height: 100dvh; /* dynamic viewport height */
        z-index: 50;
        transform: translateX(100%); /* مخفي خارج الشاشة */
        transition: transform var(--transition-speed) ease;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* إذا كان الاتجاه LTR */
    html[dir="ltr"] .sidebar-responsive {
        right: auto;
        left: 0;
        transform: translateX(-100%);
    }

    /* عند فتح الشريط الجانبي */
    .sidebar-responsive.open {
        transform: translateX(0);
    }

    /* المحتوى الرئيسي يأخذ العرض الكامل */
    .main-content-responsive {
        width: 100% !important;
        padding: 1rem !important;
    }

    /* المنطقة الرئيسية: إزالة flex لمنع الشريط الجانبي من الظهور بجانب المحتوى */
    .layout-flex {
        display: block !important;
    }
}


/* ==========================================================================
   5. شريط التنقل - صفحات الداشبورد (Navbar - Layouts)
   يُستخدم في: admin, customer, employee layouts
   ========================================================================== */

@media (max-width: 767px) {

    /* تقليل الحشو الجانبي */
    .nav-responsive {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    /* إخفاء اسم المستخدم على الشاشات الصغيرة */
    .nav-user-name {
        display: none;
    }

    /* تصغير حجم العنوان */
    .nav-title {
        font-size: 1rem !important;
    }

    /* تصغير الشعار */
    .nav-logo {
        height: 2rem !important;
    }
}

@media (max-width: 480px) {
    .nav-title {
        font-size: 0.875rem !important;
    }
}


/* ==========================================================================
   6. القائمة المنسدلة للموبايل - CSS Checkbox Hack
   يُستخدم في: home.blade.php, page/show.blade.php
   ========================================================================== */

/* إخفاء الـ checkbox */
.mobile-menu-toggle {
    display: none;
}

/* ── أزرار الهامبرغر (مخفية على الديسكتوب) ── */

/* الهامبرغر في home.blade.php */
.mobile-menu-btn {
    display: none;
}

/* الهامبرغر في page/show.blade.php */
.hamburger-btn {
    display: none;
}

/* ── لوحة القائمة المنسدلة ── */
.mobile-menu-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

/* عند تفعيل الـ checkbox - home.blade.php */
.mobile-menu-toggle:checked ~ .nav-wrapper .mobile-menu-panel {
    max-height: 500px;
}

/* عند تفعيل الـ checkbox - page/show.blade.php */
.mobile-menu-toggle:checked ~ .nav-bar .mobile-menu-panel {
    max-height: 500px;
}

/* ── روابط الديسكتوب (home.blade.php) ── */
.nav-links-desktop {
    display: flex;
}


/* ==========================================================================
   7. Container Queries: النافبار
   يُستخدم في: home.blade.php, page/show.blade.php
   ========================================================================== */

@container nav (max-width: 768px) {

    /* ── مشترك بين الصفحتين ── */
    .nav-logo-text {
        font-size: 1.125rem !important;
        max-width: 160px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* ── home.blade.php ── */
    .nav-links-desktop {
        display: none !important;
    }
    .mobile-menu-btn {
        display: flex !important;
    }
    .nav-auth-buttons .auth-text-label {
        display: none;
    }
    .nav-auth-buttons .auth-btn-register {
        padding: 0.375rem 0.75rem;
        font-size: 0.8rem;
    }

    /* ── page/show.blade.php ── */
    .nav-desktop-links {
        display: none !important;
    }
    .nav-desktop-auth-links {
        display: none !important;
    }
    .hamburger-btn {
        display: flex !important;
    }
    .nav-logo-img {
        height: 2rem !important;
    }
    .nav-register-btn {
        padding: 0.375rem 0.75rem !important;
        font-size: 0.8rem !important;
    }
}


/* ==========================================================================
   8. Container Queries: Hero Section
   يُستخدم في: home.blade.php
   ========================================================================== */

@container hero (max-width: 600px) {
    .hero-title {
        font-size: clamp(1.75rem, 8cqw, 3.75rem) !important;
        margin-bottom: 1rem !important;
    }
    .hero-subtitle {
        font-size: clamp(0.95rem, 3.5cqw, 1.5rem) !important;
        margin-bottom: 1.5rem !important;
    }
    .hero-badges {
        gap: 0.5rem !important;
    }
    .hero-badges span {
        padding: 0.375rem 0.75rem !important;
        font-size: 0.75rem !important;
    }
    .hero-buttons {
        flex-direction: column !important;
        align-items: center !important;
        gap: 0.75rem !important;
    }
    .hero-buttons a {
        width: 100% !important;
        max-width: 280px;
        text-align: center !important;
        padding: 0.875rem 1.5rem !important;
    }
    .hero-section {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }
}

@container hero (min-width: 601px) and (max-width: 900px) {
    .hero-title {
        font-size: 2.5rem !important;
    }
}


/* ==========================================================================
   9. Container Queries: Stats Section
   يُستخدم في: home.blade.php
   ========================================================================== */

@container stats (max-width: 500px) {
    .stats-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 0.75rem !important;
    }
    .stat-card {
        padding: 0.875rem !important;
    }
    .stat-value {
        font-size: clamp(1.25rem, 6cqw, 2.5rem) !important;
    }
    .stat-label {
        font-size: 0.75rem !important;
    }
}

@container stats (max-width: 350px) {
    .stats-grid {
        grid-template-columns: 1fr !important;
    }
}


/* ==========================================================================
   10. Container Queries: Features Section
   يُستخدم في: home.blade.php
   ========================================================================== */

@container features (max-width: 500px) {
    .features-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    .feature-card {
        padding: 1.25rem !important;
    }
    .feature-card .feature-icon {
        font-size: 2.5rem !important;
    }
    .feature-card h3 {
        font-size: 1.25rem !important;
    }
    .features-title {
        font-size: 1.75rem !important;
    }
    .features-subtitle {
        font-size: 0.95rem !important;
    }
}

@container features (min-width: 501px) and (max-width: 800px) {
    .features-grid {
        grid-template-columns: 1fr 1fr !important;
    }
}


/* ==========================================================================
   11. Container Queries: CTA Section
   يُستخدم في: home.blade.php
   ========================================================================== */

@container cta (max-width: 500px) {
    .cta-title {
        font-size: clamp(1.5rem, 6cqw, 2.5rem) !important;
    }
    .cta-subtitle {
        font-size: 0.95rem !important;
    }
    .cta-buttons {
        flex-direction: column !important;
        align-items: center !important;
        gap: 0.75rem !important;
    }
    .cta-buttons a {
        width: 100% !important;
        max-width: 280px;
        text-align: center !important;
    }
}


/* ==========================================================================
   12. Container Queries: Page Content (صفحة عرض المحتوى)
   يُستخدم في: page/show.blade.php
   ========================================================================== */

@container page-content (max-width: 500px) {
    .page-card {
        border-radius: var(--border-radius-md) !important;
    }
    .page-card-inner {
        padding: 1.25rem !important;
    }
    .page-title {
        font-size: 1.5rem !important;
        margin-bottom: 1rem !important;
        line-height: 1.4 !important;
    }
    .page-prose {
        font-size: 0.95rem !important;
        line-height: 1.8 !important;
    }
}

@container page-content (min-width: 501px) and (max-width: 768px) {
    .page-card-inner {
        padding: 1.75rem !important;
    }
    .page-title {
        font-size: 2rem !important;
    }
}


/* ==========================================================================
   13. Container Queries: Footer
   يُستخدم في: home.blade.php, page/show.blade.php
   ========================================================================== */

@container footer (max-width: 500px) {
    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
        text-align: center;
    }
    .footer-social {
        justify-content: center !important;
    }
}

@container footer (min-width: 501px) and (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 1.5rem !important;
    }
}

/* عندما يكون الـ footer في container-name: footer (صفحة home) */
@container footer (max-width: 600px) {
    .footer-grid {
        text-align: center;
    }
}

@container footer (min-width: 601px) and (max-width: 900px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr !important;
    }
}


/* ==========================================================================
   14. الجداول المتجاوبة (Responsive Tables)
   يُستخدم في: جميع الداشبوردات وصفحات العرض
   ========================================================================== */

/* غلاف الجدول المتجاوب - يتيح التمرير الأفقي */
.table-responsive-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--border-radius-md);
}

/* تحسين عرض الجداول على الهاتف */
@media (max-width: 767px) {
    .table-responsive-wrapper table th,
    .table-responsive-wrapper table td {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.8125rem !important;
    }

    .table-responsive-wrapper table {
        font-size: 0.8125rem;
    }
}


/* ==========================================================================
   15. بطاقات الإحصائيات - الداشبورد (Stats Cards)
   يُستخدم في: admin/dashboard, customer/dashboard, employee/dashboard
   ========================================================================== */

@media (max-width: 767px) {
    .stats-cards-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }

    .stats-cards-grid .stat-card {
        padding: 1rem !important;
    }

    .stats-cards-grid .stat-value {
        font-size: 1.25rem !important;
    }

    .stats-cards-grid .stat-badge {
        display: block;
        margin-top: 0.25rem;
    }
}

@media (max-width: 400px) {
    .stats-cards-grid {
        grid-template-columns: 1fr !important;
    }
}


/* ==========================================================================
   16. صفحة عرض الفاتورة (Invoice Show Page)
   يُستخدم في: customer/invoices/show.blade.php
   ========================================================================== */

/* ── رأس الصفحة (العنوان + أزرار الإجراءات) ── */
.invoice-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}

.invoice-page-title {
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
    flex-shrink: 0;
}

.invoice-action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.invoice-action-buttons a,
.invoice-action-buttons button {
    white-space: nowrap;
    padding: 0.5rem 1rem;
    border-radius: var(--border-radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

/* ── معاينة الفاتورة ── */
.invoice-preview {
    background: #ffffff;
    border-radius: var(--border-radius-xl);
    box-shadow: var(--shadow-lg);
    padding: 2rem;
    overflow: hidden;
}

/* ── تخطيط رأس الفاتورة (شركة + رقم الفاتورة) ── */
.invoice-header-layout {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
}

/* ── معلومات العميل ── */
.invoice-customer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* ── غلاف جدول العناصر ── */
.invoice-items-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 1.5rem 0;
    border-radius: var(--border-radius-md);
}

.invoice-items-wrapper table {
    min-width: 600px;
    width: 100%;
}

/* ── قسم المجاميع ── */
.invoice-totals-container {
    display: flex;
    justify-content: flex-end;
}

.invoice-totals {
    width: 100%;
    max-width: 24rem;
}

/* ── Modern Pro: رأس الفاتورة ── */
.invoice-modern-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
}

.invoice-modern-header .company-info {
    flex: 2;
    min-width: 0;
}

.invoice-modern-header .invoice-info {
    flex: 1;
    min-width: 0;
    text-align: left;
}

/* ── Modern Pro: تذييل الفاتورة ── */
.invoice-modern-footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 2rem;
}

/* ── معلومات البنك ── */
.invoice-bank-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 1rem;
}

/* ── التجاوب على الهاتف ── */
@media (max-width: 767px) {

    /* رأس الصفحة: تحويل لعمود */
    .invoice-page-header {
        flex-direction: column;
        align-items: stretch;
    }

    .invoice-page-title {
        font-size: 1.375rem;
        text-align: center;
    }

    /* الأزرار: شبكة من عمودين */
    .invoice-action-buttons {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }

    .invoice-action-buttons a,
    .invoice-action-buttons button {
        font-size: 0.8125rem;
        padding: 0.625rem 0.75rem;
        justify-content: center;
    }

    /* معاينة الفاتورة: تقليل الحشو */
    .invoice-preview {
        padding: 1rem;
        border-radius: var(--border-radius-md);
    }

    /* تخطيط رأس الفاتورة: تحويل لعمود */
    .invoice-header-layout {
        flex-direction: column;
        gap: 1rem;
    }

    .invoice-header-layout > div {
        width: 100% !important;
    }

    /* معلومات العميل: عمود واحد */
    .invoice-customer-grid {
        grid-template-columns: 1fr;
    }

    /* المجاميع: عرض كامل */
    .invoice-totals-container {
        justify-content: stretch;
    }

    .invoice-totals {
        max-width: 100%;
    }

    /* Modern Pro: رأس الفاتورة */
    .invoice-modern-header {
        flex-direction: column;
    }

    .invoice-modern-header .company-info,
    .invoice-modern-header .invoice-info {
        flex: none;
        width: 100% !important;
        text-align: center;
    }

    .invoice-modern-header .invoice-info {
        text-align: center;
    }

    /* Modern Pro: banner الفاتورة */
    .invoice-modern-header .invoice-badge {
        display: inline-block;
        margin: 0 auto;
        border-radius: var(--border-radius-lg);
    }

    /* Modern Pro: تذييل */
    .invoice-modern-footer {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    /* معلومات البنك: عمود واحد */
    .invoice-bank-grid {
        grid-template-columns: 1fr;
    }

    /* حجم الخط داخل الفاتورة */
    .invoice-preview h1,
    .invoice-preview .invoice-title-text {
        font-size: 1.25rem !important;
    }

    .invoice-preview h2 {
        font-size: 1.125rem !important;
    }

    .invoice-preview h3 {
        font-size: 1rem !important;
    }

    /* تصغير حجم الختم في Modern Pro */
    .invoice-stamp-circle {
        width: 8rem !important;
        height: 8rem !important;
        font-size: 0.625rem !important;
    }
}

/* شاشات صغيرة جداً */
@media (max-width: 480px) {

    .invoice-page-title {
        font-size: 1.125rem;
    }

    .invoice-action-buttons {
        grid-template-columns: 1fr;
    }

    .invoice-preview {
        padding: 0.75rem;
    }

    /* تصغير إضافي لأحجام الخطوط */
    .invoice-preview table th,
    .invoice-preview table td {
        padding: 0.375rem 0.5rem !important;
        font-size: 0.75rem !important;
    }
}


/* ==========================================================================
   17. صلاحيات الموظفين (Permissions Grid)
   يُستخدم في: employee/dashboard.blade.php
   ========================================================================== */

@media (max-width: 767px) {
    .permissions-grid {
        grid-template-columns: 1fr !important;
    }
}


/* ==========================================================================
   18. الحركات والانتقالات (Animations)
   ========================================================================== */

/* ── تأثير الانزلاق من الأعلى (للقوائم المنسدلة) ── */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── تأثير الظهور من الأسفل (للمحتوى) ── */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* كلاسات الأنيميشن */
.animate-fade-in-up {
    animation: fadeInUp 0.6s ease forwards;
    opacity: 0;
}

.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }


/* ==========================================================================
   19. Fallback للمتصفحات القديمة
   للمتصفحات التي لا تدعم Container Queries
   ========================================================================== */

@supports not (container-type: inline-size) {

    @media (max-width: 768px) {

        /* ── النافبار (Home) ── */
        .nav-links-desktop {
            display: none !important;
        }
        .mobile-menu-btn {
            display: flex !important;
        }
        .nav-logo-text {
            font-size: 1.125rem !important;
        }

        /* ── النافبار (Show Page) ── */
        .nav-desktop-links {
            display: none !important;
        }
        .nav-desktop-auth-links {
            display: none !important;
        }
        .hamburger-btn {
            display: flex !important;
        }
        .nav-register-btn {
            padding: 0.375rem 0.75rem !important;
            font-size: 0.8rem !important;
        }

        /* ── Hero Section ── */
        .hero-title {
            font-size: 1.75rem !important;
        }
        .hero-subtitle {
            font-size: 1rem !important;
        }
        .hero-buttons {
            flex-direction: column !important;
            align-items: center !important;
        }
        .hero-buttons a {
            width: 100% !important;
            max-width: 280px;
            text-align: center !important;
        }
        .hero-section {
            padding-top: 3rem !important;
            padding-bottom: 3rem !important;
        }

        /* ── Stats ── */
        .stats-grid {
            grid-template-columns: 1fr 1fr !important;
            gap: 0.75rem !important;
        }
        .stat-card {
            padding: 0.875rem !important;
        }
        .stat-value {
            font-size: 1.5rem !important;
        }

        /* ── Features ── */
        .features-grid {
            grid-template-columns: 1fr !important;
        }
        .features-title {
            font-size: 1.75rem !important;
        }

        /* ── CTA ── */
        .cta-title {
            font-size: 1.5rem !important;
        }
        .cta-buttons {
            flex-direction: column !important;
            align-items: center !important;
        }
        .cta-buttons a {
            width: 100% !important;
            max-width: 280px;
            text-align: center !important;
        }

        /* ── Page Content ── */
        .page-card-inner {
            padding: 1.25rem !important;
        }
        .page-title {
            font-size: 1.5rem !important;
            line-height: 1.4 !important;
        }
        .page-prose {
            font-size: 0.95rem !important;
        }

        /* ── Footer ── */
        .footer-grid {
            grid-template-columns: 1fr !important;
            text-align: center;
        }
        .footer-social {
            justify-content: center !important;
        }
    }
}


/* ==========================================================================
   20. تأثيرات التمرير (Hover Effects)
   ========================================================================== */

/* ── تأثيرات الشريط الجانبي ── */
.sidebar-responsive a {
    transition: background-color 0.2s ease, padding-right 0.2s ease, padding-left 0.2s ease;
}

.sidebar-responsive a:hover {
    padding-right: 1.5rem;
}

/* RTL Support */
html[dir="rtl"] .sidebar-responsive a:hover {
    padding-right: 1rem;
    padding-left: 1.5rem;
}


/* ==========================================================================
   21. احترام تفضيلات المستخدم (Accessibility)
   ========================================================================== */

/* تقليل الحركة للمستخدمين الذين يفضلون ذلك */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* تحسين التركيز للوصولية */
:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* طباعة */
@media print {
    .sidebar-responsive,
    .sidebar-toggle,
    .sidebar-overlay,
    .mobile-menu-btn,
    .hamburger-btn,
    .mobile-menu-toggle,
    .mobile-menu-panel,
    .invoice-action-buttons,
    nav {
        display: none !important;
    }

    .main-content-responsive {
        width: 100% !important;
        padding: 0 !important;
    }

    .invoice-preview {
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
    }

    .layout-flex {
        display: block !important;
    }
}