@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Inter:wght@300;400;500;600;700&display=swap');

/* ===== RTL GLOBAL OVERRIDES ===== */
/* -- Text align -- */
[dir="rtl"] .text-left { text-align: right !important; }
[dir="rtl"] .text-right { text-align: left !important; }
[dir="rtl"] .lg\:text-left { text-align: right !important; }
[dir="rtl"] .lg\:text-right { text-align: left !important; }
[dir="rtl"] .md\:text-left { text-align: right !important; }
[dir="rtl"] .md\:text-right { text-align: left !important; }
[dir="rtl"] .sm\:text-left { text-align: right !important; }
[dir="rtl"] .sm\:text-right { text-align: left !important; }

/* -- Margins (swap left/right via logical properties) -- */
[dir="rtl"] .mr-0 { margin-right: 0 !important; margin-inline-end: 0; }
[dir="rtl"] .mr-1 { margin-right: 0 !important; margin-inline-end: 0.25rem; }
[dir="rtl"] .mr-1\.5 { margin-right: 0 !important; margin-inline-end: 0.375rem; }
[dir="rtl"] .mr-2 { margin-right: 0 !important; margin-inline-end: 0.5rem; }
[dir="rtl"] .mr-2\.5 { margin-right: 0 !important; margin-inline-end: 0.625rem; }
[dir="rtl"] .mr-3 { margin-right: 0 !important; margin-inline-end: 0.75rem; }
[dir="rtl"] .mr-4 { margin-right: 0 !important; margin-inline-end: 1rem; }
[dir="rtl"] .mr-5 { margin-right: 0 !important; margin-inline-end: 1.25rem; }
[dir="rtl"] .mr-6 { margin-right: 0 !important; margin-inline-end: 1.5rem; }
[dir="rtl"] .mr-8 { margin-right: 0 !important; margin-inline-end: 2rem; }
[dir="rtl"] .mr-10 { margin-right: 0 !important; margin-inline-end: 2.5rem; }
[dir="rtl"] .mr-auto { margin-right: 0 !important; margin-inline-end: auto; }

[dir="rtl"] .ml-0 { margin-left: 0 !important; margin-inline-start: 0; }
[dir="rtl"] .ml-1 { margin-left: 0 !important; margin-inline-start: 0.25rem; }
[dir="rtl"] .ml-1\.5 { margin-left: 0 !important; margin-inline-start: 0.375rem; }
[dir="rtl"] .ml-2 { margin-left: 0 !important; margin-inline-start: 0.5rem; }
[dir="rtl"] .ml-2\.5 { margin-left: 0 !important; margin-inline-start: 0.625rem; }
[dir="rtl"] .ml-3 { margin-left: 0 !important; margin-inline-start: 0.75rem; }
[dir="rtl"] .ml-4 { margin-left: 0 !important; margin-inline-start: 1rem; }
[dir="rtl"] .ml-5 { margin-left: 0 !important; margin-inline-start: 1.25rem; }
[dir="rtl"] .ml-6 { margin-left: 0 !important; margin-inline-start: 1.5rem; }
[dir="rtl"] .ml-8 { margin-left: 0 !important; margin-inline-start: 2rem; }
[dir="rtl"] .ml-10 { margin-left: 0 !important; margin-inline-start: 2.5rem; }
[dir="rtl"] .ml-auto { margin-left: 0 !important; margin-inline-start: auto; }

