/* mobile.css — WP9. The ≤768px layer, LAST stylesheet link (base.html) so its
 * !important declarations win (build-plan §0 CSS-load-order contract). Ported
 * from eudr-x mobile.css (spec-theme §2) with chemtrust ct- selectors and navy
 * values. Geometry / breakpoints / the sheet keyframe are kept 1:1 with the
 * eudr-x source.
 *
 * env(safe-area-inset-*, fallback) is used inline instead of an @supports
 * wrapper — the fallback keeps the value valid on browsers without safe-area
 * support (equivalent effect, fewer nested blocks). Per build-plan §0.8 no
 * per-component prefers-reduced-motion blocks are added (motion is neutralised
 * globally in tokens.css). */

/* ═══════════ §2.1 Touch targets + iOS anti-zoom + overflow guard ═══════════ */
@media (max-width: 768px) {
  /* Genuine tap targets grow to the 44px minimum. Inline text links are
     deliberately excluded (they'd shred line spacing); the small utility
     buttons (search-clear, toast-close, bell mark-all) are excluded too — we
     target the real ct- control classes, not a blanket `button`. */
  .ct-btn-primary,
  .ct-btn-secondary,
  .ct-btn-danger,
  .ct-btn-ghost,
  .ct-questionnaire-submit,
  [role="button"],
  input[type="checkbox"],
  input[type="radio"],
  select,
  .ct-chip,
  .ct-dropdown-item {
    min-height: 44px;
  }
  /* Icon-only controls need a paired min-width so the hit area is square. */
  .ct-topbar-icon-btn,
  .ct-lang-toggle,
  .ct-bell-btn,
  .ct-header-avatar {
    min-width: 44px;
    min-height: 44px;
  }
  /* Prevent iOS zoom on input focus (font-size ≥ 16px). */
  input,
  select,
  textarea {
    font-size: 16px !important;
  }
  * {
    -webkit-overflow-scrolling: touch;
  }
  html,
  body {
    overflow-x: hidden;
    width: 100%;
  }
}

