﻿/* ===========================================
   Print Styles — Bootstrap 3 Mobile Behavior
   Compatible with Bootstrap 5
   =========================================== */
@media print {
    /* Force full width like mobile */
    html, body {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        font-size: 14px !important; /* Bootstrap 3 default print size */
        line-height: 1.4 !important;
        background: #fff !important;
        color: #000 !important;
    }

    /* Make containers full-width */
    .container,
    .container-fluid {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Make all Bootstrap columns stack vertically like mobile */
    [class*="col-"] {
        float: none !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Force rows to behave like block containers */
    .row {
        display: block !important;
        margin: 0 !important;
    }

    /* Fix flex-based layouts in Bootstrap 5 */
    .d-flex,
    .row,
    [class*="d-"] {
        display: block !important;
    }

    /* Reduce padding to mimic mobile feel */
    section, article, div, header, footer {
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Hide elements that are desktop-only */
    .d-lg-block,
    .d-xl-block,
    .d-md-block {
        display: none !important;
    }

    /* Always show mobile-only elements */
    .d-lg-none,
    .d-xl-none,
    .d-md-none {
        display: block !important;
    }

    /* Reset tables for mobile-style printing */
    table {
        width: 100% !important;
        max-width: 100% !important;
        border-collapse: collapse !important;
    }

        table th,
        table td {
            font-size: 13px !important;
            padding: 6px !important;
            word-break: break-word !important;
        }

    /* Prevent cut-off content */
    img,
    svg,
    video {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Hide unnecessary navigation, footers, or ads */
    nav,
    .navbar,
    .site-footer,
    .ad-banner,
    .no-print {
        display: none !important;
    }

    /* Make sure print is always single column */
    main, .Content, #main, #content {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
    }

    .btn-sm, .btn-group-sm > .btn {
        margin-top: 10px;
    }

    .accordion-body p {
        padding: var(--bs-accordion-body-padding-y) var(--bs-accordion-body-padding-x);
        padding-left: 40px; 
    }

    ul li i, 
    ul li span{
        display: inline !important;
/*        vertical-align:middle !important;
        margin-right: 4px;*/
        float: none;
    }

    ul li.list-group-item {
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
    }
}
