/* ============================================
   RESPONSIVE.CSS - Extra mobile helpers (no sidebar conflicts)
   ============================================ */

html { font-size: 16px; -webkit-tap-highlight-color: transparent; }
@media (max-width: 768px) { html { font-size: 14px; } }

/* ------ Grid helpers (these work alongside Bootstrap) ------ */
.row { display: flex; flex-wrap: wrap; margin: 0 -0.5rem; }
[class*="col-"] { padding: 0 0.5rem; margin-bottom: 1rem; }
.col-12 { flex: 0 0 100%; max-width: 100%; }
.col-6 { flex: 0 0 50%; max-width: 50%; }
@media (min-width: 768px) {
    .col-md-12 { flex: 0 0 100%; max-width: 100%; }
    .col-md-6 { flex: 0 0 50%; max-width: 50%; }
    .col-md-4 { flex: 0 0 33.333%; max-width: 33.333%; }
    .col-md-3 { flex: 0 0 25%; max-width: 25%; }
}
@media (min-width: 992px) {
    .col-lg-12 { flex: 0 0 100%; max-width: 100%; }
    .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
    .col-lg-4 { flex: 0 0 33.333%; max-width: 33.333%; }
    .col-lg-3 { flex: 0 0 25%; max-width: 25%; }
}

/* ------ Responsive tables ------ */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.table { min-width: 500px; }

/* ------ Typography adjustments on small screens ------ */
@media (max-width: 768px) {
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }
    h4 { font-size: 1.125rem; }
    .card-header { padding: 0.75rem; }
    .card-body { padding: 0.75rem; }
}

/* ------ Utility classes (keep these) ------ */
.text-center { text-align: center; }
.d-none { display: none; }
.d-block { display: block; }
.d-flex { display: flex; }
.w-100 { width: 100%; }
.mt-3 { margin-top: 1rem; }
.mb-3 { margin-bottom: 1rem; }
.p-3 { padding: 1rem; }

@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
.slide-in-right {
    animation: slideInRight 0.3s ease;
}