/*
 * Cross-cutting responsive utilities. Breakpoints that belong to one
 * specific component (sidebar collapse, table-to-cards) live next to that
 * component's rules instead of here - this file is only for generic,
 * reusable show/hide helpers used across many pages.
 *
 * Reference breakpoints this system targets: 320, 375, 390, 414 (phones),
 * 768 (tablet), 1024 (small laptop), 1440 (desktop).
 */

@media (max-width: 767px) {
    .hide-mobile { display: none !important; }
}

@media (min-width: 768px) {
    .show-mobile-only { display: none !important; }
}

@media (max-width: 1023px) {
    .hide-tablet-down { display: none !important; }
}

/* Prevents the page body from ever scrolling horizontally when a wide
   table/chart/diagram is dropped into a narrow viewport without its own
   overflow wrapper. */
@media (max-width: 480px) {
    .stat-card .stat-value {
        font-size: 1.1rem;
        word-break: break-word;
    }
    /* At 2-per-row (col-6) on a 320-375px phone, the 44px icon + 1rem gap
       leaves too little room for a money value like "Rs.1,25,000.00" to
       read as a single line - shrink both so the value has space. */
    .stat-card .d-flex.align-items-center.gap-3 {
        gap: .6rem !important;
    }
    .stat-card .stat-icon {
        width: 34px;
        height: 34px;
        font-size: .85rem;
    }
    .stat-card .stat-label {
        font-size: .72rem;
    }
}