/* ==========================================================================
   ACAT responsive + touch layer. Loaded last on every page.

   Principles (apply them to any new page or widget):
   1. Layout: rows that hold several controls wrap or stack below 768px;
      nothing may be wider than the screen (no sideways scrolling).
   2. Fixed controls (Back, theme toggle) never cover content: reserve space.
   3. Touch targets: on touch screens (pointer: coarse) every control is at
      least ~44px tall/wide, or has an invisible padding area that size.
   4. Gestures: no feature depends on hover, double-click or mouse events.
      Text you annotate does not zoom on double-tap (touch-action), and a
      single tap on a word does what a double-click does with a mouse
      (see touch-select.js).
   5. Hover effects that move or scale things only run on devices that can
      hover, so they don't get "stuck" after a tap.
   ========================================================================== */

/* ---------------------------------------------------------------- 4. gestures */
/* Annotatable text: taps register immediately, double-tap does not zoom.
   Pinch-zoom and scrolling keep working. */
#extract-text, #extract-title, .review-text-box, [id^="clause-text-"],
button, .btn, a, label, select, input, .form-check, .hl {
  touch-action: manipulation;
}

/* Floating "Use selection" button shown by touch-select.js for multi-word
   selections made with the phone's long-press handles. */
.touch-select-chip {
  position: fixed;
  left: 50%;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 2100;
  display: none;
  align-items: center;
  gap: 0.5rem;
  max-width: calc(100vw - 2rem);
  min-height: 48px;
  padding: 0.6rem 1.1rem;
  border: 0;
  border-radius: 999px;
  background: var(--accent-primary, var(--bs-primary, #10b981));
  color: var(--on-accent, #000);
  font-weight: 600;
  font-size: 0.95rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}
.touch-select-chip.show { display: inline-flex; }
.touch-select-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 55vw;
}
.touch-select-chip:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* ------------------------------------------------- 1+2. annotation editors */
@media (max-width: 767.98px) {
  /* Fixed Back button and theme toggle sit at the top: keep the header below them */
  body:has(.back-floating-btn) { padding-top: 4.25rem; }
  .back-floating-btn { top: 14px; left: 14px; }
  body:has(.back-floating-btn) .theme-toggle-btn { top: 12px; right: 14px; }

  /* Header: title on top, then timer / manage / progress wrapping underneath */
  .main-header > .d-flex.justify-content-between {
    flex-direction: column;
    align-items: stretch !important;
    gap: 0.75rem;
  }
  .main-header > .d-flex.justify-content-between > .d-flex {
    flex-wrap: wrap;
    justify-content: space-between !important;
    row-gap: 0.5rem;
  }
  .main-header > .d-flex.justify-content-between > .d-flex > .text-end { text-align: left !important; }
  .main-header h1 { font-size: 1.4rem; }

  /* ACSA / Clause annotation rows: category select on its own line,
     then sentiment, Implicit and delete underneath */
  .annotation-row, .clause-tag-row {
    flex-wrap: wrap;
    row-gap: 0.5rem;
  }
  .annotation-row > .flex-grow-1,
  .clause-tag-row > select {
    flex: 1 1 100% !important;
    min-width: 0;
  }
  .annotation-row > .d-flex, .clause-tag-row > .sentiment-group {
    flex-wrap: wrap;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .annotation-row > .btn-danger { margin-left: auto; }

  /* Previous / Next stay on one line but never overflow */
  .navigation-buttons { gap: 0.75rem; flex-wrap: wrap; }

  /* Less nested padding so the review text gets the width */
  .card-body-custom { padding: 1.25rem 1rem; }
  .review-text-box { padding: 1rem; }
}

/* ------------------------------------------------------------- 1. admin page */
@media (max-width: 767.98px) {
  .admin-stats { display: block !important; width: 100%; }
  .admin-stats-row { flex-wrap: wrap; row-gap: 0.75rem; justify-content: space-between; }
  .admin-stats-row > .vr { display: none; }

  #section-users-header { flex-wrap: wrap; row-gap: 0.75rem; }
  #section-users-header > h4 { flex: 1 1 100%; }
  .admin-dir-controls {
    margin-left: 0 !important;
    width: 100%;
    flex-wrap: wrap;
    row-gap: 0.5rem;
    column-gap: 1rem !important;
  }
  .admin-dir-search { flex: 1 1 100%; }
  .admin-dir-search .input-group { width: 100%; }
  .admin-dir-search .search-input-field { width: auto; flex: 1 1 auto; }
  .user-card-container { min-width: 0; }
}

/* ------------------------------------------------------- 3. touch targets */
@media (pointer: coarse) {
  .btn { min-height: 44px; }
  .btn-sm { min-height: 40px; }
  /* Icon-only buttons (lock, delete, tools) get a square target */
  .btn-sm, .slot-lock, .slot-null, .slot-swap, .row-delete {
    min-width: 40px;
    min-height: 40px;
  }
  .input-group-sm > .btn, .input-group-sm > .form-control, .input-group-sm > .input-group-text,
  .form-select-sm, .form-control-sm { min-height: 40px; }

  /* Bigger radios, checkboxes and switches; the label becomes part of the target */
  .form-check-input { width: 1.35em; height: 1.35em; margin-top: 0.1em; }
  .form-switch .form-check-input { width: 2.6em; }
  .form-check { min-height: 40px; display: inline-flex; align-items: center; gap: 0.35rem; }
  .form-check-label { padding-block: 0.5rem; }

  /* Filter / sort dropdowns in section headers */
  .header-select { min-height: 40px; }

  /* Small "x" remove icons (team members, modals) get padding around them */
  .btn-close { padding: 0.75rem; background-size: 0.75em; }

  .nav-link, .cite-nav-btn { padding-block: 0.5rem; }
  .task-jump-pill, .task-filter-btn, .sample-share-btn { min-height: 36px; }
  .task-filter-option, .sample-task-option { min-height: 40px; }
}

/* -------------------------------------------- 5. no sticky hover on touch */
@media (hover: none) {
  .theme-toggle-btn:hover, .btn-primary:hover, .dataset-card:hover, h4:hover svg { transform: none; }
}