/* =====================================================================
   ScrubUp Admin — shared mobile responsiveness
   ---------------------------------------------------------------------
   Loaded once in templates/core/base.html; reports_base.html extends
   base.html, so every page inherits this file.

   Everything is scoped to phones (<= 767px, i.e. below Tailwind `md`).
   Desktop (>= 768px) is completely untouched — the media query never
   fires there, so no rule here can change the desktop layout.

   Card transform is opt-in per table: add `class="rtable"` to the
   <table>, then a `data-label="Column name"` on each <td>. Cells that
   are already vertical mini-layouts (avatar + name, driver block) get
   `class="rtable-full"` instead of a data-label so their internal
   layout is preserved.
   ===================================================================== */

@media (max-width: 767px) {

  /* ---------- Table -> stacked cards ---------- */
  table.rtable,
  table.rtable tbody {
    display: block !important;
    width: 100%;
    min-width: 0 !important;   /* neutralize min-w-max / min-w-full */
  }

  /* Hide the header row — labels come from data-label instead */
  table.rtable thead {
    display: none !important;
  }

  /* Each row becomes a card */
  table.rtable tr {
    display: block !important;
    margin: 0 0 0.75rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 0.25rem 0.875rem;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  }

  /* Each cell becomes a label : value line */
  table.rtable td {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0 !important;      /* neutralize px-6 py-4 */
    white-space: normal !important;     /* neutralize whitespace-nowrap */
    border: none;
    border-bottom: 1px solid #f3f4f6;
    text-align: right;
    min-height: 0;
  }

  table.rtable td:last-child {
    border-bottom: none;
  }

  /* Left-hand label from the column name */
  table.rtable td[data-label]::before {
    content: attr(data-label);
    flex: 0 0 38%;
    text-align: left;
    font-weight: 600;
    font-size: 0.7rem;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #6b7280;
    white-space: normal;
  }

  /* Cells that are themselves a mini-layout render full width, no label */
  table.rtable td.rtable-full {
    display: block !important;
    text-align: left;
  }
  table.rtable td.rtable-full[data-label]::before {
    display: block;
    margin-bottom: 0.35rem;
    flex: none;
  }

  /* Respect explicit hiding (Tailwind `.hidden`) — e.g. the bookings
     column-visibility toggle, or a table that has a separate mobile block.
     Without this, the display:flex above would resurrect hidden cells. */
  table.rtable.hidden { display: none !important; }
  table.rtable td.hidden,
  table.rtable tr.hidden { display: none !important; }

  /* Skeleton / empty-state / error rows that span all columns */
  table.rtable td[colspan] {
    display: block !important;
    text-align: center;
  }
  table.rtable td[colspan]::before {
    content: none !important;
  }

  /* Keep media inside cards from overflowing */
  table.rtable td img {
    max-width: 100%;
    height: auto;
  }

  /* Bigger tap targets for action buttons grouped in a card cell.
     Opt-in: add class="rtable-actions" to the <td> holding the buttons. */
  table.rtable td.rtable-actions {
    display: block !important;
    text-align: left;
  }
  table.rtable td.rtable-actions[data-label]::before {
    display: block;
    margin-bottom: 0.35rem;
    flex: none;
  }
  table.rtable td.rtable-actions button,
  table.rtable td.rtable-actions a {
    min-height: 40px;
  }

  /* ---------- Filter / toolbar stacking (opt-in: class="filter-bar") ---------- */
  .filter-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.5rem !important;
  }
  .filter-bar > * {
    width: 100% !important;
    max-width: none !important;
  }

  /* ---------- Modals: clamp panels to the viewport ---------- */
  /* Panels carry an sm:max-w-* class that is inactive below sm, leaving
     them content-width. Force them near-full-width (the centering
     wrapper keeps a small side margin via its px-4). */
  [role="dialog"] [class*="sm:max-w"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ---------- Horizontal-scroll affordance (opt-in: class="scroll-hint") ---------- */
  .scroll-hint {
    position: relative;
  }
  .scroll-hint::after {
    content: "\2192 scroll";
    position: absolute;
    top: 0.25rem;
    right: 0.5rem;
    font-size: 0.65rem;
    font-weight: 600;
    color: #9ca3af;
    pointer-events: none;
  }
}

