/* ============================================================
   Gissah Vision — Mobile & Tablet responsive polish
   Loaded after tabler.min.css (overrides)
   ============================================================ */

/* ---------- Phone (<576px) ---------- */
@media (max-width: 575.98px) {
  html { font-size: 12.5px; }
  body  { font-size: 0.8rem; }

  .page-header h2.page-title,
  .page-title,
  h2.page-title {
    font-size: 1rem !important;
    line-height: 1.2;
  }
  .page-pretitle { font-size: 0.62rem; letter-spacing: .08em; }

  /* KPI tiles only (col-lg-3 = small tiles): 2 per row on phone. */
  .row.row-deck > [class*="col-lg-3"],
  .row.row-cards > [class*="col-lg-3"] {
    flex: 0 0 50%;
    max-width: 50%;
  }
  /* Larger cards: force full width on phone so tables/charts aren't cramped */
  .row.row-deck > [class*="col-lg-4"],
  .row.row-cards > [class*="col-lg-4"],
  .row.row-deck > [class*="col-lg-6"],
  .row.row-cards > [class*="col-lg-6"],
  .row.row-deck > [class*="col-lg-8"],
  .row.row-cards > [class*="col-lg-8"],
  .row.row-deck > [class*="col-md-6"],
  .row.row-cards > [class*="col-md-6"] {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .row.row-deck, .row.row-cards { --tblr-gutter-x: .75rem; --tblr-gutter-y: .75rem; }

  /* Cards */
  .card { border-radius: 10px; }
  .card-body  { padding: .65rem .75rem; }
  .card-header { padding: .55rem .75rem; min-height: auto; flex-wrap: wrap; row-gap: .35rem; }
  .card-title  { font-size: .75rem; }
  .subheader   { font-size: .56rem; }

  /* Card header actions (date-range, search, filters) wrap onto new line */
  .card-header .ms-auto,
  .card-header .card-actions { margin-left: 0 !important; width: 100%; }
  .card-header .form-control,
  .card-header .form-select,
  .card-header input[type="search"],
  .card-header input[type="text"] { max-width: 100%; width: 100%; }

  /* DataTables wrapper header (search + info) */
  .dataTables_wrapper .dataTables_filter,
  .dataTables_wrapper .dataTables_length { float: none; text-align: left; margin-bottom: .35rem; }
  .dataTables_wrapper .dataTables_filter input { width: 100%; margin-left: 0; }

  /* KPI headline numbers */
  .h1, h1, .display-5, .display-6 { font-size: 1.1rem !important; line-height: 1.15; }
  .h2, h2 { font-size: .95rem !important; }
  .h3, h3 { font-size: .85rem !important; }

  /* Charts compact */
  .chart-sm  { height: 60px !important; }
  .chart-lg  { height: 140px !important; }
  [id^="chart-"] { max-height: 180px; }

  /* Tables: allow horizontal scroll only for wide tables that really need it.
     Do NOT set a blanket min-width — progress-bar tables (Top Categories,
     Top Sold Items) must fit inside their card. */
  .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table { width: 100%; }
  .table.table-wide { min-width: 520px; }   /* opt-in for truly wide tables */
  .table td, .table th { padding: .35rem .45rem; font-size: .7rem; }
  .table td, .table th { white-space: normal; word-break: break-word; }
  /* Keep progress-bar cell from overflowing */
  .table .progress, .table .progress-xs, .table .progress-sm { max-width: 100%; }

  /* Top Products / Top Categories progress-bar tables:
     give text columns more room, shrink the bar column to ~50%,
     keep numeric Sales/Qty on a single line. */
  .table td .progress,
  .table td .progress-xs,
  .table td .progress-sm { width: 50%; max-width: 120px; }
  /* Numeric columns (sales / qty / percent) never wrap */
  .table td.text-end,
  .table td.text-right,
  .table td .text-success,
  .table td .text-danger,
  .table td .text-primary { white-space: nowrap; }
  /* The # rank column + last (bar) column stay narrow */
  .table th:first-child, .table td:first-child { width: 1%; white-space: nowrap; }

  .form-control, .form-select { font-size: .75rem; padding: .3rem .5rem; }
  .btn { font-size: .75rem; padding: .3rem .6rem; }

  .d-mobile-none { display: none !important; }

  .footer .row > * { flex: 0 0 100%; max-width: 100%; text-align: center; }
}

/* ---------- Small tablet (576–767) ---------- */
@media (min-width: 576px) and (max-width: 767.98px) {
  .row.row-deck > [class*="col-lg-3"],
  .row.row-cards > [class*="col-lg-3"] {
    flex: 0 0 50%;
    max-width: 50%;
  }
  [id^="chart-"] { max-height: 220px; }
}

/* ---------- Tablet (768–991) — 3 KPI per row ---------- */
@media (min-width: 768px) and (max-width: 991.98px) {
  .row.row-deck > [class*="col-sm-6"].col-lg-3,
  .row.row-cards > [class*="col-sm-6"].col-lg-3,
  .row.row-deck > .col-6.col-lg-3,
  .row.row-cards > .col-6.col-lg-3 {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
  }
  [id^="chart-"] { max-height: 240px; }
}

.page-body, .container-xl, .container-fluid { overflow-x: hidden; }

/* ---------- Card snapshot/share button ---------- */
.card[data-snap] { position: relative; }
.card-snap-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 5;
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  opacity: .75;
  transition: opacity .15s, background-color .15s;
}
.card-snap-btn:hover { opacity: 1; }
.card-snap-btn:focus { opacity: 1; }
@media (max-width: 575.98px) {
  .card-snap-btn { width: 28px; height: 28px; top: 4px; right: 4px; }
}