/* ============================================================================
   Workhub — Responsive overrides
   Tailwind utility classes handle most responsiveness; this file covers the
   custom (non-utility) components defined in style.css/dashboard.css/tables.css.
   ============================================================================ */

@media (max-width: 1280px) {
  .tf-page-content { padding: 20px; }
}

@media (max-width: 1024px) {
  /* !important: several pages set a fixed column count inline (e.g.
     style="grid-template-columns:repeat(4,1fr)") for their desktop layout.
     Inline styles otherwise beat a class selector regardless of media query,
     so without !important these breakpoints would be silently ignored on
     exactly the pages most likely to need them, cramming stat-card icons
     and labels into a few cramped columns on mobile. */
  .tf-stat-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .tf-navbar-search { max-width: 280px; }
}

@media (max-width: 768px) {
  .tf-stat-grid { grid-template-columns: 1fr 1fr !important; gap: 12px; }
  .tf-stat-card .tf-stat-value { font-size: 22px; }
  .tf-navbar-search { display: none; }
  .tf-page-content { padding: 16px; }
  .tf-modal-body, .tf-modal-header, .tf-modal-footer { padding: 16px; }
}

@media (max-width: 480px) {
  .tf-stat-grid { grid-template-columns: 1fr !important; }
  .tf-user-btn span:not(.hidden) { display: none; }
  .tf-toast-container, #tf-toast-container { left: 12px; right: 12px; width: auto; }
}

/* ----------------------------------------------------------------------
   List/detail pages on a phone (messages.html, mail.html)
   Desktop shows the conversation/inbox list and the open thread/message
   side by side (the inline grid-template-columns each page sets). On a
   phone that's too cramped to be usable — this collapses it to a single
   full-width view, list by default, and slides the detail pane over the
   whole screen once something is opened (JS adds .mobile-thread-open to
   the wrapper; the .tf-chat-back / #mail-back-btn button removes it).
   ---------------------------------------------------------------------- */
@media (max-width: 768px) {
  .tf-list-detail { grid-template-columns: 1fr !important; }
  .tf-list-detail-list { max-height: none !important; }
  .tf-list-detail-detail { display: none; }
  .tf-list-detail.mobile-thread-open .tf-list-detail-list { display: none; }
  .tf-list-detail.mobile-thread-open .tf-list-detail-detail { display: block; }
  .tf-chat-back { display: inline-flex; }
  /* The thread takes over the full screen at this width, so it should
     fill the space actually left after the navbar above and the bottom
     tab bar below, not sit at a fixed desktop height with dead space
     under it. */
  .tf-list-detail.mobile-thread-open .tf-chat-shell {
    height: calc(100dvh - var(--navbar-h) - 160px);
    border-radius: var(--radius-md);
  }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ----------------------------------------------------------------------
   Mobile bottom navigation (assets/components/bottom-nav.js)
   Phone/tablet-width only — desktop keeps the sidebar as the only nav.
   Touch targets are >=48px tall per WCAG/Material guidance, and the safe-
   area inset keeps it clear of the home-indicator bar on notched iPhones.
   ---------------------------------------------------------------------- */
.tf-bottom-nav { display: none; }

@media (max-width: 1024px) {
  .tf-bottom-nav {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 80;
    background: var(--surface-glass);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border-top: 1px solid var(--border);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
  }
  /* Keep page content clear of the bar sitting on top of it. */
  .tf-main { padding-bottom: 64px; }
  /* The old hamburger→drawer sidebar toggle is superseded by the bottom
     bar's "More" screen below — one navigation mental model on mobile
     instead of two competing ones. */
  #tf-mobile-menu-btn { display: none !important; }
}

.tf-bottom-nav-tab {
  position: relative;
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  min-height: 48px;
  padding: 6px 2px;
  border: none; background: none; cursor: pointer;
  color: var(--text-muted);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  -webkit-tap-highlight-color: transparent;
  transition: color .15s ease;
}
.tf-bottom-nav-tab i { font-size: 18px; transition: transform .15s ease; }
.tf-bottom-nav-tab.active { color: var(--accent); }
.tf-bottom-nav-tab:active { opacity: 0.7; }
.tf-bottom-nav-tab:active i { transform: scale(0.88); }

/* Selected tab: icon "pops" in with a spring bounce, plus a small
   pulsing accent dot above it — the same "alive/selected" language as
   the desktop rail's section-icon dot, so the two feel like one design
   system rather than two different nav patterns. */
.tf-bottom-nav-tab.active i {
  animation: tf-bottom-nav-icon-pop .45s cubic-bezier(.34, 1.56, .64, 1);
}
.tf-bottom-nav-tab.active::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent);
  animation: tf-bottom-nav-dot-pulse 2.2s ease-out infinite;
}
@keyframes tf-bottom-nav-icon-pop {
  0% { transform: scale(0.55); }
  60% { transform: scale(1.25); }
  100% { transform: scale(1); }
}
@keyframes tf-bottom-nav-dot-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  70% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); }
}