/* =====================================================================
   Bookings page — phones (scoped via .bookings-cards). Each row is a
   collapsed 2-line summary card (.bk-summary); tapping it opens a
   bottom-sheet detail (#bookingSheet, built in JS from the row). The
   full detail cells are never shown inline on phones. Desktop table is
   untouched (.bk-summary is display:none at >=768px).
   ===================================================================== */
.bk-summary { display: none; }

@media (max-width: 767px) {
  table.bookings-cards tr {
    display: block;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    margin: 0 0 0.6rem;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    padding: 0;
  }
  table.bookings-cards td.bk-summary {
    display: block !important;
    padding: 0.7rem 0.85rem !important;
    cursor: pointer;
    border: 0;
    white-space: normal !important;
  }
  table.bookings-cards td.bk-summary::before { content: none !important; }
  /* Detail cells never render inline on phones — the bottom sheet shows them */
  table.bookings-cards tr > td:not(.bk-summary):not([colspan]) { display: none !important; }

  .bk-l1 { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
  .bk-name {
    font-weight: 600; font-size: 0.95rem; color: #111827;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
  }
  .bk-l2 { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.2rem; }
  .bk-meta {
    font-size: 0.8rem; color: #6b7280;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
  }
  .bk-chevron { flex-shrink: 0; color: #9ca3af; }
  .bk-summary .bk-badge { flex-shrink: 0; }
}

/* Bottom-sheet body: compact 2-column info-tile grid (#bookingSheet is md:hidden) */
#bookingSheet #sheetBody { padding: 0.85rem 1rem; }
#bookingSheet .sheet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem; }
#bookingSheet .sheet-tile { background: #f9fafb; border: 1px solid #eef0f2; border-radius: 0.65rem; padding: 0.55rem 0.7rem; min-width: 0; }
#bookingSheet .sheet-tile.tile-full { grid-column: 1 / -1; }
#bookingSheet .sheet-tlabel { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #9ca3af; margin-bottom: 0.2rem; }
#bookingSheet .sheet-tval { font-size: 0.85rem; color: #111827; min-width: 0; word-break: break-word; }
#bookingSheet .sheet-tval .flex { justify-content: flex-start; }
#bookingSheet .sheet-tval > .flex.flex-col { align-items: flex-start; }

/* Bottom-sheet footer: uniform icon action tiles (short labels, de-emphasized Cancel) */
#bookingSheet .sheet-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
#bookingSheet .sheet-actions > button,
#bookingSheet .sheet-actions > a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.28rem;
  min-height: 62px; padding: 0.45rem 0.25rem;
  border: 1px solid #e5e7eb; border-radius: 0.7rem; background: #fff;
  font-size: 0.7rem; font-weight: 600; color: #374151; text-align: center; line-height: 1.1;
}
#bookingSheet .sheet-actions > * svg { width: 20px; height: 20px; margin: 0; flex-shrink: 0; }
#bookingSheet .sheet-actions .act-success { color: #059669; }
#bookingSheet .sheet-actions .act-primary { color: #4f46e5; }
#bookingSheet .sheet-actions .act-danger { color: #dc2626; border-color: #fecaca; background: #fef2f2; }

/* Header customer block must truncate, never push the status/close off-screen */
#bookingSheet #sheetCustomer { overflow: hidden; }
#bookingSheet #sheetCustomer .ml-4,
#bookingSheet #sheetCustomer .ml-3 { min-width: 0; }
#bookingSheet #sheetCustomer .ml-4 > div,
#bookingSheet #sheetCustomer .ml-3 > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }