{{-- ClinicCore mobile-responsive overrides.
     Include via: @include('clinicCore::partials._mobile_responsive')
     Scoped to ClinicCore classes only — no global selectors. --}}
<style>
/* ─── Tables: allow horizontal scroll instead of clipping ─── */
.vc-table-box { overflow-x:auto !important; -webkit-overflow-scrolling:touch; }
.vc-table-box > div { min-width:0; }
.vc-table-box table.dataTable { min-width:600px; }

/* DataTables inside the module — wrap responsively */
.content #pets_table_wrapper,
.content #patient_contacts_table_wrapper,
.content #appointments_table_wrapper,
.content #prescriptions_table_wrapper,
.content #reports_table_wrapper,
.content #medicines_table_wrapper,
.content #vaccinations_table_wrapper,
.content #vaccine_types_table_wrapper,
.content #doctors_table_wrapper,
.content #departments_table_wrapper,
.content #medical_conditions_table_wrapper,
.content #imaging_table_wrapper,
.content #wellness_table_wrapper,
.content #birth_death_table_wrapper,
.content #consent_templates_table_wrapper,
.content #controlled_register_table_wrapper { overflow-x:auto; }

/* ─── Tablet (≤ 1024px) ─── */
@media (max-width: 1024px) {
    .ov-stat-grid { grid-template-columns:repeat(2,1fr) !important; }
    .pet-stats-row { grid-template-columns:repeat(auto-fit,minmax(120px,1fr)) !important; }
}

/* ─── Phone (≤ 768px) ─── */
@media (max-width: 768px) {
    /* Page headers stack */
    .vc-page-header { flex-direction:column; align-items:stretch !important; }
    .vc-page-title  { font-size:18px !important; }
    .vc-page-actions { justify-content:flex-start; }

    /* Filter rows: full-width fields */
    .filter-card { padding:12px !important; }
    .filter-row { gap:8px !important; }
    .filter-field { flex:1 1 100% !important; min-width:0 !important; }
    .search-wrap { min-width:0 !important; }

    /* Hero blocks (patients/show, appointments/show, patient-contacts/show) */
    .pet-hero, .apt-hero { padding:18px 16px 0 !important; border-radius:10px !important; }
    .pet-hero-top, .apt-hero-top { flex-direction:column; gap:12px !important; }
    .pet-hero-actions { margin-left:0 !important; align-self:stretch; flex-direction:row !important; flex-wrap:wrap; align-items:flex-start !important; }
    .pet-hero-actions .hero-btn { flex:1 1 auto; justify-content:center; }
    .pet-avatar, .pet-avatar img { width:72px !important; height:72px !important; font-size:28px !important; }
    .pet-hero-info h2 { font-size:18px !important; }
    .hero-bg-icon { font-size:120px !important; right:-30px !important; bottom:-30px !important; }
    .hero-status-bar { margin:14px -16px 0 !important; padding:8px 16px !important; gap:10px !important; }

    /* Appointment hero */
    .apt-hero-orb-1 { width:140px !important; height:140px !important; }
    .apt-hero-orb-2 { width:100px !important; height:100px !important; }
    .apt-hero-orb-3 { display:none !important; }
    .apt-type-icon { width:48px !important; height:48px !important; font-size:20px !important; }

    /* Overview / KPI grids */
    .ov-stat-grid  { grid-template-columns:repeat(2,1fr) !important; gap:8px !important; }
    .ov-stat .num  { font-size:20px !important; }
    .pet-stats-row { grid-template-columns:repeat(2,1fr) !important; }
    .pet-stat-box  { padding:10px 12px !important; }
    .pet-stat-num  { font-size:18px !important; }

    /* Card grids (patients & contacts) */
    #pet_card_grid, #owner_card_grid { grid-template-columns:1fr !important; gap:10px !important; }

    /* Treatment card layout */
    .vax-pcard { flex-wrap:wrap; }
    .vpc-due-badge { margin-left:0 !important; margin-top:4px; }

    /* Status / tab rows */
    .rx-tab-row { overflow-x:auto; flex-wrap:nowrap !important; -webkit-overflow-scrolling:touch; }
    .rx-tab { flex:0 0 auto; }

    /* Nav tabs scroll horizontally rather than wrap */
    .nav-tabs { white-space:nowrap; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; display:flex; flex-wrap:nowrap; }
    .nav-tabs > li { float:none; display:inline-block; flex:0 0 auto; }

    /* Detail rows — give value side breathing room */
    .detail-row .dv { max-width:60% !important; word-break:break-word; }

    /* Modal sizing */
    .modal-dialog.modal-lg, .modal-dialog.modal-xl { width:auto !important; margin:10px !important; max-width:none !important; }
    .modal-body { max-height:75vh; overflow-y:auto; }

    /* Buttons inside cells stay compact */
    .vc-act-btn, .btn-xs { padding:3px 6px !important; font-size:11px !important; }

    /* Calendar header / toolbar */
    .fc-toolbar { flex-wrap:wrap; gap:6px; }
    .fc-toolbar h2 { font-size:14px !important; }

    /* Calendar page: sidebar stacks above the main calendar */
    .cal-layout   { flex-direction:column !important; }
    .cal-sidebar  { width:100% !important; }
    .cal-main     { width:100% !important; }
}

/* ─── Small phone (≤ 480px) ─── */
@media (max-width: 480px) {
    .ov-stat-grid, .pet-stats-row { grid-template-columns:1fr !important; }
    .pet-hero-actions .hero-btn { flex:1 1 100%; }
    .view-toggle { align-self:flex-end; }
    .vc-page-title { font-size:16px !important; }
}
</style>