/* ═══════════ §2.2 Dropdown → bottom sheet ═══════════ */
@media (max-width: 768px) {
  .ct-dropdown-content {
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.25) !important;
    z-index: 5000 !important;
    max-height: 70vh;
    overflow-y: auto;
    animation: ctSlideUpSheet 0.3s cubic-bezier(0.32, 0.72, 0, 1) !important;
  }
  /* Bottom sheet grab-handle indicator */
  .ct-dropdown-content::before {
    content: "";
    display: block;
    width: 36px;
    height: 4px;
    background: rgba(128, 128, 128, 0.3);
    border-radius: 2px;
    margin: 10px auto 6px;
  }
  .ct-dropdown-item {
    padding: 16px 20px !important;
    font-size: 1rem !important;
  }
}
@keyframes ctSlideUpSheet {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ═══════════ §2.3 Table → card transform (needs td[data-label], emitted by
   render.js table() — WP2) ═══════════ */
@media (max-width: 768px) {
  .ct-table {
    display: block !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    overflow: visible !important;
  }
  .ct-table thead {
    display: none !important;
  }
  .ct-table tbody {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
  .ct-table tbody tr {
    display: flex !important;
    flex-direction: column !important;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 12px !important;
    padding: 16px !important;
    gap: 6px !important;
    box-shadow: var(--shadow-sm);
  }
  .ct-table td:not(.ct-table-empty) {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 12px;
    padding: 4px 0 !important;
    border-bottom: none !important;
    font-size: 0.88rem !important;
    box-shadow: none !important; /* drop the desktop verdict rail on first cell */
  }
  .ct-table td:not(.ct-table-empty)::before {
    content: attr(data-label);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted, #6b7c93);
    flex-shrink: 0;
    margin-right: 12px;
  }
  /* Blank the label pseudo when the cell carries no data-label (keeps flex
     spacing clean for cells rendered from a non-string header). */
  .ct-table td:not([data-label])::before {
    content: "";
    margin-right: 0;
  }
  .ct-table td:not(.ct-table-empty):last-child {
    padding-top: 10px !important;
    border-top: 1px solid var(--border, #e2e8f0);
    margin-top: 4px;
  }
  /* Empty-state row keeps its centred single-cell look. */
  .ct-table-empty {
    display: block !important;
    text-align: center;
  }
}

/* ═══════════ §2.4 Buttons & sticky action bar (≤600) ═══════════ */
@media (max-width: 600px) {
  .ct-btn-primary,
  .ct-btn-secondary,
  .ct-btn-danger,
  .ct-questionnaire-submit {
    padding: 14px 24px !important;
    font-size: 0.95rem !important;
    min-height: 48px;
    border-radius: 10px !important;
  }
  /* Primary/secondary actions in a form or a page header go full-width so
     they're easy to hit and don't wrap awkwardly. */
  .ct-form .ct-btn-primary,
  .ct-form .ct-btn-secondary,
  .ct-form .ct-questionnaire-submit,
  .ct-page-actions .ct-btn-primary,
  .ct-page-actions .ct-btn-secondary {
    width: 100%;
  }
  /* Stack the page header so the title and its actions don't fight for the
     narrow width. */
  .ct-page-header {
    flex-direction: column;
    align-items: stretch;
  }
  .ct-page-actions {
    flex-wrap: wrap;
  }
  /* Optional sticky action bar utility (a page can add .ct-btn-sticky-mobile
     to a footer of actions). Present so a future flow needs no extra CSS. */
  .ct-btn-sticky-mobile {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px 16px;
    padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
    background: var(--surface, rgba(255, 255, 255, 0.95));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid var(--border, #e2e8f0);
    box-shadow: 0 -4px 20px rgba(8, 17, 32, 0.08);
    z-index: 100;
  }
}

/* ═══════════ §2.5 Modal centring + confirm-as-sheet (≤600) ═══════════
   Forward-looking: chemtrust has no modal/confirm DOM yet, so these are inert
   (like topbar.css's ported delete button). Present verbatim so a future
   dialog is mobile-correct with zero extra CSS. */
@media (max-width: 600px) {
  .ct-modal-box {
    width: calc(100% - 32px) !important;
    max-width: 420px !important;
    border-radius: 18px !important;
    padding: 28px 20px !important;
  }
  .ct-modal-overlay {
    align-items: center !important;
    padding: 16px;
  }
  .ct-confirm-box {
    max-width: 100% !important;
    width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    padding: 28px 20px !important;
    padding-bottom: max(28px, env(safe-area-inset-bottom, 0px)) !important;
  }
  .ct-confirm-overlay {
    align-items: flex-end !important;
  }
  .ct-confirm-actions {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .ct-confirm-actions button {
    width: 100% !important;
    padding: 14px 24px !important;
    font-size: 0.95rem !important;
  }
}

/* ═══════════ §2.6 Fixed-panel escape hatch — the notification bell panel is
   absolutely-positioned inside .ct-right { overflow:hidden }, so re-pin it to
   the viewport (topbar height 52px + breathing room). ═══════════ */
@media (max-width: 600px) {
  .ct-bell-panel {
    position: fixed !important;
    top: calc(52px + 8px) !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: none !important;
    max-height: calc(100dvh - 80px) !important;
  }
}

/* ═══════════ §2.7 Safe-area insets, print, scrollbars ═══════════ */
@media (max-width: 768px) {
  .ct-topbar {
    padding-left: max(12px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(12px, env(safe-area-inset-right, 0px)) !important;
  }
  .ct-bottom-footer {
    padding-bottom: max(16px, env(safe-area-inset-bottom, 0px)) !important;
  }
  /* Hide the thin scrollbars on touch (native momentum scroll stands in). */
  ::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
  }
}

@media print {
  /* Hide all app chrome. */
  .ct-topbar,
  .ct-sidebar,
  .ct-sidebar-toggle,
  .ct-bottom-footer,
  .ct-bottomnav,
  #cookieConsentBanner,
  .ct-toast-viewport {
    display: none !important;
  }
  /* Unclip the rigid shell so the whole document flows onto the printed page
     instead of being cropped to one 100dvh screen. */
  .ct-shell,
  .ct-right,
  .ct-shell .ct-main,
  .ct-main > #page-root,
  .ct-main > .ct-card-rigid,
  .ct-card-rigid > .ct-card-scroll {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
    display: block !important;
  }
  body.ct-shell-active {
    background: #fff !important;
  }
}

/* ═══════════ §2.8 Dark-mode × mobile pins ═══════════ */
@media (max-width: 768px) {
  body.dark-mode .ct-table tbody tr {
    background: var(--surface, #0d1b2e);
    border-color: var(--border, #1d3247);
  }
  body.dark-mode .ct-dropdown-content::before {
    background: rgba(255, 255, 255, 0.15);
  }
  body.dark-mode .ct-btn-sticky-mobile {
    background: rgba(13, 27, 46, 0.95);
    border-top-color: #1d3247;
  }
}

/* ═══════════ §2.9 Shell tier — ≤600px the sidebar disappears and the
   bottom-nav (bottom-nav.css) takes over. mobile.css re-asserts the hides as
   the authoritative !important layer and owns the ≤600 main top/left/right
   padding + safe-area (bottom-nav.css owns padding-bottom). ═══════════ */
@media (max-width: 600px) {
  .ct-shell .ct-sidebar,
  .ct-sidebar-toggle {
    display: none !important;
  }
  .ct-bottom-footer {
    display: none !important;
  }
  .ct-shell .ct-main {
    padding-top: 10px !important;
    padding-left: max(8px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(8px, env(safe-area-inset-right, 0px)) !important;
  }
}