/* =============================================================================
 * Mobile adaptation (iOS Safari / Android Chrome), loaded after every other
 * stylesheet. Target: 320-430 px phones, plus tablets up to 991 px.
 *
 * Why this file exists -- the bug that prompted it:
 *   On phones the login page looked fine but no input could be focused, so the iOS
 *   keyboard never opened. Cause: `.vertical-nav-backdrop` is `position: fixed;
 *   inset: 0; z-index: 1035; opacity: 0` and, at <= 991px, `display: block`. It is
 *   invisible but still receives every tap, and it sits above the page content.
 *   The fix is that the backdrop only exists while the drawer is open.
 * ========================================================================== */

/* ---------------------------------------------------------------------------
 * 1. The invisible click-eating backdrop (root cause of "can't focus inputs")
 * ------------------------------------------------------------------------ */
.vertical-nav-backdrop {
  /* Not display:block + opacity:0. A transparent full-screen layer still hit-tests. */
  display: none !important;
  pointer-events: none;
}

@media (max-width: 991.98px) {
  .vertical-nav-backdrop.show {
    display: block !important;
    pointer-events: auto;
    opacity: 1;
  }
}

/* The login / register pages never have a drawer to open: remove every piece of
   the app chrome so nothing can sit on top of the form. */
body.auth-split .vertical-nav-backdrop,
body.auth-split .vertical-nav-toggle,
body.auth-split .app-sidebar,
body.auth-split #verticalNavBackdrop {
  display: none !important;
  pointer-events: none !important;
}

/* ---------------------------------------------------------------------------
 * 2. Base: stop iOS from fighting the layout
 * ------------------------------------------------------------------------ */
html {
  /* iOS inflates text after rotation unless told not to. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Removes the 300 ms-style grey flash on tap that makes buttons look broken. */
  -webkit-tap-highlight-color: rgba(15, 108, 189, 0.12);
}

/* Remove double-tap-to-zoom delay while still allowing pinch-zoom. */
a, button, input, select, textarea, label, [role="button"] {
  touch-action: manipulation;
}

/* A horizontal scrollbar on a phone means something overflowed the viewport. */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

img, video, canvas, svg {
  max-width: 100%;
}

/* 收缩链必须贯穿 flex/grid 容器，不能靠隐藏整页溢出截掉内容。 */
.app-main-wrapper,
.main-content,
.main-content-inner,
.main-container,
.row > *,
.card-body,
.d-flex > *,
.filters-grid > * {
  min-width: 0;
}

