@font-face {
    font-family: 'Vazir';
    src: url('../fonts/Vazir.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

body,
html {
    direction: rtl;
    font-family: 'Vazir', sans-serif !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Vazir', sans-serif !important;
}


/* Basic styles from original style.css */
.hidden-row {
    display: none;
    /* Or visibility: collapse; */
    opacity: 0;
    /* Added for transition */
}

tr {
    transition: opacity 0.5s ease-in-out;
}


/* --- START: Dark Mode Styles (Moved from dashboard.php) --- */
/* Added !important to key rules */
html.dark body {
    background-color: #111827 !important;
    /* gray-900 تیره‌تر */
    color: #ffffff !important;
    /* سفید برای خوانایی */
}

html.dark .panel {
    background-color: #1f2937 !important;
    /* gray-800 */
    color: #ffffff !important;
    /* Ensure text is white */
    border: 1px solid #374151 !important;
    /* حاشیه برای تمایز */
}

html.dark .panel h2,
html.dark .panel h3 {
    color: #e5e7eb !important;
    /* light gray for headings */
}

html.dark .table-header {
    background-color: #374151 !important;
    /* gray-700 */
    color: #d1d5db !important;
    /* gray-300 برای سرستون‌ها */
}

html.dark .table-row {
    /* Color set directly on td below */
    background-color: #1f2937 !important;
    /* Match panel background */
}

html.dark .table-row:nth-child(even) {
    background-color: #273343 !important;
    /* Slightly different dark for even rows */
}

html.dark .table-row td,
html.dark .panel p {
    color: #e5e7eb !important;
    /* Use a light gray for better readability */
    border-bottom-color: #374151 !important;
    /* Add subtle separators */
}

/* Override border for last row's td if using divide-y */
html.dark tbody.divide-y tr:last-child td {
    border-bottom: none !important;
}

html.dark .divide-y> :not([hidden])~ :not([hidden]) {
    border-color: #374151 !important;
}

html.dark table {
    border-color: #374151 !important;
    /* Table border */
}


html.dark .text-label,
html.dark .card .card-label {
    color: #d1d5db !important;
    /* gray-300 برای لیبل‌ها */
}

/* Target specific light text colors if needed */
html.dark .text-gray-800 {
    color: #e5e7eb !important;
}

html.dark .text-gray-700 {
    color: #d1d5db !important;
}

html.dark .text-gray-600 {
    color: #9ca3af !important;
}

html.dark .text-gray-500 {
    color: #6b7280 !important;
}

html.dark .border-indigo-200 {
    border-color: #4f46e5 !important;
}

html.dark .border-gray-200 {
    border-color: #374151 !important;
}


html.dark .text-input,
html.dark .select-input {
    background-color: #374151 !important;
    /* gray-700 برای ورودی‌ها */
    color: #ffffff !important;
    border-color: #4b5563 !important;
    /* gray-600 */
}

html.dark .text-input::placeholder {
    color: #9ca3af !important;
}

/* اصلاح استایل select در دارک مود */
html.dark .select-input {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: left 0.75rem center !important;
    /* Position arrow left for RTL */
    background-size: 1.5em 1.5em !important;
    padding-left: 2.5rem !important;
    padding-right: 0.75rem !important;
}

/* Style for options in dark mode (limited browser support) */
html.dark .select-input option {
    background-color: #374151 !important;
    color: #ffffff !important;
}

/* پایان اصلاح استایل select */


html.dark .svg-icon {
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%) !important;
}

/* Keep specific icons like edit/view colored */
/*
html.dark .button-edit .svg-icon,
html.dark .button-edit-product .svg-icon,
html.dark .button-edit-test .svg-icon,
html.dark .button-view-test .svg-icon {
    filter: none !important;
}
*/


/* استایل دکمه‌های محصول */
html.dark .button-add {
    background: linear-gradient(to right, #10b981, #059669) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

html.dark .button-add:hover {
    background: linear-gradient(to right, #059669, #047857) !important;
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.4);
}

html.dark .button-logout,
html.dark .button-delete {
    background: linear-gradient(to right, #ef4444, #dc2626) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

html.dark .button-logout:hover,
html.dark .button-delete:hover {
    background: linear-gradient(to right, #dc2626, #b91c1c) !important;
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.4);
}

html.dark .button-filter,
html.dark .button-back,
html.dark .button-show {
    background: linear-gradient(to right, #3b82f6, #2563eb) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

html.dark .button-filter:hover,
html.dark .button-back:hover,
html.dark .button-show:hover {
    background: linear-gradient(to right, #2563eb, #1d4ed8) !important;
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.4);
}


html.dark .button-reset,
html.dark .button-disabled,
html.dark .button-hide,
html.dark .pagination-disabled span,
/* Target span inside pagination */
html.dark .pagination-disabled {
    background: linear-gradient(to right, #6b7280, #4b5563) !important;
    color: #e5e7eb !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    cursor: not-allowed !important;
}

html.dark .button-reset:hover,
html.dark .button-hide:hover,
html.dark .button-disabled:hover {
    background: linear-gradient(to right, #4b5563, #374151) !important;
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.4);
}

html.dark .button-edit,
/* General edit */
html.dark .button-edit-product {
    /* Product edit */
    background: linear-gradient(to right, #f59e0b, #d97706) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

html.dark .button-edit:hover,
html.dark .button-edit-product:hover {
    background: linear-gradient(to right, #d97706, #b45309) !important;
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.4);
}

/* Pagination Links */
html.dark a.pagination-link,
html.dark a.page-numbers:not(.current) {
    /* target wp pagination link */
    background: linear-gradient(to right, #3b82f6, #2563eb) !important;
    color: #ffffff !important;
    border-color: #374151 !important;
    /* Adjust border */
}

html.dark a.pagination-link:hover,
html.dark a.page-numbers:not(.current):hover {
    background: linear-gradient(to right, #2563eb, #1d4ed8) !important;
}

html.dark span.pagination-current,
html.dark span.page-numbers.current {
    /* target wp pagination span */
    background: linear-gradient(to right, #1d4ed8, #1e3a8a) !important;
    /* Darker for current */
    color: #ffffff !important;
    border-color: #1e40af !important;
    /* Adjust border */
}

html.dark span.pagination-ellipsis,
html.dark span.page-numbers.dots {
    /* Style for '...' */
    border-color: #374151 !important;
    background-color: #1f2937 !important;
    color: #9ca3af !important;
}


/* دکمه‌های آزمون در جدول داشبورد */
html.dark .button-view-test {
    background: none !important;
    color: #60a5fa !important;
    /* Lighter blue */
    box-shadow: none !important;
    text-decoration: none !important;
}

html.dark .button-view-test:hover {
    color: #93c5fd !important;
    /* Even lighter blue on hover */
    text-decoration: underline !important;
}

html.dark .button-edit-test {
    background: none !important;
    color: #fcd34d !important;
    /* Lighter yellow */
    box-shadow: none !important;
    text-decoration: none !important;
}

html.dark .button-edit-test:hover {
    color: #fde68a !important;
    /* Even lighter yellow on hover */
    text-decoration: underline !important;
}

/* دکمه افزودن آزمون (از نوع add) */
html.dark .button-add-test {
    /* Assuming this class might be used or use .button-add */
    background: linear-gradient(to right, #10b981, #059669) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

html.dark .button-add-test:hover {
    background: linear-gradient(to right, #059669, #047857) !important;
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.4);
}

html.dark #theme-toggle {
    background-color: #374151 !important;
    color: #e5e7eb !important;
}

html.dark #theme-toggle:hover {
    background-color: #4b5563 !important;
}

/* Adjust status pill colors for dark mode */
html.dark span[class*="bg-"][class*="text-"] {
    /* More general selector for pills */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    /* Add subtle border */
}

/* General Status Pills */
html.dark .bg-gray-100.text-gray-800 {
    background-color: #4b5563 !important;
    color: #e5e7eb !important;
}

html.dark .bg-blue-100.text-blue-800 {
    background-color: #1e40af !important;
    color: #93c5fd !important;
}

/* بدون آزمون */
html.dark .bg-yellow-100.text-yellow-800 {
    background-color: #b45309 !important;
    color: #fcd34d !important;
}

/* نیاز به تکمیل */
html.dark .bg-orange-100.text-orange-800 {
    background-color: #c2410c !important;
    color: #fdba74 !important;
}

/* خطا */
html.dark .bg-green-100.text-green-800 {
    background-color: #047857 !important;
    color: #a7f3d0 !important;
}

/* تأیید */
html.dark .bg-red-100.text-red-800 {
    background-color: #b91c1c !important;
    color: #fca5a5 !important;
}

/* رد */

/* Card Specific Backgrounds */
html.dark .card {
    background-color: #374151 !important;
    /* Darker card background */
    border-color: #4b5563 !important;
}

html.dark .card.bg-blue-50 {
    background-color: #1e3a8a !important;
}

/* Darker Blue Card */
html.dark .card.bg-purple-50 {
    background-color: #5b21b6 !important;
}

/* Darker Purple Card */
html.dark .card.bg-yellow-50 {
    background-color: #92400e !important;
}

/* Darker Yellow Card */
html.dark .card.bg-green-50 {
    background-color: #065f46 !important;
}

/* Darker Green Card */
html.dark .card.bg-red-50 {
    background-color: #991b1b !important;
}

/* Darker Red Card */
html.dark .card.bg-indigo-50 {
    background-color: #3730a3 !important;
}

/* Darker Indigo Card */


/* Chart Panel */
html.dark .chart-panel {
    background-color: #1f2937 !important;
    /* gray-800 */
    border-color: #374151 !important;
}

html.dark .chart-panel h3 {
    color: #e5e7eb !important;
}

/* --- END: Dark Mode Styles --- */

/* --- Enhanced Glassmorphism Styles --- */
.glass-nav {
    background: linear-gradient(135deg, rgba(45, 87, 219, 0.85), rgba(85, 51, 255, 0.75));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.45);
    border-radius: 16px;
}

.glass-nav-item {
    color: #ffffff;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    padding: 0.5rem 1rem;
    border-radius: 8px;
}

.glass-nav-item:hover {
    color: #ffffff;
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.glass-nav-item::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -2px;
    left: 0;
    background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0.5));
    transition: width 0.3s ease;
}

.glass-nav-item:hover::after {
    width: 100%;
}

/* Dark mode version */
html.dark .glass-nav {
    background-color: #2d3748 !important; /* Slightly lighter dark gray (gray-800) */
    background-image: none !important;
    border: 1px solid #4a5568 !important; /* gray-700 border */
    box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.35) !important; /* Adjusted shadow */
    border-radius: 8px !important; /* Soften corners slightly */
}

html.dark .glass-nav a { /* Target links directly */
    color: #e2e8f0 !important; /* Lighter gray text (gray-200) */
    padding: 0.6rem 1rem !important; /* Adjust padding for balance */
    border-radius: 6px !important;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out !important;
}

html.dark .glass-nav a:hover {
    background-color: rgba(255, 255, 255, 0.1) !important; /* Subtle light background on hover */
    color: #ffffff !important; /* White text on hover */
    transform: none !important; /* Remove previous scale effect */
    box-shadow: none !important; /* Remove previous hover shadow */
}

html.dark .glass-nav .svg-icon { /* Ensure icons are white */
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%) !important;
}

/* Keep logout red on hover */
html.dark .glass-nav a[href*="logout"]:hover {
    background-color: rgba(239, 68, 68, 0.2) !important; /* Light red background */
    color: #f87171 !important; /* Lighter red text (red-400) */
}
html.dark .glass-nav a[href*="logout"]:hover .svg-icon {
     filter: none !important; /* Keep icon color as is */
     /* Or apply specific filter if needed: filter: invert(55%) sepia(52%) saturate(576%) hue-rotate(320deg) brightness(100%) contrast(93%) !important; */
}


/* Explicitly style the user name span if needed */
html.dark .glass-nav span.dark\:text-white {
    color: #e2e8f0 !important; /* Match link text color */
}

html.dark .glass-nav span.dark\:text-white .svg-icon {
     filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%) !important;
}


html.dark #theme-toggle {
    background-color: rgba(255, 255, 255, 0.1) !important; /* Match hover background */
    color: #e2e8f0 !important;
    border-radius: 9999px !important; /* Ensure it's fully rounded */
    padding: 0.5rem !important;
}

/* html.dark #theme-toggle:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    transform: rotate(15deg) !important; /* Keep rotation effect */
} */

/* Remove the separate .glass-nav-item rules if they conflict */
/* Adjust padding/margin on the container if needed */
nav.dark\:glass-nav {
    padding: 0.5rem !important; /* Adjust overall nav padding */
    margin-bottom: 2rem !important;
}

/* General purpose glassmorphism classes for use throughout the plugin */
.glass-panel {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.5));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.glass-panel:hover {
    box-shadow: 0 10px 40px 0 rgba(31, 38, 135, 0.2);
}

.glass-panel-dark {
    background: linear-gradient(135deg, rgba(45, 87, 219, 0.5), rgba(85, 51, 255, 0.4));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    color: white;
    transition: all 0.3s ease;
}

.glass-panel-dark:hover {
    box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.3);
}

/* Dark mode versions */
html.dark .glass-panel {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.7), rgba(30, 41, 59, 0.5));
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: white;
}

html.dark .glass-panel-dark {
    background: linear-gradient(135deg, rgba(17, 24, 39, 0.8), rgba(17, 24, 39, 0.6));
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Fix for Nav background in Dark Mode */
html.dark nav.bg-white {
    background-color: #2d3748 !important; /* Use the intended dark background (e.g., gray-800) */
    background-image: none !important; /* Remove any light-mode gradients */
    border-color: #4a5568 !important; /* Adjust border for dark mode */
    box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.35) !important; /* Dark mode appropriate shadow */
    border-radius: 8px !important; /* Consistent border radius */
}

/* Ensure link styles within the corrected nav are applied */
html.dark nav.bg-white a {
    color: #e2e8f0 !important; /* Lighter gray text (gray-200) */
    padding: 0.6rem 1rem !important;
    border-radius: 6px !important;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out !important;
}

html.dark nav.bg-white a:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

html.dark nav.bg-white .svg-icon {
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%) !important;
}

