/**
 * Compact View CSS - Reduces overall scale to show more content on screen
 * This file overrides the default styles to create a more condensed layout
 */

/* ===== BASE FONT SIZE REDUCTION ===== */
body {
    font-size: 13px !important; /* Reduced from 16px */
    line-height: 1.4 !important; /* Reduced from 1.6 */
}

/* ===== TYPOGRAPHY SCALING ===== */
h1, .h1 {
    font-size: 2.25rem !important; /* Reduced from 3.5rem */
    margin-bottom: 0.75rem !important;
}

h2, .h2 {
    font-size: 1.75rem !important; /* Reduced from 2.5rem */
    margin-bottom: 0.65rem !important;
}

h3, .h3 {
    font-size: 1.35rem !important; /* Reduced from 1.75rem */
    margin-bottom: 0.5rem !important;
}

h4, .h4 {
    font-size: 1.1rem !important; /* Reduced from 1.25rem */
    margin-bottom: 0.4rem !important;
}

h5, .h5 {
    font-size: 0.95rem !important; /* Reduced from 1rem */
    margin-bottom: 0.35rem !important;
}

h6, .h6 {
    font-size: 0.85rem !important; /* Reduced from 0.875rem */
    margin-bottom: 0.3rem !important;
}

/* ===== SPACING REDUCTION ===== */
:root {
    /* Reduce all spacing variables */
    --spacing-xs: 0.35rem !important; /* Was 0.5rem */
    --spacing-sm: 0.65rem !important; /* Was 1rem */
    --spacing-md: 1rem !important; /* Was 1.5rem */
    --spacing-lg: 1.35rem !important; /* Was 2rem */
    --spacing-xl: 2rem !important; /* Was 3rem */
    
    /* Reduce dynamic spacing */
    --dynamic-margin: clamp(0.35rem, 1.5vw, 1.35rem) !important;
    --dynamic-padding: clamp(0.5rem, 2vw, 2rem) !important;
    --dynamic-gap: clamp(0.35rem, 1vw, 1rem) !important;
    
    /* Increase container widths to use more screen space */
    --container-sm: min(98vw, 700px) !important;
    --container-md: min(95vw, 1100px) !important;
    --container-lg: min(95vw, 1900px) !important;
    --container-xl: min(98vw, 2200px) !important;
}

/* ===== CONTAINER ADJUSTMENTS ===== */
.smart-container {
    width: var(--container-lg) !important;
    padding: 0 var(--dynamic-margin) !important;
    max-width: 98% !important;
}

.smart-container.sm {
    width: var(--container-sm) !important;
}

.smart-container.md {
    width: var(--container-md) !important;
}

.smart-container.xl {
    width: var(--container-xl) !important;
}

/* ===== NAVIGATION COMPACT ===== */
.navbar {
    padding: 0.5rem 0 !important; /* Reduced vertical padding */
}

.nav-container {
    padding: 0 1rem !important;
    max-width: 98% !important;
}

.nav-logo,
.nav-halloween-logo {
    height: 50px !important; /* Reduced from larger sizes */
}

.nav-link-modern {
    padding: 0.4rem 0.75rem !important;
    font-size: 0.8rem !important;
}

.nav-link-modern i {
    font-size: 0.95rem !important;
}

/* Balance display compact */
.balance-inline-group {
    gap: 0.75rem !important;
}

.balance-item {
    padding: 0.35rem 0.75rem !important;
    font-size: 0.8rem !important;
}

/* ===== MAIN CONTENT AREA ===== */
.main-content {
    padding: 1.5rem 1rem !important; /* Reduced from 3rem 2rem */
    max-width: 98% !important;
}

/* ===== GRID SYSTEM ===== */
.auto-fit-grid {
    gap: 0.75rem !important; /* Reduced gap */
    padding: 1.25rem !important; /* Reduced padding */
}

/* Show more columns on large screens */
@media (min-width: 1400px) {
    .auto-fit-grid {
        grid-template-columns: repeat(5, 1fr) !important; /* 5 columns instead of 4 */
    }
}

@media (min-width: 1800px) {
    .auto-fit-grid {
        grid-template-columns: repeat(6, 1fr) !important; /* 6 columns on very large screens */
    }
}

