/* DevBooks mobile responsiveness */

/* ── Touch-friendly targets ─────────────────────────────────────── */
@media (max-width: 991.98px) {
    /* Larger touch targets for buttons and links */
    .btn-sm { min-height: 36px; min-width: 36px; padding: 0.35rem 0.6rem; }
    .table .btn-sm { min-height: 32px; min-width: 32px; }

    /* Better table row spacing for touch */
    .table-hover tbody tr { cursor: pointer; }
    .table th, .table td { padding: 0.5rem 0.4rem; }
}

/* ── Mobile phone (< 576px) ─────────────────────────────────────── */
@media (max-width: 575.98px) {
    /* KPI cards: 1 per row on phones */
    .row > .col-md-3.text-center { flex: 0 0 100%; max-width: 100%; }
    /* But allow 2-per-row for small summary cards */
    .row > .col-md-3:not(.text-center) { flex: 0 0 50%; max-width: 50%; }

    /* Tables: ensure horizontal scroll is visible */
    .table-responsive { -webkit-overflow-scrolling: touch; }
    .table-responsive::after {
        content: '← scroll →';
        display: block;
        text-align: center;
        font-size: 0.7rem;
        color: #adb5bd;
        padding: 0.25rem;
    }
    .table-responsive:has(table:not(.table-sm))::after { display: block; }

    /* Smaller table font on phones */
    .table { font-size: 0.8rem; }
    .table th, .table td { padding: 0.35rem 0.3rem; white-space: nowrap; }
    .table td a { white-space: normal; }

    /* Form labels smaller */
    .form-label { font-size: 0.85rem; margin-bottom: 0.2rem; }

    /* Card headers: stack buttons below title */
    .card-header.d-flex { flex-direction: column; align-items: flex-start !important; }
    .card-header.d-flex > strong { margin-bottom: 0.25rem; }

    /* Heading + action buttons: stack vertically */
    .d-flex.justify-content-between.align-items-center.mb-4 {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.5rem;
    }

    /* Input groups: prevent overflow */
    .input-group { flex-wrap: nowrap; }

    /* Badge text: smaller on mobile */
    .badge { font-size: 0.7rem; }

    /* Invoice detail: stack details + summary */
    .row.mb-4 > .col-md-6 { margin-bottom: 0.75rem; }

    /* Payment action buttons: stack vertically */
    .d-flex.gap-1.justify-content-center { flex-direction: column; align-items: center; }
    .d-flex.gap-1.justify-content-center .btn { width: 100%; }

    /* Banking sections: make buttons full width */
    .card-header .btn-sm { font-size: 0.8rem; }

    /* Dropdown menus: full width on mobile */
    .dropdown-menu { min-width: 200px; }

    /* DL (definition list) in detail pages */
    dl.row dt { font-size: 0.85rem; }
    dl.row dd { font-size: 0.85rem; margin-bottom: 0.3rem; }

    /* Quick pay form: reduce spacing */
    .col-md-2.mb-3, .col-md-3.mb-3, .col-md-4.mb-3 { margin-bottom: 0.4rem !important; }
}

/* ── Tablet (576-991px) ─────────────────────────────────────────── */
@media (min-width: 576px) and (max-width: 991.98px) {
    /* 2 columns for forms on tablet */
    .row > .col-md-2 { flex: 0 0 33.333%; max-width: 33.333%; }
    .row > .col-md-3 { flex: 0 0 50%; max-width: 50%; }
    .row > .col-md-4 { flex: 0 0 50%; max-width: 50%; }
}

/* ── Print styles ───────────────────────────────────────────────── */
@media print {
    .sidebar, .mobile-topbar, .btn, form, .card-header .d-flex { display: none !important; }
    .main-content { padding: 0 !important; }
    .card { border: none !important; box-shadow: none !important; }
}