/* -- Paddings (swap left/right via logical properties) -- */
[dir="rtl"] .pr-0 { padding-right: 0 !important; padding-inline-end: 0; }
[dir="rtl"] .pr-1 { padding-right: 0 !important; padding-inline-end: 0.25rem; }
[dir="rtl"] .pr-1\.5 { padding-right: 0 !important; padding-inline-end: 0.375rem; }
[dir="rtl"] .pr-2 { padding-right: 0 !important; padding-inline-end: 0.5rem; }
[dir="rtl"] .pr-3 { padding-right: 0 !important; padding-inline-end: 0.75rem; }
[dir="rtl"] .pr-4 { padding-right: 0 !important; padding-inline-end: 1rem; }
[dir="rtl"] .pr-5 { padding-right: 0 !important; padding-inline-end: 1.25rem; }
[dir="rtl"] .pr-6 { padding-right: 0 !important; padding-inline-end: 1.5rem; }
[dir="rtl"] .pr-8 { padding-right: 0 !important; padding-inline-end: 2rem; }
[dir="rtl"] .pr-10 { padding-right: 0 !important; padding-inline-end: 2.5rem; }
[dir="rtl"] .pr-12 { padding-right: 0 !important; padding-inline-end: 3rem; }
[dir="rtl"] .pr-16 { padding-right: 0 !important; padding-inline-end: 4rem; }

[dir="rtl"] .pl-0 { padding-left: 0 !important; padding-inline-start: 0; }
[dir="rtl"] .pl-1 { padding-left: 0 !important; padding-inline-start: 0.25rem; }
[dir="rtl"] .pl-1\.5 { padding-left: 0 !important; padding-inline-start: 0.375rem; }
[dir="rtl"] .pl-2 { padding-left: 0 !important; padding-inline-start: 0.5rem; }
[dir="rtl"] .pl-3 { padding-left: 0 !important; padding-inline-start: 0.75rem; }
[dir="rtl"] .pl-4 { padding-left: 0 !important; padding-inline-start: 1rem; }
[dir="rtl"] .pl-5 { padding-left: 0 !important; padding-inline-start: 1.25rem; }
[dir="rtl"] .pl-6 { padding-left: 0 !important; padding-inline-start: 1.5rem; }
[dir="rtl"] .pl-8 { padding-left: 0 !important; padding-inline-start: 2rem; }
[dir="rtl"] .pl-10 { padding-left: 0 !important; padding-inline-start: 2.5rem; }
[dir="rtl"] .pl-12 { padding-left: 0 !important; padding-inline-start: 3rem; }
[dir="rtl"] .pl-16 { padding-left: 0 !important; padding-inline-start: 4rem; }

/* -- Flex direction -- */
[dir="rtl"] .flex-row { flex-direction: row-reverse !important; }
[dir="rtl"] .flex-row-reverse { flex-direction: row !important; }

/* -- Borders (swap left/right) -- */
[dir="rtl"] .border-l { border-left-width: 0 !important; border-right-width: var(--tw-border-width, 1px) !important; }
[dir="rtl"] .border-r { border-right-width: 0 !important; border-left-width: var(--tw-border-width, 1px) !important; }

/* -- Inset/Position (swap left/right) -- */
[dir="rtl"] .left-0 { left: auto !important; right: 0 !important; }
[dir="rtl"] .right-0 { right: auto !important; left: 0 !important; }
[dir="rtl"] .left-4 { left: auto !important; right: 1rem !important; }
[dir="rtl"] .right-4 { right: auto !important; left: 1rem !important; }

/* -- Sidebar inversions -- */
[dir="rtl"] .panel-sidebar { left: auto !important; right: 0 !important; border-right: none !important; border-left: 1px solid #EDE8E0 !important; }
[dir="rtl"] .panel-main { margin-left: 0 !important; margin-right: 260px !important; }
@media (max-width: 1024px) { [dir="rtl"] .panel-main { margin-right: 0 !important; } }

[dir="rtl"] .admin-sidebar { left: auto !important; right: 0 !important; border-right: none !important; border-left: 1px solid #EDE8E0 !important; }
[dir="rtl"] .admin-main { margin-left: 0 !important; margin-right: 260px !important; }
@media (max-width: 1024px) { [dir="rtl"] .admin-main { margin-right: 0 !important; } }

/* -- Arrow/chevron rotations in RTL -- */
[dir="rtl"] .-translate-x-full { transform: translateX(100%) !important; }
[dir="rtl"] .translate-x-full { transform: translateX(-100%) !important; }
[dir="rtl"] .lg\:translate-x-0 { transform: translateX(0) !important; }

/* -- Input direction for Arabic text -- */
[dir="rtl"] input[type="text"], [dir="rtl"] input[type="email"], [dir="rtl"] input[type="password"], [dir="rtl"] input[type="search"], [dir="rtl"] input[type="tel"], [dir="rtl"] textarea { direction: rtl; }

/* -- Numeric inputs stay LTR -- */
[dir="rtl"] input[type="number"], [dir="rtl"] input[type="date"] { direction: ltr; text-align: right; }

.font-playfair { font-family: 'Playfair Display', serif; }
.font-inter { font-family: 'Inter', sans-serif; }

body {
    font-family: 'Inter', sans-serif;
    background-color: #FAF7F2;
    color: #1A1A1A;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ===== SCROLL REVEAL ===== */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}
.reveal-left {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-left.visible {
    opacity: 1;
    transform: translateX(0);
}
.reveal-right {
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-right.visible {
    opacity: 1;
    transform: translateX(0);
}
.reveal-scale {
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-scale.visible {
    opacity: 1;
    transform: scale(1);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }

/* Stagger children */
.stagger-children > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.stagger-children.visible > *:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0s; }
.stagger-children.visible > *:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.08s; }
.stagger-children.visible > *:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 0.16s; }
.stagger-children.visible > *:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 0.24s; }
.stagger-children.visible > *:nth-child(5) { opacity: 1; transform: translateY(0); transition-delay: 0.32s; }
.stagger-children.visible > *:nth-child(6) { opacity: 1; transform: translateY(0); transition-delay: 0.40s; }

/* ===== HOVER EFFECTS ===== */
.hover-lift {
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(45,90,61,0.10);
}
.hover-scale {
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.hover-scale:hover {
    transform: scale(1.03);
}
.hover-glow {
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.hover-glow:hover {
    box-shadow: 0 0 0 3px rgba(201,168,76,0.25);
    border-color: #C9A84C;
}

/* ===== SCROLLBAR HIDE ===== */
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar { display: none; }

/* ===== TAB TRANSITIONS ===== */
.tab-content {
    animation: tabFadeIn 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes tabFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===== FLOATING ANIMATION ===== */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
.animate-float { animation: float 4s ease-in-out infinite; }
.animate-float-delay { animation: float 4s ease-in-out 1s infinite; }

/* ===== SHIMMER / SKELETON ===== */
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
.shimmer {
    background: linear-gradient(90deg, #F0EBE3 25%, #FAF7F2 50%, #F0EBE3 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

/* ===== BOUNCE ===== */
@keyframes bounce-soft {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
.animate-bounce-soft { animation: bounce-soft 2s ease-in-out infinite; }

/* ===== SPIN SLOW ===== */
@keyframes spin-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.animate-spin-slow { animation: spin-slow 8s linear infinite; }

/* Toast & Notifications */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.toast {
    min-width: 320px;
    max-width: 420px;
    padding: 14px 18px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    color: white;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 8px 32px rgba(26,26,26,0.18);
    animation: toastSlideIn 0.4s cubic-bezier(0.22, 1, 0.36, 1), toastFadeOut 0.3s ease-in 4.7s forwards;
    backdrop-filter: blur(10px);
}

.toast-success { background: linear-gradient(135deg, #2D5A3D 0%, #4A8C5F 100%); }
.toast-error { background: linear-gradient(135deg, #C0392B 0%, #E74C3C 100%); }
.toast-warning { background: linear-gradient(135deg, #D4A017 0%, #F39C12 100%); }
.toast-info { background: linear-gradient(135deg, #2E86C1 0%, #5DADE2 100%); }

@keyframes toastSlideIn {
    from { opacity: 0; transform: translateX(60px) scale(0.9); }
    to { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes toastFadeOut {
    to { opacity: 0; transform: translateX(60px) scale(0.9); }
}

/* Modal / Popup */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(26,26,26,0.45);
    backdrop-filter: blur(4px);
    z-index: 9980;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.modal-overlay.active { opacity: 1; }

.modal-box {
    background: white;
    border-radius: 16px;
    box-shadow: 0 24px 64px rgba(26,26,26,0.20);
    max-width: 520px;
    width: 92%;
    max-height: 90vh;
    overflow-y: auto;
    transform: scale(0.92) translateY(20px);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.modal-overlay.active .modal-box {
    transform: scale(1) translateY(0);
}

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

/* Animations générales */
.animate-fade-in {
    animation: fadeInUp 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.animate-fade-in-delay-1 { animation: fadeInUp 0.5s 0.1s cubic-bezier(0.22, 1, 0.36, 1) both; }
.animate-fade-in-delay-2 { animation: fadeInUp 0.5s 0.2s cubic-bezier(0.22, 1, 0.36, 1) both; }
.animate-fade-in-delay-3 { animation: fadeInUp 0.5s 0.3s cubic-bezier(0.22, 1, 0.36, 1) both; }

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse-soft {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.animate-pulse-soft { animation: pulse-soft 2s ease-in-out infinite; }

/* Hover card lift */
.card-lift {
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.card-lift:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(45,90,61,0.12);
}

/* Card shine effect */
.card-shine {
    position: relative;
    overflow: hidden;
}
.card-shine::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    transition: left 0.6s ease;
    z-index: 5;
    pointer-events: none;
}
.card-shine:hover::before {
    left: 150%;
}

/* Fade in stagger for children */
.fade-in-stagger > * {
    opacity: 0;
    animation: fadeInUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.fade-in-stagger > *:nth-child(1) { animation-delay: 0s; }
.fade-in-stagger > *:nth-child(2) { animation-delay: 0.08s; }
.fade-in-stagger > *:nth-child(3) { animation-delay: 0.16s; }
.fade-in-stagger > *:nth-child(4) { animation-delay: 0.24s; }
.fade-in-stagger > *:nth-child(5) { animation-delay: 0.32s; }
.fade-in-stagger > *:nth-child(6) { animation-delay: 0.40s; }

/* Green accent badges */
.badge-green {
    background: linear-gradient(135deg, #2D5A3D 0%, #4A8C5F 100%);
    color: white;
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #FAF7F2; }
::-webkit-scrollbar-thumb { background: #E0D8CF; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #B85C38; }

/* Gradient text */
.gradient-text {
    background: linear-gradient(135deg, #2D5A3D 0%, #B85C38 50%, #C9A84C 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Glass effect */
.glass {
    background: rgba(255,255,255,0.72);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.3);
}

/* Smooth image loading */
.img-loading {
    background: linear-gradient(110deg, #F0EBE3 8%, #FAF7F2 18%, #F0EBE3 33%);
    background-size: 200% 100%;
    animation: shimmer 1.5s linear infinite;
}

/* ============================================
   RESPONSIVE DESIGN — Mobile & Tablet
   ============================================ */

/* Mobile sidebar panel */
@media (max-width: 1024px) {
    .panel-sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        z-index: 100;
    }
    .panel-sidebar.open {
        transform: translateX(0);
    }
    .panel-main {
        margin-left: 0 !important;
    }
    .panel-toggle-btn {
        display: flex !important;
    }
}

@media (min-width: 1025px) {
    .panel-toggle-btn {
        display: none !important;
    }
}

/* Admin sidebar mobile */
@media (max-width: 1024px) {
    .admin-sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        z-index: 100;
    }
    .admin-sidebar.open {
        transform: translateX(0);
    }
    .admin-main {
        margin-left: 0 !important;
    }
    .admin-toggle-btn {
        display: flex !important;
    }
}

@media (min-width: 1025px) {
    .admin-toggle-btn {
        display: none !important;
    }
}

/* General mobile adjustments */
@media (max-width: 768px) {
    .hero-title {
        font-size: 1.75rem !important;
        line-height: 1.2 !important;
    }
    .hero-subtitle {
        font-size: 0.875rem !important;
    }
    .section-title {
        font-size: 1.5rem !important;
    }
    .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    .grid-cols-2 {
        grid-template-columns: 1fr !important;
    }
    .grid-cols-3 {
        grid-template-columns: 1fr !important;
    }
    .grid-cols-4 {
        grid-template-columns: 1fr 1fr !important;
    }
    .md\\:grid-cols-2 {
        grid-template-columns: 1fr !important;
    }
    .md\\:grid-cols-3 {
        grid-template-columns: 1fr !important;
    }
    .lg\\:grid-cols-3 {
        grid-template-columns: 1fr !important;
    }
    .lg\\:grid-cols-4 {
        grid-template-columns: 1fr 1fr !important;
    }
    .text-2xl {
        font-size: 1.25rem !important;
    }
    .text-3xl {
        font-size: 1.5rem !important;
    }
    .text-4xl {
        font-size: 1.875rem !important;
    }
    .p-6 {
        padding: 1rem !important;
    }
    .px-6 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    .py-12 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
    .rounded-2xl {
        border-radius: 0.75rem !important;
    }
    .gap-6 {
        gap: 1rem !important;
    }
    .space-y-6 > * + * {
        margin-top: 1rem !important;
    }
    /* Cards full width */
    .card-hover {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    /* Modal full screen on mobile */
    .modal-content {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
        min-height: 100vh !important;
    }
    /* Header mobile */
    .header-nav {
        display: none !important;
    }
    .header-nav.open {
        display: flex !important;
        flex-direction: column !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        background: white !important;
        padding: 1rem !important;
        box-shadow: 0 4px 20px rgba(0,0,0,0.1) !important;
        z-index: 50 !important;
    }
    /* Footer mobile */
    .footer-grid {
        grid-template-columns: 1fr !important;
        text-align: center !important;
    }
    /* Table scroll */
    .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .table-responsive table {
        min-width: 640px !important;
    }
    /* Form inputs */
    input, select, textarea {
        font-size: 16px !important; /* Prevents iOS zoom */
    }
    /* Touch targets */
    button, a, [role="button"] {
        min-height: 44px;
    }
}

/* Tablet adjustments */
@media (min-width: 769px) and (max-width: 1024px) {
    .lg\\:grid-cols-4 {
        grid-template-columns: 1fr 1fr !important;
    }
    .lg\\:grid-cols-3 {
        grid-template-columns: 1fr 1fr !important;
    }
    .container {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
}

/* Safe area for notched phones */
@supports (padding: max(0px)) {
    .safe-area-top {
        padding-top: max(1rem, env(safe-area-inset-top));
    }
    .safe-area-bottom {
        padding-bottom: max(1rem, env(safe-area-inset-bottom));
    }
    .safe-area-x {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
    }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Dark mode support (basic) */
@media (prefers-color-scheme: dark) {
    /* Kept light for now — brand is light-themed */
}

/* Print styles */
@media print {
    .no-print, .panel-sidebar, .admin-sidebar, header, footer, .btn, button {
        display: none !important;
    }
    .panel-main, .admin-main {
        margin-left: 0 !important;
        padding: 0 !important;
    }
    body {
        background: white !important;
        color: black !important;
    }
}

/* Mobile menu toggle button */
.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
}
@media (max-width: 768px) {
    .mobile-menu-btn {
        display: block;
    }
}

/* Panel sidebar overlay */
.panel-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 99;
}
.panel-sidebar-overlay.open {
    display: block;
}

/* Admin sidebar overlay */
.admin-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 99;
}
.admin-sidebar-overlay.open {
    display: block;
}