/* The any-field filter builder on the People page.
 *
 * Its own sheet rather than lines added to styles.css, which is the house
 * rule: one file per feature so two features never edit the same stylesheet.
 *
 * The layout rule worth knowing before editing this: every row puts its
 * controls at the LEFT and lets the space fall at the right. The CRM's My To
 * Do dock is fixed to the bottom right corner over everything, and two action
 * rows have already been shipped with a flex:1 spacer that pushed their
 * button underneath it. Nothing in here uses a spacer for that reason.
 */

.pf-adv-bar { margin-bottom: 8px; }

.pf-adv {
  padding: 12px 14px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pf-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* The three controls of a rule read as one sentence, so they sit tight
   together and the remove button sits just after them rather than at the far
   edge of the card where it would look like it removes the card. */
.pf-rule select,
.pf-rule input {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  outline: none;
  font-size: 13px;
}

.pf-rule input:focus,
.pf-rule select:focus { border-color: var(--blue); }

/* The field name is the part somebody scans down a stack of rules looking
   for, so it is the wide one and the operator is sized to its own words. */
.pf-rule .pf-key { min-width: 170px; }
.pf-rule .pf-op { min-width: 150px; }
.pf-rule .pf-val { min-width: 180px; flex: 0 1 260px; }

.pf-rule .pf-novalue { min-width: 180px; }

/* The quick-add chips: Date created, Address, Notes, Who else is on this lead.
   Pete, 13 Oct 2026. They sit on the first row of the panel, left aligned like
   every row in here, and read as buttons that ADD a rule rather than as rules
   already in force - the pale fill and the plus say so. */
.pf-quick .pf-lbl { font-weight: 700; margin-right: 2px; }

.pf-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #f1f5f9;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.pf-chip:hover { border-color: var(--blue); background: #eaf2ff; }
.pf-chip svg { width: 13px; height: 13px; }

/* What a notes rule says about its own search. It is a line of status, not a
   control, so it never takes the width a value box would. */
.pf-rule .pf-hint { flex: 0 1 auto; }
.pf-rule .pf-hint-bad { color: #b91c1c; }

.pf-deal .pf-lbl {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  min-width: 46px;
}

.pf-deal select {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}

/* A rule that is not yet saying anything is dimmed rather than hidden or
   flagged: somebody mid-way through adding one should see that it is not
   narrowing the list yet, without being told off about it. */
.pf-rule.pf-idle { opacity: .72; }

/* 860px, NOT a number chosen for this sheet. That is where phone.css swaps
   the rail for the bottom tab bar and where three blocks in styles.css turn
   the layout over. A sheet that picks its own breakpoint leaves a band where
   the app is in phone mode and this card is not. */
@media (max-width: 860px) {
  /* On a handset the three controls stack, and each one takes the width.
     Side by side they were three unreadable slivers. */
  .pf-rule { align-items: stretch; flex-direction: column; }
  .pf-rule select,
  .pf-rule input { width: 100%; min-width: 0; }
  .pf-rule .pf-val { flex: none; }
  .pf-rule .pf-del { align-self: flex-end; }
}

/* The banner shown while a saved list's filters are being edited in the bar.
 *
 * It is the only thing on screen saying that Save will overwrite a list
 * rather than make a new one, so it is a block rather than a line: the count,
 * the warning, and the two buttons all have to be readable at a glance.
 */
.pf-editbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.pf-editbar-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* min-width:0 so a long "kept as they are" sentence wraps instead of
     pushing the two buttons off the end of the row. */
  min-width: 0;
  flex: 1 1 320px;
}

@media (max-width: 860px) {
  /* 860px is where phone.css turns the app over, not a number chosen here. */
  .pf-editbar .btn { flex: 1 1 auto; }
}

/* ---- Doing one thing to a whole selection ----
 *
 * The menu hangs off the floating selection bar, which is fixed near the
 * bottom of the window, so the list opens UPWARDS. Opening downwards would
 * put it under the edge of the viewport where the bar already sits.
 */
.bulk-menu { position: relative; }

.bulk-pop {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  min-width: 210px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 34px rgba(15, 23, 42, .35);
  padding: 5px;
  z-index: 70;
  display: flex;
  flex-direction: column;
}

.bulk-item {
  border: 0; background: none; text-align: left;
  padding: 8px 11px; border-radius: 7px;
  font: inherit; font-size: 13.5px; color: var(--text); cursor: pointer;
}
.bulk-item:hover { background: #eef2f7; }

/* Delete is last and reads as the exception it is. A rule above it rather
   than colour alone: colour is the first thing lost to a bad screen. */
.bulk-item.danger { color: #b91c1c; font-weight: 600; border-top: 1px solid var(--border); border-radius: 0 0 7px 7px; margin-top: 4px; padding-top: 10px; }
.bulk-item.danger:hover { background: #fee2e2; }

.bulk-preview {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border);
}
.bulk-count { font-size: 14px; color: var(--text); margin-bottom: 8px; }
.bulk-count b { font-size: 18px; }

/* How many get a message today. The number somebody is really deciding on,
   so it is the largest thing in the panel after the count itself. */
.bulk-send { margin: 8px 0; padding: 9px 11px; background: #fffbeb; border: 1px solid #fcd34d; border-radius: 8px; color: var(--text); }
.bulk-send b { font-size: 16px; }

/* The skipped list is collapsed: it is reassurance, not the decision. It
   opens because somebody wants to know WHICH, and then it has to name them,
   because "32 skipped" with no names is what makes a bulk tool untrusted. */
.bulk-skips { margin-top: 10px; }
.bulk-skips summary { cursor: pointer; font-weight: 600; font-size: 12.5px; }
.bulk-skips ul { margin: 8px 0 0; padding-left: 18px; font-size: 12.5px; line-height: 1.7; }

@media (max-width: 860px) {
  /* 860px is where phone.css turns the app over, not a number chosen here. */

  /* The selection bar is a fixed, centred flex row and it now carries four
     controls. At 375px it was wider than the screen, which pushed the menu
     button off the right edge and took the menu with it - measured at
     310..570 in a 375px viewport, so most of it was simply not there. It
     wraps and stays inside the screen instead. */
  .pick-bar {
    left: 12px; right: 12px; transform: none;
    flex-wrap: wrap; justify-content: center;
    max-width: none;
  }

  /* Anchored to the BAR rather than to its button. Positioning it against
     the button is what put it off-screen: the button's own position depends
     on how the bar happens to wrap, and at 375px that was 310..570 in a
     375px viewport.
     `.bulk-menu` goes static so the pop resolves against `.pick-bar`, which
     is `position: fixed` and therefore a containing block. That gives the
     full width of the bar and an upward open with no magic number - a
     `bottom` in pixels would have to guess how many rows the bar wrapped to. */
  .bulk-menu { position: static; }
  .bulk-pop {
    left: 0; right: 0;
    width: auto; min-width: 0;
    max-height: 52vh; overflow-y: auto;
  }
  .bulk-item { padding: 12px; font-size: 14px; }
}