@tailwind base;
@tailwind components;
@tailwind utilities;

/* Prevent horizontal scrolling and ensure full width */
html, body {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
}

/* Ensure all containers respect viewport width */
* {
    box-sizing: border-box;
}

/* Responsive utilities for full-width layouts */
@layer utilities {
    .container-full {
        width: 100%;
        max-width: 100%;
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    @media (min-width: 640px) {
        .container-full {
            padding-left: 1.5rem;
            padding-right: 1.5rem;
        }
    }
    
    @media (min-width: 1024px) {
        .container-full {
            padding-left: 2rem;
            padding-right: 2rem;
        }
    }
}

/* Ensure tables and wide content don't cause horizontal scroll */
table, .table-responsive {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    display: block;
}

@media (min-width: 768px) {
    table, .table-responsive {
        display: table;
    }
}

/* Prevent images and media from overflowing */
img, video, iframe, embed, object {
    max-width: 100%;
    height: auto;
}

/* Ensure flex containers don't overflow */
.flex, .flex-col, .flex-row {
    min-width: 0;
}

/* Grid containers should respect viewport */
.grid {
    width: 100%;
    max-width: 100%;
}