/* 无 form-control 的 AnyDoc 附件也须受父容器约束；保留原多选 widget。 */
#anydocForm #id_attachments[type="file"] {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 991.98px) {
  /* ------------------------------------------------------------------------
   * 3. Inputs: >= 16px or iOS Safari zooms the page when a field is focused
   *    (and does not zoom back), which reads as "the page jumped / broke".
   *    44px is Apple's minimum touch target; Android's is 48dp.
   * --------------------------------------------------------------------- */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]),
  select,
  textarea,
  .form-control,
  .form-select,
  .split-input,
  .split-form input[type="text"],
  .split-form input[type="password"],
  .split-form input[type="email"] {
    font-size: 16px !important;
    min-height: 44px;
  }

  #anydocForm #id_attachments[type="file"],
  #anydocForm #id_attachments[type="file"]::file-selector-button {
    min-height: 44px;
  }

  textarea { min-height: 88px; }

  /* Bootstrap's small variants are < 44px; keep them tappable on touch screens. */
  .form-control-sm, .form-select-sm, .btn-sm {
    min-height: 44px;
    font-size: 16px;
  }
  .btn-sm { font-size: 0.9375rem; padding-inline: 0.75rem; }

  .btn { min-height: 44px; min-width: 44px; }
  .page-link { min-height: 44px; min-width: 44px; }
  .vertical-nav-theme-btn,
  .vertical-nav-lang-btn,
  .vertical-nav-logout { min-height: 44px; min-width: 44px; }
  .pagination { flex-wrap: wrap; }
  .input-group { min-width: 0; }
  .form-control, .form-select { min-width: 0; }
  input, select, textarea { scroll-margin-top: 5rem; scroll-margin-bottom: 8rem; }
  .btn-close { min-width: 44px; min-height: 44px; }

  /* Checkboxes / radios are 16px by default: enlarge the hit area via the label. */
  .form-check { min-height: 44px; display: flex; align-items: center; gap: 0.5rem; }
  .form-check .form-check-input { width: 1.25rem; height: 1.25rem; margin: 0; float: none; }
  .form-check .form-check-label { padding: 0.5rem 0; flex: 1; }

  .dropdown-item, .nav-link, .list-group-item-action { min-height: 44px; display: flex; align-items: center; }

  /* ------------------------------------------------------------------------
   * 4. Layout shell: dynamic viewport units + safe areas
   *    100vh on iOS Safari includes the collapsing URL bar, so a "full-height"
   *    page is taller than what is visible and the bottom is cut off.
   * --------------------------------------------------------------------- */
  .app-shell-vertical,
  .app-shell-vertical .app-main-wrapper,
  body.auth-split .app-shell,
  body.auth-split .app-shell-vertical,
  body.auth-split .app-main-wrapper,
  body.auth-split .main-content,
  body.auth-split .main-container,
  body.auth-split .main-content-inner {
    min-height: 100vh;      /* fallback */
    min-height: 100dvh;
  }

  .app-shell-vertical .app-sidebar { height: 100vh; height: 100dvh; }

  .main-content-inner,
  .main-container {
    padding-left: 0.75rem;
    padding-left: max(0.75rem, env(safe-area-inset-left));
    padding-right: 0.75rem;
    padding-right: max(0.75rem, env(safe-area-inset-right));
    padding-bottom: 1rem;
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }

  /* The fixed hamburger must clear the iPhone notch / status bar. */
  .vertical-nav-toggle {
    top: 0.75rem;
    top: max(0.75rem, env(safe-area-inset-top));
    left: 0.75rem;
    left: max(0.75rem, env(safe-area-inset-left));
    width: 44px;
    height: 44px;
  }

  /* Pages have a hamburger floating over the top-left: give the first thing on the
     page room so the toggle does not cover its title. */
  .app-shell-vertical .main-content-inner {
    padding-top: calc(44px + 1.25rem);
    padding-top: calc(44px + 1.25rem + env(safe-area-inset-top, 0px));
  }

  /* ------------------------------------------------------------------------
   * 5. Tables, cards, headings, modals
   * --------------------------------------------------------------------- */
  .table-responsive {
    overflow-x: auto;
    max-width: 100%;
    min-width: 0;
    -webkit-overflow-scrolling: touch;
  }
  /* Only tables inside a scroll container may refuse to wrap. Key/value tables that
     are not wrapped (request detail) must wrap, or they widen the whole page. */
  .table-responsive .table th, .table-responsive .table td { white-space: nowrap; }
  .table-responsive .table td.text-wrap, .table-responsive .table th.text-wrap { white-space: normal; min-width: 12rem; }
  .table-detail { width: 100%; table-layout: fixed; }
  .table-detail th, .table-detail td,
  .table-responsive .table-detail th, .table-responsive .table-detail td {
    white-space: normal;
    min-width: 0;
    overflow-wrap: break-word;
    overflow-wrap: anywhere;
  }
  .table-detail th { width: 35%; }

  .section-card.d-flex,
  .card-body > .d-flex.justify-content-between,
  .list-group-item.d-flex.justify-content-between,
  .project-role-row {
    flex-wrap: wrap;
    gap: 0.75rem;
  }
  .section-card > .d-flex { flex-wrap: wrap; }
  .section-card { padding: 1rem; }
  .project-role-label { flex: 0 0 100%; }
  .badge { white-space: normal; overflow-wrap: break-word; overflow-wrap: anywhere; }
  .nav-tabs { flex-wrap: wrap; }
  [data-designer-preview] .d-flex { flex-wrap: wrap; }
  [data-designer-preview] .btn-group { flex-wrap: wrap; }
  .page-header { flex-direction: column; align-items: stretch !important; gap: 0.75rem; }
  .page-header > .btn, .page-header .btn-group { width: 100%; }

  h1, .h1 { font-size: 1.5rem; }
  h2, .h2 { font-size: 1.3rem; }
  h3, .h3 { font-size: 1.15rem; }

  .card .card-body { padding: 1rem; }
  .card-header { padding: 0.75rem 1rem; }

  /* Long unbroken strings (emails, file names, hashes) must wrap, not widen the page. */
  .card, .alert, .modal-body, .list-group-item, td, th, p, dd {
    overflow-wrap: break-word;
    overflow-wrap: anywhere;
  }

  /* Modals: full width with a small gutter, scrollable, clear of the home bar. */
  .modal-dialog { margin: 0.5rem; max-width: none; }
  .modal-dialog.modal-dialog-centered { min-height: calc(100% - 1rem); }
  .modal-content { max-height: calc(100vh - 1rem); max-height: calc(100dvh - 1rem); }
  .modal-body { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .modal-footer { padding-bottom: 0.75rem; padding-bottom: max(0.75rem, env(safe-area-inset-bottom)); flex-wrap: wrap; }
  .modal-footer > .btn { flex: 1 1 auto; }

  /* Dropdowns must never be wider than the screen. */
  .dropdown-menu { max-width: calc(100vw - 1.5rem); }

  /* Flatpickr popup: keep it on-screen. */
  .flatpickr-calendar { max-width: calc(100vw - 1rem); }

  /* Button rows that overflow: stack. */
  .d-flex.gap-2:not(.flex-nowrap):not(.align-items-center) { flex-wrap: wrap; }
}

