/* =============================================================================
   Main Compiled CSS for BOD.mn
   Mobile-First Responsive Design
   Based on wallet_topup.html patterns and responsive analysis
   ============================================================================= */

/* Import CSS Variables First */
@import url('variables.css');

/* Import Base Styles */
@import url('base/reset.css');
@import url('base/typography.css');

/* Import Components */
@import url('components/buttons.css');
@import url('components/cards.css');
@import url('components/forms.css');
@import url('components/tables.css');
@import url('components/navigation.css');

/* Import Layout */
@import url('layout/grid.css');
@import url('layout/header.css');
@import url('layout/sidebar.css');
@import url('layout/content.css');

/* Import Utilities */
@import url('utilities/spacing.css');
@import url('utilities/responsive.css');

/* =============================================================================
   Additional Global Styles
   ============================================================================= */

/* Image Containers */
.img-container {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.img-container img {
    width: 100%;
    height: auto;
}

/* Responsive Image with srcset Support */
img[srcset] {
    width: 100%;
    height: auto;
}

/* Account Number Display - Based on wallet_topup.html */
span[style*="monospace"] {
    font-family: monospace;
    font-size: 0.95em;
}

@media (max-width: 767.98px) {
    span[style*="monospace"] {
        font-size: 0.9em !important;
        word-break: break-all;
    }
}

/* Fix for Bootstrap 4 Responsive Columns */
@media (min-width: 768px) {
    .row > .col-md-5,
    .row > .col-md-7 {
        display: flex;
        flex-direction: column;
    }
}

/* Ensure Proper Width on All Devices */
@media (max-width: 575.98px) {
    .col-12 {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }
}

/* Print Styles */
@media print {
    .navbar,
    .sidebar,
    .breadcrumb,
    .btn,
    .pagination,
    .alert {
        display: none !important;
    }
    
    .card {
        border: 1px solid #000;
        page-break-inside: avoid;
    }
    
    .table {
        font-size: 0.75rem;
    }
}