/* Import Minecraft-like Fonts */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&family=Silkscreen:wght@400;700&display=swap');

/* Dynamic CSS Variables Overrides for sub-components (list-tool.php etc) */
:root {
    --tool-bg: #121212 !important;
    --tool-card-bg: #2e2e2e !important;
    --tool-text: #ffffff !important;
    --tool-text-muted: #aaaaaa !important;
    --tool-border: #000000 !important;
    --tool-card-border: #000000 !important;
    --tool-primary-light: #55ffff !important;
    --tool-gradient-1: linear-gradient(135deg, #2e2e2e 0%, #1e1e1e 100%) !important;
    --tool-shadow: none !important;
    --tool-shadow-lg: none !important;
    --tool-shadow-xl: none !important;
}

/* Main Overrides */
* {
    border-radius: 0px !important; /* Make everything blocky */
}

/* Fix sticky header overlap on smaller screens when links wrap */
.sticky {
    position: relative !important;
}
@media (min-width: 1024px) {
    .sticky {
        position: sticky !important;
    }
}

body {
    background-color: #121212 !important; /* Minecraft dark dirt / cave background */
    background-image: radial-gradient(#1a1a1a 20%, transparent 20%), radial-gradient(#1a1a1a 20%, transparent 20%) !important;
    background-size: 20px 20px !important;
    background-position: 0 0, 10px 10px !important;
    color: #e0e0e0 !important;
    font-family: 'Courier New', Courier, monospace !important;
}

/* Titles and Navigation */
h1, h2, h3, h4, h5, h6, 
.font-extrabold, .font-bold, 
.text-2xl, .text-xl, .text-lg, 
nav a, .nav-link, .menu-item, 
.titlebar-text, .panel-title,
.exc-tool-name, .section-title h2,
.swal2-title, .cute-text {
    font-family: 'Silkscreen', 'VT323', monospace !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

h1, h2, h3, h4, .section-title h2 {
    text-shadow: 2px 2px 0px #000 !important;
    color: #ffff55 !important; /* Minecraft gold/yellow titles */
}

/* Navbar and Header overrides */
header, nav, .bg-white, div[class*="bg-white"], .v-theme .shadow {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
    border-bottom: 4px solid #3c3c3c !important;
}

header a, nav a {
    color: #ffffff !important;
}

header a:hover, nav a:hover {
    color: #55ffff !important; /* Cyan hover */
    background-color: #2e2e2e !important;
}

/* Text color overrides */
.text-gray-700, .text-gray-800, .text-gray-900, .text-dark, .text-black, .text-white-900, .text-gray-600 {
    color: #e0e0e0 !important;
}

.text-blue-500, .text-blue-600 {
    color: #55ffff !important; /* Minecraft Cyan */
}

.text-green-500, .text-green-600 {
    color: #55ff55 !important; /* Minecraft Green */
}

.text-red-500, .text-red-600 {
    color: #ff5555 !important; /* Minecraft Red */
}

/* Panels and Cards - Minecraft Item Slot UI border */
.panel, .v-card, .col-span-8, .col-span-4, .border, [class*="border"], .v-theme, .exchange-card, .api-card {
    background-color: #2e2e2e !important;
    border: 4px solid #000000 !important;
    box-shadow: inset -4px -4px 0px #1d1d1d, inset 4px 4px 0px #4d4d4d !important;
    color: #ffffff !important;
}

/* Specific product cards on homepage */
.fade-in.col-span-8, .fade-in.col-span-4, .fade-in.md\:col-span-2 {
    background-color: #2e2e2e !important;
    border: 4px solid #000000 !important;
    box-shadow: inset -4px -4px 0px #1d1d1d, inset 4px 4px 0px #4d4d4d !important;
    padding: 10px !important;
    transition: transform 0.1s !important;
}

.fade-in.col-span-8:hover, .fade-in.col-span-4:hover, .fade-in.md\:col-span-2:hover {
    transform: scale(1.02);
    border-color: #ffff55 !important; /* yellow border on hover */
}

/* Minecraft Button Style */
.btn-control, .btn-start, .btn-stop, .btn-config, .btn-save, 
button, input[type="submit"], 
.cursor-pointer.border.rounded, 
a[class*="cursor-pointer"],
.btn-custom1, .btn-custom2, .btn-custom3,
[class*="btn-nap"], [class*="exc-submit"], [class*="xtcolor"], .exc-submit, .btn-nap {
    background: #8c8c8c !important;
    border: 4px solid #000000 !important;
    box-shadow: inset -4px -4px 0px #5c5c5c, inset 4px 4px 0px #dbdbdb !important;
    color: #ffffff !important;
    text-shadow: 2px 2px 0px #3f3f3f !important;
    font-family: 'Silkscreen', 'VT323', monospace !important;
    text-transform: uppercase !important;
    font-weight: bold !important;
    padding: 8px 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
}

.btn-control:hover, .btn-start:hover, button:hover, 
input[type="submit"]:hover, 
.cursor-pointer.border.rounded:hover, 
a[class*="cursor-pointer"]:hover,
.btn-custom1:hover, .btn-custom2:hover, .btn-custom3:hover,
[class*="btn-nap"]:hover, [class*="exc-submit"]:hover, [class*="xtcolor"]:hover, .exc-submit:hover, .btn-nap:hover {
    background: #5c5c5c !important;
    box-shadow: inset -4px -4px 0px #3c3c3c, inset 4px 4px 0px #8c8c8c !important;
    color: #ffff55 !important; /* Minecraft gold/yellow text on hover */
    text-decoration: none !important;
}

/* Inputs and Forms - Minecraft Inset Container style */
input, select, textarea, .form-control {
    background-color: #000000 !important;
    color: #55ff55 !important; /* Minecraft green text */
    border: 4px solid #3c3c3c !important;
    box-shadow: inset 4px 4px 0px #1a1a1a !important;
    padding: 8px 12px !important;
    font-family: 'Courier New', Courier, monospace !important;
    font-weight: bold !important;
    outline: none !important;
}

input:focus, select:focus, textarea:focus, .form-control:focus {
    border-color: #ffff55 !important; /* yellow highlight on focus */
}

/* Table styles */
table {
    border: 4px solid #000000 !important;
    background-color: #1a1a1a !important;
}

th {
    background-color: #2e2e2e !important;
    color: #ffff55 !important;
    border-bottom: 4px solid #000000 !important;
    font-family: 'Silkscreen', monospace !important;
}

td {
    border-bottom: 2px solid #3c3c3c !important;
    color: #ffffff !important;
}

/* Alerts and Modals - Fixed text contrast */
.alert, .modal, .modal-header, .modal-content, .sweet-alert, .swal2-modal, .cute-alert, #myModal {
    background-color: #2e2e2e !important;
    border: 4px solid #000000 !important;
    box-shadow: inset -4px -4px 0px #1d1d1d, inset 4px 4px 0px #4d4d4d !important;
    color: #ffffff !important;
}

.swal2-title, .swal2-html-container, .cute-text, .modal-header *, .modal-content *, #myModal * {
    color: #ffffff !important;
    text-shadow: 1px 1px 0px #000 !important;
}

/* Custom changes to make elements look pixelated and cute */
.v-logo {
    image-rendering: pixelated !important;
}

.badge, .x-label {
    background-color: #555555 !important;
    border: 2px solid #000000 !important;
    color: #ffff55 !important;
    font-family: 'VT323', monospace !important;
    font-size: 14px !important;
}

/* Hero sliders and image container */
.item img, .owl-item img {
    border: 4px solid #000000 !important;
    box-shadow: 4px 4px 0px rgba(0,0,0,0.5) !important;
}

/* Background class cleanups */
.bg-light, .bg-gray-100, .bg-gray-200, .bg-gray-50, .bg-slate-50, .bg-slate-100, .tool-store-wrapper {
    background-color: #121212 !important;
    background-image: radial-gradient(#1a1a1a 20%, transparent 20%), radial-gradient(#1a1a1a 20%, transparent 20%) !important;
    background-size: 20px 20px !important;
    background-position: 0 0, 10px 10px !important;
}

/* Custom Minecraft Card Component for Grid Cards */
.mc-card {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    height: 100% !important;
    min-height: 380px !important; /* Ensure consistent height across all columns */
    background-color: #2e2e2e !important;
    border: 4px solid #000000 !important;
    box-shadow: inset -4px -4px 0px #1d1d1d, inset 4px 4px 0px #4d4d4d !important;
    padding: 12px !important;
    box-sizing: border-box !important;
    position: relative !important;
}

.mc-card img {
    width: 100% !important;
    height: 160px !important;
    object-fit: cover !important;
    border: 4px solid #000000 !important;
    image-rendering: pixelated !important;
}

.mc-card-body {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    justify-content: space-between !important;
    margin-top: 10px !important;
}

.mc-card-title {
    font-family: 'Silkscreen', 'VT323', monospace !important;
    font-size: 18px !important;
    font-weight: bold !important;
    color: #ffff55 !important; /* Gold */
    text-shadow: 2px 2px 0px #000000 !important;
    text-align: center !important;
    margin: 8px 0 !important;
    text-transform: uppercase !important;
}

.mc-card-text {
    font-size: 13px !important;
    color: #e0e0e0 !important;
    text-align: center !important;
    flex-grow: 1 !important;
    margin-bottom: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1.4 !important;
    font-family: 'Courier New', Courier, monospace !important;
}

.mc-card-badge {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    background-color: #000000 !important;
    color: #55ffff !important; /* Cyan badge text */
    border: 2px solid #55ffff !important;
    padding: 3px 8px !important;
    font-family: 'Silkscreen', 'VT323', monospace !important;
    font-size: 11px !important;
    z-index: 10 !important;
    text-shadow: none !important;
    pointer-events: none !important;
}
/* Navigation Bar blocky Minecraft styled buttons */
.mc-nav-btn {
    background: #8c8c8c !important;
    border: 3px solid #000000 !important;
    box-shadow: inset -2px -2px 0px #5c5c5c, inset 2px 2px 0px #dbdbdb !important;
    color: #ffffff !important;
    text-shadow: 1px 1px 0px #3f3f3f !important;
    font-family: 'Silkscreen', 'VT323', monospace !important;
    text-transform: uppercase !important;
    font-weight: bold !important;
    font-size: 12px !important;
    padding: 4px 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    height: 34px !important;
    box-sizing: border-box !important;
}

.mc-nav-btn:hover {
    background: #5c5c5c !important;
    box-shadow: inset -2px -2px 0px #3c3c3c, inset 2px 2px 0px #8c8c8c !important;
    color: #ffff55 !important;
    text-decoration: none !important;
}

.mc-nav-avatar {
    border: 3px solid #000000 !important;
    background-color: #2e2e2e !important;
    box-shadow: inset -2px -2px 0px #1d1d1d, inset 2px 2px 0px #4d4d4d !important;
    padding: 2px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 34px !important;
    width: 34px !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
}

.mc-nav-avatar img {
    width: 100% !important;
    height: 100% !important;
    border-radius: 0px !important;
}

/* Optimize Navigation links to prevent wrapping and look balanced */
nav a, .nav-link, .menu-item {
    font-family: 'VT323', monospace !important; /* Use narrow pixel font for nav links to save space */
    font-size: 20px !important; /* VT323 is vertically tall, so 20px is perfect */
    letter-spacing: 0.5px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
}

@media (min-width: 1024px) and (max-width: 1200px) {
    nav a, .nav-link, .menu-item {
        font-size: 18px !important;
        padding-left: 6px !important;
        padding-right: 6px !important;
    }
    .mc-nav-btn {
        font-size: 11px !important;
        padding: 3px 6px !important;
    }
}

/* Custom Responsive Hiding Utilities to simulate Tailwind without compiler */
@media (min-width: 1024px) {
    .lg\:hidden, [class*="lg:hidden"] {
        display: none !important;
    }
    .lg\:flex, [class*="lg:flex"] {
        display: flex !important;
    }
}
@media (max-width: 1023px) {
    .lg\:flex, [class*="lg:flex"] {
        display: none !important;
    }
}

/* Enchanted Minecraft Admin Button */
.mc-admin-btn {
    background: #4a0e4e !important; /* Enchanted dark purple */
    border: 3px solid #000000 !important;
    box-shadow: inset -2px -2px 0px #2a052c, inset 2px 2px 0px #b83dbb !important;
    color: #ffff55 !important; /* Gold text */
    text-shadow: 1px 1px 0px #3f3f3f !important;
    font-family: 'Silkscreen', 'VT323', monospace !important;
    text-transform: uppercase !important;
    font-weight: bold !important;
    font-size: 12px !important;
    padding: 4px 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    height: 34px !important;
    box-sizing: border-box !important;
}

.mc-admin-btn:hover {
    background: #751a7b !important; /* Lighter glowing purple */
    box-shadow: inset -2px -2px 0px #4a0e4e, inset 2px 2px 0px #d85ee0 !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

/* Clean mobile menu toggle button formatting */
#mobile-menu-btn {
    background: #8c8c8c !important;
    border: 3px solid #000000 !important;
    box-shadow: inset -2px -2px 0px #5c5c5c, inset 2px 2px 0px #dbdbdb !important;
    padding: 4px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 34px !important;
    width: 34px !important;
    color: #ffffff !important;
    border-radius: 0px !important;
}

#mobile-menu-btn span {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    display: inline-flex !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Force modal elements to have transparent backgrounds to clean up text content block */
#myModal, .modal, .modal-header, .modal-content {
    background-color: #2e2e2e !important;
}
#myModal a, #myModal p, #myModal span, #myModal blockquote, #myModal marquee, #myModal font, #myModal div {
    background-color: transparent !important;
    background: transparent !important;
}
#myModal a {
    color: #55ffff !important;
    text-decoration: underline !important;
}
#myModal a:hover {
    color: #ffff55 !important;
}
#myModal .flex.justify-end button {
    background: #8c8c8c !important;
    border: 3px solid #000000 !important;
    box-shadow: inset -2px -2px 0px #5c5c5c, inset 2px 2px 0px #dbdbdb !important;
    color: #ffffff !important;
    font-family: 'Silkscreen', 'VT323', monospace !important;
    text-shadow: 1px 1px 0px #3f3f3f !important;
    text-transform: uppercase !important;
    font-weight: bold !important;
    padding: 4px 12px !important;
    cursor: pointer !important;
}
#myModal .flex.justify-end button:hover {
    background: #5c5c5c !important;
    box-shadow: inset -2px -2px 0px #3c3c3c, inset 2px 2px 0px #8c8c8c !important;
    color: #ffff55 !important;
}