/* ---------------------------------------------------------------------------
 * 6. Phones (<= 575px)
 * ------------------------------------------------------------------------ */
@media (max-width: 575.98px) {
  .container, .container-fluid { padding-left: 0.75rem; padding-right: 0.75rem; }

  /* Two-column form rows collapse to one: Bootstrap cols without an explicit
     mobile width otherwise squeeze inputs to ~140px. */
  .row > [class*="col-md-"], .row > [class*="col-lg-"] { width: 100%; }

  .btn-toolbar, .btn-group { flex-wrap: wrap; }
  .btn-group > .btn { flex: 1 1 auto; }

  .messages-stack { left: 0.75rem; right: 0.75rem; width: auto; }
}

/* ---------------------------------------------------------------------------
 * 7. Login / register split layout
 * ------------------------------------------------------------------------ */
@media (max-width: 767.98px) {
  body.auth-split {
    /* `fixed` backgrounds are broken on iOS Safari (rendered at wrong scale and
       they make scrolling janky). `scroll` is what actually works on a phone. */
    background-attachment: scroll;
    background-position: center top;
  }

  body.auth-split .main-container,
  body.auth-split .main-content-inner {
    /* Top-align instead of vertically centring: when the keyboard opens, a
       centred card gets pushed half off-screen and the focused input is hidden. */
    align-items: flex-start;
    padding: 0 !important;
  }

  .split-stage {
    width: 100%;
    margin: 0;
    padding: 12px 12px 16px;
    padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
             max(16px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  }

  .split-card { box-shadow: 0 12px 32px rgba(8, 24, 56, 0.28); border-radius: 12px; overflow: hidden; }

  /* Compact brand strip: logo + name on one row instead of a tall banner that
     pushes the form below the fold and under the keyboard. */
  .split-brand-inner {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
  }
  .split-logo { width: 52px; height: 52px; margin: 0; flex: 0 0 auto; border-radius: 10px; }
  .split-logo img { max-width: 40px; max-height: 40px; }
  .split-brand h1 { margin: 0; font-size: 20px; line-height: 1.25; letter-spacing: 0.02em; }

  .split-form { padding: 16px 18px 22px; }
  .split-tools { margin-bottom: 4px; }
  .split-tool { height: 44px; min-width: 44px; justify-content: center; font-size: 14px; }
  .split-tabs { margin-bottom: 18px; }
  .split-tabs a, .split-tabs span { padding: 12px 8px; font-size: 17px; }

  .split-input,
  .split-form input[type="text"],
  .split-form input[type="password"],
  .split-form input[type="email"] {
    height: 48px;
    margin-bottom: 14px;
    border-radius: 8px;
  }
  .split-submit, .split-sso-btn { height: 48px; border-radius: 8px; font-size: 16px; }

  .split-meta { flex-wrap: wrap; gap: 4px 12px; font-size: 14px; }
  .split-meta label { min-height: 44px; }
  .split-meta a { display: inline-flex; align-items: center; min-height: 44px; }
  .split-meta input[type="checkbox"] { width: 20px; height: 20px; }

  /* Keep the focused field clear of the iOS keyboard / sticky browser chrome. */
  .split-form input { scroll-margin-top: 96px; scroll-margin-bottom: 140px; }
}

/* Very small phones (iPhone SE 1st gen, 320px). */
@media (max-width: 359.98px) {
  .split-brand h1 { font-size: 17px; }
  .split-form { padding: 14px 14px 20px; }
  .split-tabs a, .split-tabs span { font-size: 15px; }
}

/* Landscape phones: the card is wider than tall -- drop the brand strip so the
   form is reachable above the keyboard. */
@media (max-height: 480px) and (orientation: landscape) {
  .split-brand { display: none; }
  .split-stage { margin-top: 0; }
  .split-form { padding-top: 10px; }
}

/* The non-split ("fluent") login card. */
@media (max-width: 575.98px) {
  .fluent-auth-wrap { min-height: 0; align-items: flex-start; padding-top: 1rem; }
  .fluent-card .card-body { padding: 1.25rem !important; }
}

/* ---------------------------------------------------------------------------
 * 8. Dark mode keeps the fixes above readable
 * ------------------------------------------------------------------------ */
@media (max-width: 767.98px) {
  [data-theme="dark"] .split-card { background: #1b2230; }
}

/* ---------------------------------------------------------------------------
 * 9. Respect "reduce motion" -- also helps low-end Android
 * ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}