/* #3928 Call Log: filters and settings in bottom sheets, phone full-screen layout. Design-system tokens only.
   Phones get the class calls-toolbox--sheet from JS on screen.width (never a CSS width query: an auto-zoomed
   overflowing page inflates it, CLAUDE.md 0a). */

/* Desktop list sizing (was an inline style); the phone sheet lifts the cap below. */
.calls-toolbox #calls-list { min-height: 200px; max-height: calc(100vh - 300px); }

/* doubled class: must beat the page's own .calls-toolbox rule (max-width: 90vw), which loads later.
   z-index 950: just above the desktop window (900) and BELOW the whole modal band (every modal, overlay and
   toast on admin_tickets is >= 1000), so anything opened from inside the Call Log (link customer, create ticket,
   confirms, toasts) stacks ABOVE the sheet. The bottom tab bar (z 9000) would otherwise sit over it, so it is
   hidden while the sheet is open (body.calls-sheet-open, set by JS). */
.calls-toolbox.calls-toolbox--sheet {
  z-index: 950; inset: 0; width: 100%; max-width: none; min-width: 0;
  height: 100dvh; max-height: none; border-radius: 0; border: 0; resize: none;
}
.calls-toolbox.calls-toolbox--sheet .calls-toolbox-header { cursor: default; padding: 0.6rem 0.75rem; }
.calls-toolbox.calls-toolbox--sheet .calls-toolbox-content { padding: 0.5rem 0.75rem; }
.calls-toolbox.calls-toolbox--sheet #calls-list { min-height: 0; max-height: none; }
.calls-toolbox--sheet .ctb-desktop-only { display: none; }
body.calls-sheet-open #mobile-panel-tabs { display: none; }
/* The page's two floating buttons (toast history, feedback; z >= 10001) float over everything incl. this sheet, so the
   last list card and the last sheet row get bottom room to scroll clear of them. */
.calls-toolbox--sheet #calls-list { padding-bottom: 3.5rem; }
.calls-toolbox--sheet .ctb-sheet { padding-bottom: calc(3.5rem + env(safe-area-inset-bottom)); }

.calls-toolbox-content { position: relative; }
.ctb-iconbtn {
  background: none; border: 0; font-size: 1.25rem; line-height: 1; color: inherit; cursor: pointer;
  min-width: 44px; min-height: 44px; border-radius: var(--radius, 6px);
}
.calls-toolbox:not(.calls-toolbox--sheet) .ctb-iconbtn { min-width: 0; min-height: 0; padding: 0.25rem 0.4rem; }

/* search + Filters */
.ctb-bar { display: flex; gap: 0.4rem; align-items: center; }
.ctb-search { position: relative; flex: 1; min-width: 0; }
.ctb-search input {
  width: 100%; box-sizing: border-box; padding: 0.55rem 2rem 0.55rem 0.6rem; border-radius: var(--radius, 6px);
  border: 1px solid var(--border-strong); background: var(--bg-input); color: var(--text); font-size: 16px;
}
/* !important: styles.css forces #3b4758 !important on every dark-mode placeholder (3:1 on the dark field); this selector is more specific, so it wins */
.ctb-search input::placeholder { color: var(--text-muted) !important; opacity: 1 !important; }
.ctb-search button {
  position: absolute; right: 0.2rem; top: 50%; transform: translateY(-50%); background: none; border: 0;
  color: var(--text-muted); cursor: pointer; min-width: 32px; min-height: 32px;
}
.ctb-filters-btn {
  display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; min-height: 44px; padding: 0.45rem 0.8rem;
  border-radius: var(--radius, 6px); border: 1px solid var(--border-strong); background: var(--bg-nested);
  color: var(--text); font-size: 0.9rem; cursor: pointer;
}
.ctb-count { background: var(--btn-bg); color: var(--btn-text); border-radius: 999px; padding: 0 0.45rem; font-size: 0.75rem; }
.ctb-count[hidden] { display: none; }
.ctb-summary { font-size: 0.8rem; color: var(--text-muted); margin: 0.35rem 0 0.1rem; display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.ctb-summary[hidden] { display: none; }

/* stats strip = the status filter */
.ctb-stats {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.2rem; padding: 0.35rem; margin: 0.5rem 0;
  border-radius: var(--radius, 6px); background: var(--info-bg); flex-shrink: 0;
}
.ctb-stats .stat-card { text-align: center; cursor: pointer; padding: 0.2rem; border-radius: var(--radius, 6px); }
.ctb-stats .stat-card.stat-card-static { cursor: default; }
.ctb-stats .stat-card.stat-active { outline: 2px solid var(--border-focus); background: var(--bg-card); }
.ctb-stat-n { font-size: 1.1rem; font-weight: 700; color: var(--text); }
.ctb-stat-n.ok { color: var(--success-text); }
.ctb-stat-n.bad { color: var(--error-text); }
.ctb-stat-n.vm { color: var(--info-text); }
.ctb-stat-l { font-size: 0.66rem; color: var(--text-muted); }

/* bottom sheets */
.ctb-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 20; }
.ctb-scrim[hidden], .ctb-sheet[hidden] { display: none; }
.ctb-sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 21; background: var(--bg-card); color: var(--text);
  border-radius: 14px 14px 0 0; box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.3);
  padding: 0.4rem 1rem calc(1rem + env(safe-area-inset-bottom)); max-height: 85%; overflow-y: auto;
}
.ctb-grab { width: 36px; height: 4px; border-radius: 2px; background: var(--border-strong); margin: 0.2rem auto 0.5rem; }
.ctb-sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.6rem; }
.ctb-sheet-head h4 { margin: 0; font-size: 1.05rem; }
.ctb-link {
  background: none; border: 0; color: var(--info-text); font-size: 0.95rem; padding: 0.3rem 0.2rem;
  min-height: 44px; cursor: pointer;
}
.ctb-link.strong { font-weight: 700; }
.ctb-summary .ctb-link { min-height: 0; font-size: 0.8rem; }
.ctb-sec { font-size: 0.8rem; font-weight: 600; color: var(--text-muted); margin: 0.9rem 0 0.35rem; }
.ctb-sheet .ctb-grab + .ctb-sheet-head + .ctb-sec { margin-top: 0.2rem; }
/* wraps at every width: a one-line scroller hid Last month / All time / Custom off the edge with no cue (#3928) */
.ctb-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ctb-chip {
  flex: 0 0 auto; min-height: 44px; border: 1px solid var(--border-strong); background: var(--bg-nested); color: var(--text);
  border-radius: 999px; padding: 0.45rem 0.85rem; font-size: 0.9rem; cursor: pointer;
}
.ctb-chip.on { background: var(--btn-bg); border-color: transparent; color: var(--btn-text); }
.ctb-custom-range { display: flex; gap: 0.4rem; align-items: center; margin-top: 0.5rem; }
.ctb-custom-range .ds-input { flex: 1; min-width: 0; }
.ctb-list { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.ctb-list-spaced { margin-top: 0.6rem; }
.ctb-li {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-height: 44px;
  padding: 0.7rem 0.8rem; font-size: 0.95rem; background: var(--bg-card); cursor: pointer;
}
.ctb-li + .ctb-li { border-top: 1px solid var(--border); }
.ctb-li small { display: block; color: var(--text-muted); font-size: 0.78rem; margin-top: 0.1rem; }
.ctb-help { font-size: 0.82rem; color: var(--text-muted); margin-top: 0.4rem; }