@import "tailwindcss";
@import "../../../vendor/livewire/flux/dist/flux.css";

@source '../../views';
@source '../../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../../vendor/livewire/flux-pro/stubs/**/*.blade.php';
@source '../../../vendor/livewire/flux/stubs/**/*.blade.php';

/* لو Flux فعلاً بتدعمه */
@custom-variant dark (&:where(.dark, .dark *));

@layer base {
    html,
    body {
        transition: background-color 0.6s ease, color 0.6s ease;
    }
}

@layer utilities {
    .wave-background {
        background-image: linear-gradient(
            -45deg,
            #f5ebe0,
            #e3d5ca,
            #d5bdaf,
            #f5ebe0
        );
        background-size: 600% 600%;
        animation: waveMotion 30s ease-in-out infinite;
    }
    .wave-background-dark {
        background-image: linear-gradient(
            -45deg,
            #0f172a,
            #1e293b,
            #0a0a0a,
            #0f172a
        );
        background-size: 600% 600%;
        animation: waveMotion 30s ease-in-out infinite;
    }

    @keyframes waveMotion {
        0% {
            background-position: 0% 50%;
        }
        50% {
            background-position: 100% 50%;
        }
        100% {
            background-position: 0% 50%;
        }
    }

    .animate-fade-bounce {
        animation: fadeBounce 3s ease-in-out infinite;
    }

    @keyframes fadeBounce {
        0%,
        100% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-5px);
        }
    }

    .animate-spin-slow {
        animation: spin-slow 10s linear infinite;
    }

    @keyframes spin-slow {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }
}
@media (max-width: 395px) {
    .tiny-element {
        font-size: 10px !important;
        padding: 0.25rem !important;
        gap: 0.25rem !important;
    }

    .tiny-avatar {
        width: 1.75rem !important;
        height: 1.75rem !important;
    }

    .tiny-button {
        width: 2.25rem !important;
        height: 2.25rem !important;
    }

    .tiny-icon {
        width: 1rem !important;
        height: 1rem !important;
    }
}


@media (max-width: 372px) {
    .tiny-element {
        font-size: 9px !important;
        padding: 0.2rem !important;
        gap: 0.2rem !important;
    }

    .tiny-avatar {
        width: 1.5rem !important;
        height: 1.5rem !important;
    }

    .tiny-button {
        width: 2rem !important;
        height: 2rem !important;
    }

    .tiny-icon {
        width: 0.875rem !important;
        height: 0.875rem !important;
    }
}

@media (max-width: 360px) {
    .tiny-element {
        font-size: 8px !important;
        padding: 0.15rem !important;
        gap: 0.15rem !important;
    }

    .tiny-avatar {
        width: 1.25rem !important;
        height: 1.25rem !important;
    }

    .tiny-button {
        width: 1.75rem !important;
        height: 1.75rem !important;
    }

    .tiny-icon {
        width: 0.75rem !important;
        height: 0.75rem !important;
    }
}




@media (max-width: 768px) {
    /* إخفاء رأس الجدول */
    #printable-area table thead {
      display: none;
    }
    /* تحويل الجدول إلى عناصر block */
    #printable-area table,
    #printable-area tbody,
    #printable-area tr,
    #printable-area td {
      display: block;
      width: 100%;
    }
    /* مسافة بين الصفوف */
    #printable-area tr {
      margin-bottom: 1rem;
    }
    /* محاذاة الخلية وتهيئة المسافة لعنصر ::before */
    #printable-area td {
      position: relative;
      padding-left: 50%;
      text-align: left;
    }
    /* عرض عنوان العمود قبل كل خلية */
    #printable-area td::before {
      content: attr(data-label);
      position: absolute;
      left: 0;
      width: 45%;
      padding-left: 1rem;
      font-weight: 600;
      text-align: left;
    }
  }