/* ================================================================
   YUOOM ADMIN — SHARED RESPONSIVE CSS
   File: public/assets/css/admin-responsive.css
   Covers: all admin + super_admin pages on mobile/tablet
   ================================================================ */

/* ── Base: prevent horizontal scroll on all screens ──────────── */
body          { overflow-x: hidden !important; }
.page-content { overflow-x: hidden; }
.page-content-wrapper { max-width: 100%; box-sizing: border-box; }
*,*::before,*::after { box-sizing: border-box; }

/* ── Tables: always scrollable horizontally ───────────────────── */
.table-responsive {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}
.table-responsive table { min-width: 600px; }

/* ── Cards: no overflow on any screen ────────────────────────── */
.card { overflow: hidden; }

/* ── Filter bars: wrap nicely ─────────────────────────────────── */
.filter-bar { flex-wrap: wrap !important; gap: 10px !important; }

/* ── Banners: wrap buttons on small screens ───────────────────── */
.banner { flex-wrap: wrap !important; }

/* ================================================================
   TABLET  576px – 991px
   ================================================================ */
@media (max-width: 991.98px) {

  /* Page wrapper padding */
  .page-content-wrapper { padding: 16px !important; }

  /* Stat cards */
  .stat-card  { padding: 16px 18px !important; }
  .stat-icon  { width: 44px !important; height: 44px !important; font-size: 18px !important; }
  .stat-val   { font-size: 20px !important; }
  .stat-pill  { padding: 14px 16px !important; }
  .stat-pill-val { font-size: 20px !important; }

  /* Hero cards (super admin) */
  .hero-card  { padding: 20px !important; border-radius: 16px !important; }
  .hero-value { font-size: 28px !important; }

  /* Section headers */
  .d-flex.justify-content-between {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  /* Quick action tiles */
  .qa-tile    { padding: 14px 10px !important; }
  .qa-tile .qa-lbl { font-size: 11px !important; }

  /* Booking show page */
  .ref-hero   { padding: 20px 22px !important; }
  .ref-hero .ref { font-size: 22px !important; }
  .sec-card   { padding: 18px 20px !important; }

  /* Info rows on booking show */
  .info-lbl   { min-width: 110px !important; }

  /* Calendar grid */
  .cal-cell   { min-height: 48px !important; }
  .cal-dots   { display: none; }

  /* Leads funnel */
  .funnel-stage { padding: 8px 12px !important; font-size: 12px !important; }
  .funnel-stage .fs-num { font-size: 15px !important; }
}

/* ================================================================
   MOBILE  ≤ 575px
   ================================================================ */
@media (max-width: 575.98px) {

  /* Page wrapper */
  .page-content-wrapper { padding: 10px !important; }

  /* Page header: stack vertically */
  .d-flex.justify-content-between.align-items-center {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  .d-flex.justify-content-between.align-items-center .d-flex.gap-2 {
    width: 100%;
  }
  .d-flex.justify-content-between.align-items-center .btn {
    width: 100%;
    text-align: center;
  }

  /* Cards */
  .card-body   { padding: 14px !important; }
  .card-header { padding: 12px 14px !important; }

  /* Stat cards */
  .stat-card   { padding: 14px 16px !important; flex-direction: row; }
  .stat-icon   { width: 38px !important; height: 38px !important; font-size: 16px !important; border-radius: 10px !important; }
  .stat-val    { font-size: 18px !important; }
  .stat-lbl    { font-size: 11px !important; }

  /* Stat pills (super admin) */
  .stat-pill   { padding: 12px 14px !important; border-radius: 10px !important; }
  .stat-pill-val { font-size: 18px !important; }
  .stat-pill-icon { width: 36px !important; height: 36px !important; font-size: 14px !important; border-radius: 10px !important; }
  .stat-pill-lbl  { font-size: 10px !important; }

  /* Hero cards */
  .hero-card   { padding: 16px !important; border-radius: 14px !important; }
  .hero-value  { font-size: 24px !important; letter-spacing: -.5px !important; }
  .hero-label  { font-size: 12px !important; }
  .hero-icon   { font-size: 36px !important; right: 12px !important; }
  .hero-sub    { font-size: 11px !important; }

  /* Tables */
  .table td, .table th { font-size: 12px !important; padding: 8px 10px !important; white-space: nowrap; }
  .tbl-th { font-size: 10px !important; }

  /* Quick actions */
  .qa-tile     { padding: 12px 6px !important; border-radius: 10px !important; }
  .qa-tile .qa-icon { width: 36px !important; height: 36px !important; font-size: 16px !important; margin-bottom: 6px !important; }
  .qa-tile .qa-lbl  { font-size: 10px !important; }

  /* Booking show page */
  .ref-hero    { padding: 16px !important; border-radius: 12px !important; margin-bottom: 14px !important; }
  .ref-hero .ref { font-size: 18px !important; letter-spacing: .5px !important; }
  .ref-hero .meta { font-size: 12px !important; }
  .sec-card    { padding: 14px !important; border-radius: 12px !important; }
  .sec-title   { font-size: 12px !important; }
  .info-row    { flex-direction: column !important; gap: 2px !important; }
  .info-lbl    { min-width: unset !important; }
  .info-val    { text-align: left !important; }
  .pay-bar     { padding: 14px 16px !important; }
  .qa-btn      { padding: 11px 14px !important; font-size: 12px !important; }

  /* Leads page */
  .stat-card.sc-val { font-size: 22px !important; }
  .filter-bar  { padding: 12px !important; }
  .filter-bar .form-control,
  .filter-bar .form-select { width: 100% !important; }
  .status-tabs { gap: 4px !important; }
  .status-tab  { padding: 5px 10px !important; font-size: 11px !important; }

  /* Calendar */
  .cal-cell    { min-height: 36px !important; padding: 3px !important; }
  .cal-date    { font-size: 10px !important; }
  .cal-dots    { display: none !important; }
  .cal-dayname { font-size: 9px !important; }

  /* Leads funnel */
  .funnel-stage { padding: 7px 10px !important; font-size: 11px !important; }
  .funnel-stage .fs-num { font-size: 14px !important; }

  /* Alert banners */
  .banner      { padding: 10px 12px !important; font-size: 12px !important; }
  .banner .btn { font-size: 11px !important; padding: 3px 10px !important; }

  /* Bugs page */
  .bug-card    { padding: 14px !important; }

  /* Timeline (booking show) */
  .timeline-item { gap: 8px !important; }
  .tl-dot      { width: 26px !important; height: 26px !important; font-size: 12px !important; }
  .tl-text     { font-size: 12px !important; }

  /* Destination bar chart */
  .dest-name   { width: 70px !important; font-size: 11px !important; }
  .dest-cnt    { font-size: 11px !important; }

  /* Source pills */
  .source-pill { font-size: 11px !important; padding: 4px 8px !important; }

  /* B2B / Reviews / Users tables */
  .mavatar     { width: 28px !important; height: 28px !important; font-size: 11px !important; }

  /* Itinerary */
  .itin-day-header { padding: 10px 12px !important; font-size: 13px !important; }

  /* Arrivals / departure cards */
  .arr-card    { padding: 10px 12px !important; }
  .arr-date-box { padding: 6px 8px !important; }

  /* Follow-up rows */
  .fu-row      { padding: 10px 12px !important; font-size: 12px !important; }

  /* Hide non-essential columns on mobile */
  .hide-mobile { display: none !important; }

  /* Make form inputs full width */
  .form-control, .form-select { width: 100% !important; }

  /* Pixels page */
  .pixel-card  { padding: 14px !important; }

  /* Section titles */
  .sec-hd      { font-size: 13px !important; }
  h4.fw-bold   { font-size: 17px !important; }
  h5.fw-bold   { font-size: 15px !important; }
}

/* ================================================================
   VERY SMALL  ≤ 380px  (small Android phones)
   ================================================================ */
@media (max-width: 380px) {
  .page-content-wrapper { padding: 8px !important; }
  .hero-value  { font-size: 20px !important; }
  .stat-pill-val { font-size: 16px !important; }
  .qa-tile .qa-icon { width: 30px !important; height: 30px !important; font-size: 13px !important; }
  .qa-tile .qa-lbl  { font-size: 9px !important; }
  .table td, .table th { font-size: 11px !important; padding: 6px 8px !important; }
  .card-body   { padding: 10px !important; }
}

/* ================================================================
   APEXCHARTS — always responsive
   ================================================================ */
.apexcharts-canvas { max-width: 100% !important; }
#revenue-chart, #staff-chart { width: 100% !important; }