/* Force hide mobile menu button on desktop */
@media (min-width: 1024px) {
    #mobile-menu-btn {
        display: none !important;
    }
}

/* DataTables Overrides - Dark Theme Minecraft Style */
.dataTables_wrapper {
    color: #ffffff !important;
}
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing,
.dataTables_wrapper .dataTables_paginate {
    color: #ffffff !important;
    margin-bottom: 10px !important;
    margin-top: 10px !important;
}
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    background-color: #000000 !important;
    color: #55ff55 !important;
    border: 3px solid #3c3c3c !important;
    box-shadow: inset 2px 2px 0px #1a1a1a !important;
    padding: 4px 8px !important;
    font-family: 'Courier New', monospace !important;
}
table.dataTable {
    background-color: #1a1a1a !important;
    border: 4px solid #000000 !important;
    margin: 15px 0 !important;
}
table.dataTable thead th {
    background-color: #2e2e2e !important;
    color: #ffff55 !important;
    border-bottom: 4px solid #000000 !important;
    text-shadow: 1px 1px 0px #000000 !important;
    font-family: 'Silkscreen', monospace !important;
    padding: 8px 10px !important;
}
table.dataTable tbody tr {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
}
table.dataTable tbody tr.odd {
    background-color: #151515 !important;
}
table.dataTable tbody tr.even {
    background-color: #1a1a1a !important;
}
table.dataTable tbody tr:hover {
    background-color: #2e2e2e !important;
}
table.dataTable tbody td {
    border-bottom: 2px solid #3c3c3c !important;
    padding: 8px 10px !important;
    color: #ffffff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
    background: #8c8c8c !important;
    border: 3px solid #000000 !important;
    box-shadow: inset -2px -2px 0px #5c5c5c, inset 2px 2px 0px #dbdbdb !important;
    color: #ffffff !important;
    font-family: 'Silkscreen', monospace !important;
    font-size: 11px !important;
    padding: 4px 8px !important;
    border-radius: 0px !important;
    margin: 2px !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: #5c5c5c !important;
    box-shadow: inset -2px -2px 0px #3c3c3c, inset 2px 2px 0px #8c8c8c !important;
    color: #ffff55 !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: #5c5c5c !important;
    box-shadow: inset -2px -2px 0px #3c3c3c, inset 2px 2px 0px #8c8c8c !important;
    color: #ffff55 !important;
}

/* Modal styles overrides for clean popup display */
.modal-overlay {
    background-color: rgba(0, 0, 0, 0.75) !important;
    backdrop-filter: blur(4px) !important;
}
.mc-modal-close-btn {
    color: #ff5555 !important;
    font-family: 'Silkscreen', monospace !important;
    font-size: 18px !important;
    cursor: pointer !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    text-shadow: 1px 1px 0px #000 !important;
}
.mc-modal-close-btn:hover {
    color: #ffff55 !important;
}