/* ----------------------------------------------------------------------
   "More" full-screen menu (assets/components/bottom-nav.js)
   Replaces the old fixed 8-item bottom-sheet grid *and* the hamburger→
   drawer pattern: this is now the one place mobile reaches every link
   the desktop sidebar has, grouped under the same section headings.
   ---------------------------------------------------------------------- */
.tf-more-sheet {
  position: fixed; inset: 0; z-index: 95;
  display: flex; flex-direction: column;
  background: var(--surface);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.tf-more-sheet.open { opacity: 1; transform: translateY(0); }

.tf-more-sheet-header {
  flex: none;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(14px + env(safe-area-inset-top, 0px)) 16px 12px;
  border-bottom: 1px solid var(--border);
}
.tf-more-sheet-title { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--text); }

.tf-more-sheet-search {
  flex: none;
  display: flex; align-items: center; gap: 10px;
  margin: 12px 16px;
  padding: 0 12px;
  height: 44px;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.tf-more-sheet-search input {
  flex: 1;
  border: none; background: none; outline: none;
  font-family: var(--font-body); font-size: 14px; color: var(--text);
  min-height: 0; height: 100%;
}
.tf-more-sheet-search input::placeholder { color: var(--text-muted); }

.tf-more-sheet-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4px 16px calc(24px + env(safe-area-inset-bottom, 0px));
}

.tf-more-group { border-bottom: 1px solid var(--border); }
.tf-more-group:last-child { border-bottom: none; }
.tf-more-group.tf-more-group-hidden { display: none; }

.tf-more-section-header {
  width: 100%;
  display: flex; align-items: center; gap: 12px;
  min-height: 52px;
  padding: 10px 4px;
  border: none; background: none; cursor: pointer;
  font-family: var(--font-body); font-size: 15px; font-weight: 600; color: var(--text);
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.tf-more-section-header i:first-child { width: 20px; color: var(--text-muted); font-size: 15px; }
.tf-more-section-header span { flex: 1; }
.tf-more-chevron { font-size: 12px; color: var(--text-muted); transition: transform 0.2s ease; }
.tf-more-section-header.open .tf-more-chevron { transform: rotate(180deg); }

.tf-more-section-body {
  display: none;
  flex-direction: column;
  padding: 0 0 10px 32px;
}
.tf-more-section-body.open { display: flex; }

.tf-more-link {
  display: flex; align-items: center; gap: 12px;
  min-height: 46px;
  text-decoration: none; color: var(--text-muted);
  font-family: var(--font-body); font-size: 14.5px; font-weight: 500;
  border-radius: 10px;
  padding: 0 8px;
  -webkit-tap-highlight-color: transparent;
}
.tf-more-link:active { background: var(--surface-2); }
.tf-more-link i { width: 18px; font-size: 14px; }
.tf-more-link.active { color: var(--accent); font-weight: 700; }
.tf-more-link.tf-more-link-hidden { display: none; }

body.tf-more-sheet-locked { overflow: hidden; }

/* Touch-friendly control sizing on phone widths — buttons, inputs, and
   table action icons all get real thumb targets instead of desktop-density
   hit areas (WCAG 2.5.5 recommends >=44x44px). */
@media (max-width: 768px) {
  .btn, .tf-icon-btn, .form-input, .form-select, .form-textarea, .tf-tab { min-height: 44px; }
  .tf-icon-btn { width: 44px; }
  .btn-sm { min-height: 40px; }
  table.tf-table th, table.tf-table td { padding: 12px 10px; }
}