/* Silkroad Online Inventory Component - 2x7 Grid Layout */
.silkroad-inventory-container {
    @apply relative w-full max-w-md mx-auto;
    background: linear-gradient(145deg, #1e1b4b 0%, #312e81 50%, #1e1b4b 100%);
    border: 2px solid #6366f1;
    border-radius: 12px;
    box-shadow:
        0 8px 32px rgba(99, 102, 241, 0.3),
        inset 0 1px 2px rgba(255, 255, 255, 0.1);
    overflow: hidden;
    min-height: 500px;
}

/* Main Inventory Background */
.inventory-background {
    @apply relative p-4;
    background-image:
        url('/assets/images/ui/inventory-bg.jpg'),
        radial-gradient(circle at 20% 20%, rgba(139, 92, 246, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(99, 102, 241, 0.1) 0%, transparent 50%);
    background-size: cover, auto, auto;
    background-position: center, center, center;
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-blend-mode: overlay, normal, normal;
}

/* Equipment Grid - 2x7 Layout */
.equipment-grid-2x7 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(7, 1fr);
    gap: 8px;
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
    padding: 16px;
}

/* Individual Inventory Slots */
.inventory-slot {
    @apply relative aspect-square;
    background: linear-gradient(145deg, #1e293b 0%, #334155 50%, #1e293b 100%);
    border: 2px solid #475569;
    border-radius: 8px;
    transition: all 0.3s ease;
    overflow: hidden;
    min-height: 60px;
    min-width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inventory-slot:hover {
    border-color: #6366f1;
    box-shadow:
        0 4px 16px rgba(99, 102, 241, 0.4),
        inset 0 1px 2px rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

/* Slot Placeholders */
.slot-placeholder {
    @apply flex flex-col items-center justify-center h-full p-2 text-center w-full;
    background: linear-gradient(145deg, #374151 0%, #4b5563 50%, #374151 100%);
    border-radius: 6px;
}

.slot-placeholder i {
    @apply text-slate-400 text-lg mb-1;
}

.slot-label {
    @apply text-xs text-slate-300 font-medium leading-tight;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

/* Empty Slot Styling */
.empty-slot .slot-placeholder {
    @apply bg-slate-700 opacity-50;
    border: 1px dashed #64748b;
}

.empty-placeholder .slot-label {
    @apply text-slate-500 italic;
}

/* Special Slot Types */
.weapon-slot, .shield-slot {
    border-color: #dc2626;
    background: linear-gradient(145deg, #1e293b 0%, #450a0a 20%, #334155 80%, #1e293b 100%);
}

.weapon-slot:hover, .shield-slot:hover {
    border-color: #ef4444;
    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.4);
}

.weapon-placeholder, .shield-placeholder {
    @apply text-red-400;
}

.weapon-placeholder i, .shield-placeholder i {
    @apply text-red-400 text-lg;
}

.accessory-slot, .ring-slot {
    border-color: #7c3aed;
    background: linear-gradient(145deg, #1e293b 0%, #3c1361 20%, #334155 80%, #1e293b 100%);
}

.accessory-slot:hover, .ring-slot:hover {
    border-color: #8b5cf6;
    box-shadow: 0 4px 16px rgba(139, 92, 246, 0.4);
}

.job-slot {
    border-color: #059669;
    background: linear-gradient(145deg, #1e293b 0%, #064e3b 20%, #334155 80%, #1e293b 100%);
}

.job-slot:hover {
    border-color: #10b981;
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.4);
}

.job-placeholder {
    @apply text-emerald-400;
}

.job-placeholder i {
    @apply text-emerald-400;
}

/* Item Images */
.inventory-item {
    @apply w-full h-full object-cover rounded;
    transition: all 0.3s ease;
}

.inventory-item:hover {
    transform: scale(1.05);
    filter: brightness(1.2) saturate(1.1);
}

/* Item Grades */
.normal {
    border: 1px solid #64748b;
}

.rare {
    border: 1px solid #3b82f6;
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.5);
}

.epic {
    border: 1px solid #8b5cf6;
    box-shadow: 0 0 8px rgba(139, 92, 246, 0.5);
}

.legendary {
    border: 1px solid #f59e0b;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.5);
}

.mythic {
    border: 1px solid #ef4444;
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.7);
    animation: mythicGlow 2s ease-in-out infinite;
}

@keyframes mythicGlow {
    0%, 100% { box-shadow: 0 0 12px rgba(239, 68, 68, 0.7); }
    50% { box-shadow: 0 0 20px rgba(239, 68, 68, 1); }
}

/* Inventory Info Section */
.inventory-info {
    @apply flex flex-col items-center justify-center p-4 bg-slate-800 bg-opacity-50 border-t border-slate-600;
}

.inventory-title {
    @apply flex items-center text-lg font-bold text-white mb-2;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
}

.character-id {
    @apply text-sm;
}

/* Coming Soon Notice */
.coming-soon-notice {
    @apply flex items-center justify-center p-3 bg-slate-900 bg-opacity-50;
    border-top: 1px solid #374151;
}

/* Responsive Design */
@media (max-width: 640px) {
    .equipment-grid-2x7 {
        max-width: 240px;
        gap: 6px;
        padding: 12px;
    }

    .inventory-slot {
        min-height: 50px;
        min-width: 50px;
    }

    .slot-placeholder i {
        @apply text-sm;
    }

    .slot-label {
        @apply text-xs;
    }
}

@media (max-width: 480px) {
    .equipment-grid-2x7 {
        max-width: 200px;
        gap: 4px;
        padding: 8px;
    }

    .inventory-slot {
        min-height: 45px;
        min-width: 45px;
    }

    .slot-placeholder {
        @apply p-1;
    }

    .slot-placeholder i {
        @apply text-xs mb-0;
    }

    .slot-label {
        font-size: 10px;
    }
}

/* Animation Effects */
@keyframes slotGlow {
    0%, 100% { box-shadow: 0 0 8px rgba(99, 102, 241, 0.3); }
    50% { box-shadow: 0 0 16px rgba(99, 102, 241, 0.6); }
}

.inventory-slot.equipped {
    animation: slotGlow 2s ease-in-out infinite;
}

/* Hover Effects for Better UX */
.inventory-slot::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
    z-index: 1;
    pointer-events: none;
}

.inventory-slot:hover::before {
    transform: translateX(100%);
}

/* Silkroad-specific styling */
.silkroad-inventory-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        linear-gradient(45deg, transparent 49%, rgba(99, 102, 241, 0.1) 50%, transparent 51%),
        linear-gradient(-45deg, transparent 49%, rgba(139, 92, 246, 0.1) 50%, transparent 51%);
    pointer-events: none;
    z-index: 0;
}

.inventory-background {
    position: relative;
    z-index: 1;
}