/* ===== CARD SYSTEM ===== */
.card {
    padding: 0.85rem !important; /* Reduced from larger padding */
    margin-bottom: 0.85rem !important;
}

.card-body {
    padding: 0.85rem !important;
}

.card-header {
    padding: 0.65rem 0.85rem !important;
    font-size: 1rem !important;
}

/* ===== ITEM CARDS ===== */
.item-card {
    padding: 0.75rem !important;
}

.item-card .item-title,
.item-card h3,
.item-card h4 {
    font-size: 0.9rem !important;
    margin-bottom: 0.4rem !important;
}

.item-card .item-price,
.item-card .price {
    font-size: 0.95rem !important;
}

.item-card img {
    max-height: 120px !important; /* Reduced image size */
}

/* ===== BUTTONS ===== */
.btn {
    padding: 0.45rem 1rem !important;
    font-size: 0.85rem !important;
}

.btn-sm {
    padding: 0.3rem 0.65rem !important;
    font-size: 0.75rem !important;
}

.btn-lg {
    padding: 0.65rem 1.5rem !important;
    font-size: 1rem !important;
}

/* ===== FORMS ===== */
.form-control,
.form-select {
    padding: 0.45rem 0.75rem !important;
    font-size: 0.85rem !important;
}

.form-label {
    font-size: 0.85rem !important;
    margin-bottom: 0.35rem !important;
}

/* ===== MODALS ===== */
.modal-header {
    padding: 0.85rem 1rem !important;
}

.modal-body {
    padding: 1rem !important;
}

.modal-footer {
    padding: 0.75rem 1rem !important;
}

.modal-title {
    font-size: 1.35rem !important;
}

/* ===== TABLES ===== */
.table {
    font-size: 0.85rem !important;
}

.table th,
.table td {
    padding: 0.5rem !important;
}

/* ===== HERO SECTION ===== */
.hero-content {
    padding: 1.5rem 1rem !important;
}

.hero-title {
    font-size: 2.5rem !important;
    margin-bottom: 0.75rem !important;
}

.hero-subtitle {
    font-size: 1.1rem !important;
}

/* ===== SERVER STATUS ===== */
.server-status-compact {
    padding: 0.4rem 0.75rem !important;
    font-size: 0.75rem !important;
}

/* ===== STATISTICS CARDS ===== */
.stat-card {
    padding: 0.85rem !important;
}

.stat-value {
    font-size: 1.5rem !important;
}

.stat-label {
    font-size: 0.75rem !important;
}

/* ===== CASINO ELEMENTS ===== */
.casino-container {
    padding: 1rem 1.5rem !important;
}

.casino-header {
    margin-bottom: 1rem !important;
    padding: 0.75rem !important;
}

/* ===== SHOP ITEMS ===== */
.shop-items-grid,
.items-grid {
    gap: 0.75rem !important;
    padding: 1rem !important;
}

/* ===== RESPONSIVE ADJUSTMENTS ===== */
@media (min-width: 1025px) {
    :root {
        --dynamic-margin: 1.35rem !important;
        --dynamic-padding: 2rem !important;
        --dynamic-gap: 1rem !important;
    }
    
    .smart-container {
        width: 95vw !important;
        max-width: 1900px !important;
        padding: 0 1.35rem !important;
    }
    
    .nav-container {
        padding: 0 1.35rem !important;
        max-width: 1900px !important;
    }
    
    .main-content {
        padding: 2rem 1.35rem !important;
        max-width: 1900px !important;
    }
}

/* ===== UTILITY CLASSES ===== */
.compact-spacing {
    margin: 0.5rem 0 !important;
    padding: 0.5rem !important;
}

.compact-text {
    font-size: 0.85rem !important;
    line-height: 1.3 !important;
}

/* ===== REDUCE VERTICAL SPACING ===== */
p {
    margin-bottom: 0.65rem !important;
}

.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 0.75rem !important; }
.mb-4 { margin-bottom: 1rem !important; }
.mb-5 { margin-bottom: 1.5rem !important; }

.mt-1 { margin-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 0.75rem !important; }
.mt-4 { margin-top: 1rem !important; }
.mt-5 { margin-top: 1.5rem !important; }

.py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
.py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.py-3 { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; }
.py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.py-5 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }