/* Custom CSS to replace Tailwind classes */
.tw-text-blue-700 { color: #1d4ed8; }
.tw-text-blue-800 { color: #1e40af; }
.tw-text-xs { font-size: 0.75rem; }
.tw-text-sm { font-size: 0.875rem; }
.tw-text-lg { font-size: 1.125rem; }
.tw-text-xl { font-size: 1.25rem; }
.tw-text-2xl { font-size: 1.5rem; }
.tw-text-gray-600 { color: #4b5563; }

/* Background colors */
.tw-bg-blue-50 { background-color: #eff6ff; }
.tw-bg-gray-50 { background-color: #f9fafb; }
.tw-bg-green-50 { background-color: #f0fdf4; }
.tw-bg-orange-50 { background-color: #fff7ed; }
.tw-bg-purple-50 { background-color: #faf5ff; }
.tw-bg-red-50 { background-color: #fef2f2; }
.tw-bg-yellow-50 { background-color: #fefce8; }
.tw-bg-indigo-50 { background-color: #eef2ff; }
.tw-bg-pink-50 { background-color: #fdf2f8; }
.tw-bg-teal-50 { background-color: #f0fdfa; }
.tw-bg-cyan-50 { background-color: #ecfeff; }

/* Text colors */
.tw-text-blue-600 { color: #2563eb; }
.tw-text-green-500 { color: #22c55e; }
.tw-text-green-600 { color: #16a34a; }
.tw-text-green-700 { color: #15803d; }
.tw-text-orange-500 { color: #f97316; }
.tw-text-orange-600 { color: #ea580c; }
.tw-text-purple-600 { color: #9333ea; }
.tw-text-red-500 { color: #ef4444; }
.tw-text-red-600 { color: #dc2626; }
.tw-text-yellow-600 { color: #ca8a04; }
.tw-text-indigo-600 { color: #4f46e5; }
.tw-text-pink-600 { color: #db2777; }
.tw-text-teal-600 { color: #0d9488; }
.tw-text-cyan-600 { color: #0891b2; }

/* Border colors */
.tw-border-t-green-600 { border-top: 3px solid #16a34a; }
.tw-border-t-orange-500 { border-top: 3px solid #f97316; }
.tw-border-t-blue-500 { border-top: 3px solid #3b82f6; }
.tw-border-t-purple-500 { border-top: 3px solid #a855f7; }

/* Card menu styles for dashboard */
.card-menu {
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border: none;
}
.card-menu:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
.card-menu i {
    font-size: 2.5rem;
    margin-bottom: 12px;
    display: block;
}
.card-menu h6 {
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0;
    color: #374151;
}


/* Slanted Tabs (Trapezoid) */
.slanted-tabs {
    border-bottom: 3px solid #000;
    gap: 6px;
    border-radius: 0;
}
.slanted-tabs .nav-item {
    margin-bottom: 0;
}
.slanted-tabs .nav-link {
    position: relative;
    padding: 10px 30px;
    color: #9ca3af;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    border: none !important;
    background: transparent !important;
    z-index: 1;
    margin-bottom: 0;
}
.slanted-tabs .nav-link:hover {
    color: #6b7280;
}
.slanted-tabs .nav-link::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    transform: perspective(50px) rotateX(20deg);
    transform-origin: bottom;
    z-index: -1;
    border-radius: 6px 6px 0 0;
    box-shadow: 0 -2px 5px rgba(0,0,0,0.08);
    transition: all 0.2s;
}
.slanted-tabs .nav-link.active {
    color: #fff !important;
}
.slanted-tabs .nav-link.active::before {
    background: #000;
    box-shadow: none;
}



/* Mobile responsive slanted tabs */
.slanted-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
}
.slanted-tabs::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}
.slanted-tabs .nav-item {
    white-space: nowrap;
    flex-shrink: 0;
}
@media (max-width: 576px) {
    .slanted-tabs .nav-link {
        padding: 8px 15px;
        font-size: 0.75rem;
    }
    .slanted-tabs {
        gap: 2px;
    }
}