/* Keep logout red on hover */
html.dark nav.bg-white a[href*="logout"]:hover {
    background-color: rgba(239, 68, 68, 0.2) !important;
    color: #f87171 !important;
}
html.dark nav.bg-white a[href*="logout"]:hover .svg-icon {
     filter: none !important;
}

/* Style user name span */
html.dark nav.bg-white span.dark\:text-white {
    color: #e2e8f0 !important;
}

html.dark nav.bg-white span.dark\:text-white .svg-icon {
     filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%) !important;
}

/* Theme toggle in nav */
html.dark nav.bg-white #theme-toggle {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #e2e8f0 !important;
    border-radius: 9999px !important;
    padding: 0.5rem !important;
}

html.dark nav.bg-white #theme-toggle:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    transform: rotate(15deg) !important;
}

/* --- Ensure View/Edit Icons in Dashboard Test List are White in Dark Mode --- */
html.dark .button-view-test .svg-icon,
html.dark .button-edit-test .svg-icon {
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%) !important; /* Force the white filter */
}
/* start Pagination */

.pagination-wrapper {
                                            display: flex;
                                            justify-content: center;
                                            margin-top: 1.5rem;
                                            /* mt-6 */
                                        }
                    
                                        .page-numbers {
                                            list-style: none;
                                            padding: 0;
                                            display: inline-flex;
                                            /* Use inline-flex for direct children */
                                            gap: 0.5rem;
                                            /* space-x-2 */
                                            align-items: center;
                                        }
                    
                                        .page-numbers li {
                                            display: contents;
                                            /* Let items flow with inline-flex */
                                        }
                    
                                        /* General link/span styling - Defaults (transparent border/bg) */
                                        .page-numbers a,
                                        .page-numbers span {
                                            display: inline-flex;
                                            align-items: center;
                                            justify-content: center;
                                            min-width: 2.5rem;
                                            /* h-10 w-10 approx */
                                            height: 2.5rem;
                                            /* h-10 */
                                            padding: 0 0.75rem;
                                            text-decoration: none;
                                            border: 1px solid transparent;
                                            /* Default: transparent border */
                                            border-radius: 0.375rem;
                                            /* rounded-md */
                                            font-size: 0.875rem;
                                            /* text-sm */
                                            font-weight: 500;
                                            /* font-medium */
                                            transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
                                            background-color: transparent;
                                            /* Default: transparent bg */
                                            color: #4b5563;
                                            /* Default text color for links */
                                        }
                    
                                        /* Number links - Add specific styles */
                                        .page-numbers a:not(.prev):not(.next) {
                                            /* Target number links specifically */
                                            background-color: #fff;
                                            border-color: #e5e7eb;
                                            color: #4b5563;
                                        }
                    
                                        .page-numbers a:not(.prev):not(.next):hover {
                                            background-color: #f9fafb;
                                            border-color: #d1d5db;
                                            color: #1f2937;
                                        }
                    
                                        /* Current page */
                                        .page-numbers span.current {
                                            background-color: #eef2ff;
                                            border-color: #6366f1;
                                            color: #4338ca;
                                            z-index: 10;
                                        }
                    
                                        /* Dots */
                                        .page-numbers span.dots {
                                            border: none;
                                            background: none;
                                            color: #9ca3af;
                                            padding: 0 0.25rem;
                                            min-width: auto;
                                            height: auto;
                                        }
                    
                                        /* Previous/Next links - Add specific styles */
                                        .page-numbers .prev,
                                        .page-numbers .next {
                                            background-color: #fff;
                                            border-color: #e5e7eb;
                                            color: #6b7280;
                                        }
                    
                                        .page-numbers .prev:hover,
                                        .page-numbers .next:hover {
                                            background-color: #f9fafb;
                                            border-color: #d1d5db;
                                            color: #374151;
                                        }
                    
                                        .page-numbers .svg-icon {
                                            /* Keep SVG styling */
                                            width: 1rem;
                                            height: 1rem;
                                        }
                    
                                        /* --- Dark Mode --- */
                                        html.dark .page-numbers a,
                                        html.dark .page-numbers span {
                                            border-color: transparent;
                                            background-color: transparent;
                                            color: #d1d5db;
                                            /* Default dark text */
                                        }
                    
                                        /* Dark Number links */
                                        html.dark .page-numbers a:not(.prev):not(.next) {
                                            background-color: #374151;
                                            border-color: #4b5563;
                                            color: #d1d5db;
                                        }
                    
                                        html.dark .page-numbers a:not(.prev):not(.next):hover {
                                            background-color: #4b5563;
                                            border-color: #6b7280;
                                            color: #f9fafb;
                                        }
                    
                                        /* Dark Current page */
                                        html.dark .page-numbers span.current {
                                            background-color: #3730a3;
                                            border-color: #818cf8;
                                            color: #e0e7ff;
                                        }
                    
                                        /* Dark Dots */
                                        html.dark .page-numbers span.dots {
                                            color: #6b7280;
                                            border: none;
                                            background: none;
                                        }
                    
                                        /* Dark Previous/Next links */
                                        html.dark .page-numbers .prev,
                                        html.dark .page-numbers .next {
                                            background-color: #374151;
                                            border-color: #4b5563;
                                            color: #9ca3af;
                                        }
                    
                                        html.dark .page-numbers .prev:hover,
                                        html.dark .page-numbers .next:hover {
                                            background-color: #4b5563;
                                            border-color: #6b7280;
                                            color: #e5e7eb;
                                        }
                    
                                        /* Dark SVG icon */
                                        html.dark .page-numbers .svg-icon {
                                            filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
                                        }
                    /* end pagination */

/* Custom Tooltip Styles */
.tooltip-container .tooltip-text {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
  /* Ensure Tailwind positioning classes still work */
}

/* Only show tooltip on hover on medium screens and up */
@media (min-width: 768px) { /* Tailwind md breakpoint */
  .tooltip-container:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
  }
}