/* Global CSS untuk semua halaman - Container dan Layout Styles */

/* Bootstrap container override for comfortable reading width */
.main-content .container,
.t-Body-main .container {
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 1rem;
    padding-right: 1rem;
    width: 100%;
    position: relative;
    left: 0 !important;
}

/* Responsive max-widths for comfortable reading */
@media (min-width: 576px) {
    .main-content .container,
    .t-Body-main .container {
        max-width: 540px;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

@media (min-width: 768px) {
    .main-content .container,
    .t-Body-main .container {
        max-width: 720px;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

@media (min-width: 992px) {
    .main-content .container,
    .t-Body-main .container {
        max-width: 960px;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

@media (min-width: 1200px) {
    .main-content .container,
    .t-Body-main .container {
        max-width: 1140px;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

@media (min-width: 1400px) {
    .main-content .container,
    .t-Body-main .container {
        max-width: 1320px;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* Ensure section containers have proper width and centering */
.main-content .section,
.t-Body-main .section {
    margin-left: auto !important;
    margin-right: auto !important;
    position: relative;
    left: 0 !important;
}

/* Specific styling for section containers */
.main-content .section.container,
.t-Body-main .section.container {
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Hero section container uses same max-width as other containers */
.main-content .hero-section .container,
.t-Body-main .hero-section .container {
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Section spacing for better readability */
.section {
    margin-bottom: 2rem;
}

.section:last-child {
    margin-bottom: 0;
}

/* Global responsiveness helpers */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

img, svg, video, canvas {
    max-width: 100%;
    height: auto;
}

/* Prevent long strings from causing horizontal scroll */
pre, code {
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* Make wide tables scroll only inside wrapper */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Small-screen modal spacing */
@media (max-width: 575.98px) {
    .modal-dialog {
        margin: 0.75rem;
    }
    .btn, .form-control, .form-select {
        max-width: 100%;
    }
}