/* ══════════════════════════════════════════════════
   MitouLoyer — custom.css
   Pure CSS: grids, animations, modals, utilities
   ══════════════════════════════════════════════════ */

/* ── Theme Variables ── */
:root {
    --primary-50: #eaf5ee;
    --primary-100: #d0e8d9;
    --primary-200: #a1d1b3;
    --primary-500: #1a5c38;
    --primary-600: #236b43;
    --primary-700: #1a5030;
    --ink: #111813;
    --ink-mid: #3a4a3f;
    --ink-muted: #6b7c72;
    --off-white: #f7faf8;
    --white: #ffffff;
    --border: #e5e7eb;
    --bg-gray-50: #f9fafb;
    --bg-gray-100: #f3f4f6;
    --slate-50: #f8fafc;
    --slate-100: #f1f5f9;
    --slate-200: #e2e8f0;
    --slate-300: #cbd5e1;
    --slate-400: #94a3b8;
    --slate-500: #64748b;
    --slate-600: #475569;
    --slate-700: #334155;
    --slate-800: #1e293b;
    --slate-900: #0f172a;
    --slate-950: #020617;
}

[data-theme="dark"] {
    --primary-50: #0d2b1a;
    --primary-100: #154228;
    --primary-200: #1e5e39;
    --primary-500: #3db870;
    --primary-600: #4ecf82;
    --primary-700: #6adf93;
    --ink: #e8f0eb;
    --ink-mid: #a8bdb0;
    --ink-muted: #7a9485;
    --off-white: #141f19;
    --white: #0f1612;
    --border: #243320;
    --bg-gray-50: #141f19;
    --bg-gray-100: #1a2920;
    --slate-50: #0d2b1a;
    /* Emerald Darker */
    --slate-100: #154228;
    --slate-200: #1e5e39;
    --slate-300: #2a7a4a;
    --slate-400: #35a060;
    --slate-500: #3db870;
    /* Primary 500 */
    --slate-600: #4ecf82;
    --slate-700: #6adf93;
    --slate-800: #1e5e39;
    --slate-900: #154228;
    --slate-950: #0d2b1a;
}

/* ── Grid Backgrounds ── */
.square-grid-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image:
        linear-gradient(to right, var(--border) 1.5px, transparent 1px),
        linear-gradient(to bottom, var(--border) 1.5px, transparent 1px);
    background-size: 20px 30px;
    -webkit-mask-image: radial-gradient(circle at 50% 50%, #3db870 20%, transparent 60%);
    mask-image: radial-gradient(circle at 50% 50%, #3db870 20%, transparent 60%);
    opacity: 0.7;
}

.hero-bg-grid {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image:
        linear-gradient(to right, var(--border) 1.5px, transparent 1px),
        linear-gradient(to bottom, var(--border) 1.5px, transparent 1px);
    background-size: 20px 30px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #3db870 60%, transparent 100%);
    mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #3db870 60%, transparent 100%);
    opacity: 0.7;
    pointer-events: none;
}

[data-theme="dark"] .hero-bg-grid {
    opacity: 0.5;
}

.bottom-grid-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image:
        linear-gradient(to right, var(--border) 1.5px, transparent 1px),
        linear-gradient(to bottom, var(--border) 1.5px, transparent 1px);
    background-size: 20px 30px;
    -webkit-mask-image: radial-gradient(ellipse 70% 50% at 50% 140%, #3db870 60%, transparent 100%);
    mask-image: radial-gradient(ellipse 70% 50% at 50% 140%, #3db870 60%, transparent 100%);
    opacity: 0.7;
    pointer-events: none;
}

[data-theme="dark"] .bottom-grid-bg {
    opacity: 0.5;
}

/* ── Keyframes ── */
@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes backdropIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes panelIn {
    from {
        opacity: 0;
        transform: scale(.92) translateY(24px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes cardIn {
    from {
        opacity: 0;
        transform: translateY(8px) scale(.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes flashShow {
    0% {
        opacity: 0;
        transform: translateY(-8px);
        max-height: 0;
        margin-bottom: 0;
        padding-top: 0;
        padding-bottom: 0;
    }

    8% {
        opacity: 1;
        transform: translateY(0);
        max-height: 80px;
        margin-bottom: 1rem;
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    85% {
        opacity: 1;
        transform: translateY(0);
        max-height: 80px;
        margin-bottom: 1rem;
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    100% {
        opacity: 0;
        transform: translateY(-8px);
        max-height: 0;
        margin-bottom: 0;
        padding-top: 0;
        padding-bottom: 0;
    }
}

@keyframes float-slow {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-20px) rotate(5deg);
    }
}

@keyframes float-slow-reverse {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(20px) rotate(-5deg);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Animation Utilities ── */
.animate-fade-in-up {
    animation: fade-in-up .5s cubic-bezier(.16, 1, .3, 1) forwards;
}

.animate-fadeInUp {
    animation: fadeInUp .4s cubic-bezier(.16, 1, .3, 1);
}

.fade-in-down {
    animation: fadeInDown 0.8s ease-out forwards;
}

.fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
}

.animate-float-1 {
    animation: float-slow 7s ease-in-out infinite;
}

.animate-float-2 {
    animation: float-slow-reverse 8s ease-in-out infinite;
}

.animate-float-3 {
    animation: float-slow 9s ease-in-out infinite;
}

/* ── Dashboard Table Animations ── */

/* Container animation - smooth fade-in and subtle scale */
@keyframes table-container-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes overflow-reset {
    from {
        overflow: hidden;
    }

    to {
        overflow-x: auto;
    }
}

.table-container {
    animation: table-container-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Masquer scrollbar pendant l'animation */
.table-scroll-container {
    overflow: hidden;
    animation: overflow-reset 0s linear 1.1s forwards;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.table-scroll-container::-webkit-scrollbar {
    display: none;
}

/* Table row animation with stagger effect */
@keyframes table-row-in {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.table-row {
    animation: table-row-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    position: relative;
}

/* Stagger effect for each row */
.table-row:nth-child(1) {
    animation-delay: 0.1s;
}

.table-row:nth-child(2) {
    animation-delay: 0.2s;
}

.table-row:nth-child(3) {
    animation-delay: 0.3s;
}

.table-row:nth-child(4) {
    animation-delay: 0.4s;
}

.table-row:nth-child(5) {
    animation-delay: 0.5s;
}

/* Row hover animation - slide background */
@keyframes row-hover-slide {
    from {
        background-position: -100% 0;
    }

    to {
        background-position: 100% 0;
    }
}

.table-row::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, transparent, rgba(26, 92, 56, 0.08), transparent);
    background-size: 200% 100%;
    pointer-events: none;
}

.table-row:hover::before {
    animation: row-hover-slide 0.6s ease-out forwards;
}

/* Mobile row animation */
@keyframes table-row-mobile-in {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.table-row-mobile {
    animation: table-row-mobile-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.table-row-mobile:nth-child(1) {
    animation-delay: 0.1s;
}

.table-row-mobile:nth-child(2) {
    animation-delay: 0.2s;
}

.table-row-mobile:nth-child(3) {
    animation-delay: 0.3s;
}

.table-row-mobile:nth-child(4) {
    animation-delay: 0.4s;
}

.table-row-mobile:nth-child(5) {
    animation-delay: 0.5s;
}

/* Mobile row hover - subtle slide up */
.table-row-mobile:hover {
    transform: translateY(-2px);
}

/* Status indicator animations */
@keyframes status-pulse-success {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 0 4px rgba(16, 185, 129, 0);
        transform: scale(1.05);
    }
}

@keyframes status-pulse-pending {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 0 4px rgba(245, 158, 11, 0);
        transform: scale(1.05);
    }
}

.status-indicator-success {
    animation: status-pulse-success 2.5s infinite;
}

.status-indicator-pending {
    animation: status-pulse-pending 2.5s infinite;
}

/* ── Modal (Pure CSS :target) ── */
.modal-css-container {
    position: fixed;
    inset: 0;
    z-index: 10000;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: visibility 0s .35s, opacity .35s ease, fadeInUp .5s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    overflow: hidden;
}

.modal-css-container:target {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition: opacity .35s ease;
}

/* Verrouille le scroll du body quand un modal est ouvert */
body:has(.modal-css-container:target) {
    overflow: hidden !important;
}

.modal-panel [class*="overflow-y-auto"] {
    overscroll-behavior: contain !important;
}

.modal-css-container:target .modal-backdrop {
    animation: backdropIn .35s ease-out both;
}

.modal-css-container:target .modal-panel {
    animation: panelIn .4s cubic-bezier(.16, 1, .3, 1) both;
}

@media (max-width: 640px) {
    .modal-css-container {
        padding: 0 !important;
    }

    .modal-css-container>div {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }

    .modal-panel {
        width: 100% !important;
        max-width: 100% !important;
        height: 100vh !important;
        height: 100dvh !important;
        border-radius: 0 !important;
        margin: 0 !important;
        display: flex;
        flex-direction: column;
        border: none !important;
    }

    /* Rend le contenu flexible pour occuper tout l'espace et défiler si besoin */
    .modal-panel [class*="overflow-y-auto"] {
        flex: 1;
        max-height: none !important;
        overscroll-behavior: contain;
    }

    /* Ajustement pour les formulaires */
    .modal-panel form {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
}

/* ── Bottom Navbar Mobile ── */
.bottom-nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    color: var(--ink-muted);
    transition: all 0.2s ease;
    flex: 1;
    height: 100%;
}

.bottom-nav-link svg {
    transition: transform 0.2s ease;
}

.bottom-nav-link.active {
    color: var(--primary-500);
}

.bottom-nav-link.active svg {
    stroke-width: 2.5;
}

.bottom-nav-link:active svg {
    transform: scale(0.85);
}

/* ── Table & List row animation ── */
@keyframes rowIn {
    from {
        opacity: 0;
        transform: translateY(12px) scale(.99);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Apply to all table rows in the dashboard */
tbody tr {
    opacity: 0;
    animation: rowIn 0.5s cubic-bezier(.16, 1, .3, 1) forwards;
}

/* Apply to all card-like items in lists (mobile and dashboard items) */
.card-animate,
.sm\:hidden>div[class*="p-5"],
.md\:hidden>div[class*="p-5"],
.grid>div[class*="p-5"] {
    opacity: 0;
    animation: rowIn 0.5s cubic-bezier(.16, 1, .3, 1) forwards;
}

/* Pure CSS Staggering (up to 15 items) */
tbody tr:nth-child(1),
.card-animate:nth-child(1),
.divide-y>div:nth-child(1) {
    animation-delay: 0.05s;
}

tbody tr:nth-child(2),
.card-animate:nth-child(2),
.divide-y>div:nth-child(2) {
    animation-delay: 0.10s;
}

tbody tr:nth-child(3),
.card-animate:nth-child(3),
.divide-y>div:nth-child(3) {
    animation-delay: 0.15s;
}

tbody tr:nth-child(4),
.card-animate:nth-child(4),
.divide-y>div:nth-child(4) {
    animation-delay: 0.20s;
}

tbody tr:nth-child(5),
.card-animate:nth-child(5),
.divide-y>div:nth-child(5) {
    animation-delay: 0.25s;
}

tbody tr:nth-child(6),
.card-animate:nth-child(6),
.divide-y>div:nth-child(6) {
    animation-delay: 0.30s;
}

tbody tr:nth-child(7),
.card-animate:nth-child(7),
.divide-y>div:nth-child(7) {
    animation-delay: 0.35s;
}

tbody tr:nth-child(8),
.card-animate:nth-child(8),
.divide-y>div:nth-child(8) {
    animation-delay: 0.40s;
}

tbody tr:nth-child(9),
.card-animate:nth-child(9),
.divide-y>div:nth-child(9) {
    animation-delay: 0.45s;
}

tbody tr:nth-child(10),
.card-animate:nth-child(10),
.divide-y>div:nth-child(10) {
    animation-delay: 0.50s;
}

tbody tr:nth-child(11),
.card-animate:nth-child(11),
.divide-y>div:nth-child(11) {
    animation-delay: 0.55s;
}

tbody tr:nth-child(12),
.card-animate:nth-child(12),
.divide-y>div:nth-child(12) {
    animation-delay: 0.60s;
}

tbody tr:nth-child(13),
.card-animate:nth-child(13),
.divide-y>div:nth-child(13) {
    animation-delay: 0.65s;
}

tbody tr:nth-child(14),
.card-animate:nth-child(14),
.divide-y>div:nth-child(14) {
    animation-delay: 0.70s;
}

tbody tr:nth-child(15),
.card-animate:nth-child(15),
.divide-y>div:nth-child(15) {
    animation-delay: 0.75s;
}

@media (max-width: 1024px) {
    body.dash {
        padding-bottom: 4.5rem;
    }
}

/* ── Flash message auto-dismiss ── */
.flash-msg {
    overflow: hidden;
    animation: flashShow 4.5s ease both;
    pointer-events: auto;
}

/* ── Global transitions (theme switch) ── */
body,
body * {
    transition: background-color .22s ease, border-color .22s ease, color .18s ease;
}

/* ── Bottom Navbar Mobile ── */
.bottom-nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    color: var(--ink-muted);
    transition: all 0.2s ease;
    flex: 1;
}

.bottom-nav-link svg {
    transition: transform 0.2s ease;
}

.bottom-nav-link.active {
    color: var(--primary-500);
}

.bottom-nav-link.active svg {
    transform: translateY(-2px);
    stroke-width: 2.2;
}

.bottom-nav-link:active svg {
    transform: scale(0.9);
}

@media (max-width: 1024px) {

    /* Only add padding if bottom nav is present (Dashboard) */
    body:has(.fixed.bottom-0) {
        padding-bottom: 5rem;
    }
}

/* ── Alpine cloak ── */
[x-cloak] {
    display: none !important;
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

/* Track */
::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 2px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #35d374;
    border-radius: 8px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    border-radius: 2px;
    background: #555;
}

/* ── Livewire / NProgress Loader Customization ── */
#nprogress .bar {
    background: var(--primary-500) !important;
    height: 3px !important;
}

#nprogress .peg {
    box-shadow: 0 0 10px var(--primary-500), 0 0 5px var(--primary-500) !important;
}

#nprogress .spinner-icon {
    border-top-color: var(--primary-500) !important;
    border-left-color: var(--primary-500) !important;
}