/* Tailwind CSS Base Overrides + Custom Styles */
@layer base {
    body { 
        @apply min-h-screen flex flex-col;
    }
}

/* Bootstrap compatibility overrides */
.container {
    @apply mx-auto px-4;
}

.table {
    @apply w-full;
}

.table thead th { 
    @apply whitespace-nowrap bg-mu-primary text-white font-bold;
}

.table tbody tr {
    @apply hover:bg-gray-100 transition-colors;
}

/* Form styling with Tailwind */
.form-control {
    @apply w-full px-3 py-2 bg-white border border-gray-300 rounded-lg text-gray-800 
           focus:outline-none focus:border-mu-accent focus:ring-2 focus:ring-mu-accent focus:ring-opacity-50
           placeholder-gray-400;
}

.btn {
    @apply px-4 py-2 rounded-lg font-semibold transition-all duration-200 cursor-pointer;
}

.btn-primary {
    @apply bg-mu-accent text-white hover:bg-mu-secondary hover:shadow-lg;
}

.btn-secondary {
    @apply bg-gray-200 text-gray-700 hover:bg-gray-300 hover:text-mu-primary;
}

.btn-danger {
    @apply bg-red-600 text-white hover:bg-red-700 hover:shadow-lg;
}

.btn-success {
    @apply bg-green-600 text-white hover:bg-green-700 hover:shadow-lg;
}

/* Card components */
.card {
    @apply bg-white rounded-lg shadow-lg border border-gray-200;
}

.card-header {
    @apply bg-gradient-to-r from-mu-primary to-mu-secondary px-4 py-3 text-white font-bold rounded-t-lg;
}

.card-body {
    @apply p-4;
}

/* Alert components */
.alert {
    @apply px-4 py-3 rounded-lg mb-4;
}

.alert-danger {
    @apply bg-red-50 border border-red-300 text-red-800;
}

.alert-success {
    @apply bg-green-50 border border-green-300 text-green-800;
}

.alert-warning {
    @apply bg-yellow-50 border border-yellow-300 text-yellow-800;
}

.alert-info {
    @apply bg-blue-50 border border-blue-300 text-blue-800;
}

/* Item Tooltip Styles - Dark Gaming Theme */
.item-tooltip {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    color: #9dafc4;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 12px;
    line-height: 1.4;
    box-shadow: none;
    max-width: none;
    z-index: 9999;
}

.item-tooltip .item-name {
    color: #d4af37;
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 6px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.item-tooltip .excellent-option {
    color: #22c55e;
    font-size: 11px;
    margin: 2px 0;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    font-weight: 500;
}

.item-tooltip .skill-option {
    color: #00B3E4;
    font-size: 11px;
    margin: 2px 0;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.item-tooltip .luck-option {
    color: #22c55e;
    font-size: 11px;
    margin: 2px 0;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.item-tooltip .additional-option {
    color: #f97316;
    font-size: 11px;
    margin: 2px 0;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.item-tooltip .harmony-option {
    color: #facc15;
    font-size: 11px;
    margin: 2px 0;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    font-weight: 500;
}

.item-tooltip .ancient-option {
    color: #3b82f6;
    font-size: 11px;
    margin: 1px 0;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.item-tooltip .socket-option {
    color: #a855f7;
    font-size: 11px;
    margin: 1px 0;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

/* MuOnline Tooltip positioning */
.muonline-tooltip {
    position: absolute;
    display: none;
    z-index: 9999;
    pointer-events: none;
}

/* Guides Page - Dark Gaming Theme */
.guides-page .news-box {
    background: #12171D !important;
    border-color: rgba(212, 175, 55, 0.2) !important;
}

.guides-page .news-box > div:first-child,
.guides-page .bg-gradient-to-r {
    background: #090C0F !important;
    border-bottom-color: rgba(212, 175, 55, 0.2) !important;
}

/* Guides sidebar categories */
.guides-page .bg-mu-darker\/50 {
    background: #12171D !important;
    border-color: rgba(212, 175, 55, 0.2) !important;
}

.guides-page .bg-mu-darker\/50:hover {
    background: rgba(212, 175, 55, 0.05) !important;
    border-color: rgba(212, 175, 55, 0.4) !important;
}

/* Guides sidebar scrolling and active states */
.guides-page .w-80 {
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(212, 175, 55, 0.3) #12171D;
}

.guides-page .w-80::-webkit-scrollbar {
    width: 6px;
}

.guides-page .w-80::-webkit-scrollbar-track {
    background: #12171D;
    border-radius: 3px;
}

.guides-page .w-80::-webkit-scrollbar-thumb {
    background: rgba(212, 175, 55, 0.3);
    border-radius: 3px;
}

.guides-page .w-80::-webkit-scrollbar-thumb:hover {
    background: rgba(212, 175, 55, 0.5);
}

/* Active category styling - override all background classes */
.guides-page .category-toggle.bg-mu-gold\/20.text-mu-gold,
.guides-page .category-toggle[class*="bg-mu-gold/20"][class*="text-mu-gold"] {
    background: linear-gradient(135deg, #090C0F 0%, rgba(212, 175, 55, 0.15) 100%) !important;
    border: 1px solid rgba(212, 175, 55, 0.4) !important;
    box-shadow: 0 0 8px rgba(212, 175, 55, 0.2) !important;
    color: #d4af37 !important;
}

/* Ensure inactive categories maintain normal styling */
.guides-page .category-toggle.text-mu-text {
    background: #12171D !important;
    border: 1px solid rgba(212, 175, 55, 0.2) !important;
    color: #9dafc4 !important;
}

/* Active guide styling */
.guides-page .bg-mu-gold\/10 {
    background: rgba(212, 175, 55, 0.15) !important;
    border-left: 3px solid #d4af37 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* Guides Tables - Dark Gaming Theme - Rounded */
.guides-section table {
    background: #12171D;
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.guides-section thead tr,
.guides-section .bg-mu-gold\/20 {
    background: #090C0F !important;
}

.guides-section th {
    background: #090C0F !important;
    color: #d4af37 !important;
    border-color: rgba(212, 175, 55, 0.3) !important;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 16px 20px;
    border: none;
}

.guides-section th:first-child {
    border-top-left-radius: 12px;
}

.guides-section th:last-child {
    border-top-right-radius: 12px;
}

.guides-section td {
    background: #12171D !important;
    color: #9dafc4 !important;
    border-color: rgba(212, 175, 55, 0.2) !important;
    padding: 16px 20px;
    border-left: none;
    border-right: none;
    border-top: 1px solid rgba(212, 175, 55, 0.1);
    border-bottom: none;
}

.guides-section tbody tr:last-child td:first-child {
    border-bottom-left-radius: 12px;
}

.guides-section tbody tr:last-child td:last-child {
    border-bottom-right-radius: 12px;
}

.guides-section tbody tr:hover td {
    background: rgba(212, 175, 55, 0.05) !important;
    transition: background 0.3s ease;
}

.guides-section .border-mu-gold\/30 {
    border-color: rgba(212, 175, 55, 0.3) !important;
}