/* Tracker — the classic KPI-tile page.
 *
 * Rendered for Classic, Ivory, Jarvis and Windows 2000; Arsenal and Arsenal Dark
 * get pages/tracker.css instead. tracker.js picks between them.
 *
 * Loaded AFTER tracker.css, and holds only what the classic page needs on top
 * of it. The forecast simulator, the policy pipeline and the popover chrome
 * are genuinely shared by both variants and live in tracker.css — duplicating
 * them here would mean fixing every future change twice.
 *
 * Only one selector actually collides: .tracker-page's padding. The classic
 * page is scoped .is-classic (set by tracker.js) so the two can coexist. */

.tracker-page.is-classic { padding: 32px 28px; }

/* ── Tile grid, measured against the pane ───────────────────────────────────
   .kpi-grid's own breakpoints (components/cards.css) are viewport media
   queries, and this page does not get the viewport: #content can hold two
   panes side by side, and the Tracker is a popout target besides. In a
   half-width pane on a 1600px monitor the ≥1400px rule still fires and packs
   ten tiles into ~600px — 46px a tile, every figure on top of its neighbour.

   .tracker-page carries "container: tracker" (pages/tracker.css), so the same
   thresholds re-expressed here read the column this page actually occupies.
   The numbers are the old ones less the sidebar and this page's padding.

   The first rule is not redundant: cards.css still applies its viewport rules
   to these tiles, and a container query that does not match cannot undo them.
   Something has to restate the default at a specificity that outranks them
   (0,3,0 against 0,1,0 — media queries add none), or the ten-column rule
   survives in exactly the case this section exists to fix.

   Left alone deliberately: Team, Admin and the member modal share .kpi-grid
   and none of them are containers, so every rule below is inert there and
   their viewport behaviour is untouched. */

.tracker-page.is-classic .kpi-grid {
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}

@container tracker (min-width: 1144px) {
  .tracker-page.is-classic .kpi-grid { grid-template-columns: repeat(10, minmax(0, 1fr)); }
}

@container tracker (min-width: 844px) and (max-width: 1143px) {
  .tracker-page.is-classic .kpi-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}

@container tracker (max-width: 464px) {
  .tracker-page.is-classic .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tracker-page.is-classic .kpi-card-wide { grid-column: 1 / -1; }
}

/* Tiles get narrow by design here — ten across is the point of the layout —
   so the figures have to be able to give way. A KPI value is money at full
   precision ($1,284,900) with no space in it to wrap at, which is what put
   one tile's number on top of the next one's. */
.tracker-page.is-classic .kpi-card { container: kpi-tile / inline-size; }

.tracker-page.is-classic .kpi-value {
  /* cqi is against the tile, not the page — a tile in the two-across layout
     is twice the width of one in the ten-across layout at the same page
     width, so sizing off the page would be sizing off the wrong box. */
  font-size: clamp(16px, 17cqi, 24px);
  overflow-wrap: anywhere;
}
.tracker-page.is-classic .kpi-label,
.tracker-page.is-classic .kpi-note { overflow-wrap: anywhere; }

/* ── Greeting ── */

.tracker-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  /* The right-hand cluster is a timeframe select plus, on Custom, two 140px
     date inputs and the gear. That does not fit beside the greeting in a
     half-width pane, and without wrapping it just overflows the page. */
  flex-wrap: wrap;
  margin-bottom: 24px;
}

/* min-width: 0 so the greeting is what gives way when the row is tight,
   rather than the controls it sits beside. */
.tracker-greeting-wrap { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.tracker-greeting-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.1;
  display: flex;
  align-items: center;
  gap: 6px;
}

#callback-bells {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.callback-bell {
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
  animation: bell-swing 0.5s ease-in-out;
  filter: drop-shadow(0 1px 3px rgba(181,137,58,0.4));
}

.callback-bell:hover { transform: scale(1.15); }

@keyframes bell-swing {
  0%   { transform: rotate(0deg); }
  20%  { transform: rotate(-15deg); }
  40%  { transform: rotate(12deg); }
  60%  { transform: rotate(-8deg); }
  80%  { transform: rotate(5deg); }
  100% { transform: rotate(0deg); }
}

.tracker-greeting-week {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: var(--text-muted);
  font-size: 15px;
}

.time-filter { width: 130px; }

.time-filter-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.time-filter-custom {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
/* `display: inline-flex` overrides the UA `[hidden] { display: none }`
   rule, so the inputs leak through when the user picks anything other
   than Custom. Re-assert the hidden behavior explicitly. */
.time-filter-custom[hidden] { display: none; }

.time-filter-date {
  width: 140px;
  max-width: 100%;
  padding: 6px 8px;
  font-size: 13px;
}

.time-filter-sep {
  font-size: 12px;
  color: var(--text-muted);
}

/* ── Card customize button + popover ── */

.tracker-header-right {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}

.tracker-edit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 5px;
  background: none;
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  transition: background var(--speed), border-color var(--speed);
}
.tracker-edit-btn:hover,
.tracker-edit-btn.active {
  background: var(--gold-soft);
  border-color: var(--gold);
}

.tracker-edit-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 500;
  width: 280px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(46,40,32,0.14);
  padding: 12px 0 8px;
}
.tracker-edit-popover[hidden] { display: none; }

.edit-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px 6px;
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
}

.edit-menu-reset {
  background: none;
  border: none;
  color: var(--gold);
  font-size: 12px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
}
.edit-menu-reset:hover { background: var(--gold-soft); }

.edit-menu-hint {
  padding: 0 14px 8px;
  font-size: 11px;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border-light);
}

.edit-menu-list {
  list-style: none;
  margin: 0;
  padding: 4px 0;
  max-height: 360px;
  overflow-y: auto;
}

.edit-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  cursor: grab;
  border-top: 2px solid transparent;
  border-bottom: 2px solid transparent;
  transition: background var(--speed);
}
.edit-menu-item:hover    { background: var(--bg-warm); }
.edit-menu-item.dragging { opacity: 0.4; }
.edit-menu-item.drop-above { border-top-color: var(--gold); }
.edit-menu-item.drop-below { border-bottom-color: var(--gold); }

.edit-menu-handle {
  color: var(--text-dim);
  font-size: 16px;
  line-height: 1;
  cursor: grab;
  user-select: none;
}

.edit-menu-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text);
  flex: 1;
  cursor: pointer;
}
.edit-menu-label input { margin: 0; cursor: pointer; }

/* ── Pencil button + state subtitle ── */
/* The subtitle sits directly to the left of the pencil button. Matches
   the .tracker-greeting-week style exactly per the user's spec so the
   header reads as a balanced pair (greeting subtitle on the left, KPI
   state subtitle next to the pencil on the right). */
.tracker-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tracker-edit-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.tracker-kpi-state {
  /* Mirrors .tracker-greeting-week (Cormorant Garamond italic, 15px, muted)
     so the two subtitles read as a matched pair across the header. */
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 15px;
  color: var(--text-muted);
  white-space: nowrap;
  line-height: 1.2;
}

/* ── Edit menu — extended sections (Timeframe, Cost basis) ── */

.edit-menu-section {
  padding: 10px 14px 12px;
  border-top: 1px solid var(--border-light);
}
.edit-menu-section:first-of-type { border-top: 0; }

.edit-menu-section-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 8px;
}

.edit-menu-section-hint {
  text-transform: none;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--text-dim);
  margin-left: 6px;
}

.edit-menu-section select.time-filter {
  width: 100%;
  margin-bottom: 8px;
}

.edit-menu-custom-range {
  display: flex;
  gap: 6px;
  align-items: center;
}
.edit-menu-custom-range[hidden] { display: none; }
.edit-menu-custom-range .time-filter-date { flex: 1; min-width: 0; }
.edit-menu-custom-range .time-filter-sep { font-size: 12px; color: var(--text-dim); }

.edit-menu-radio,
.edit-menu-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 0;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}
.edit-menu-radio input,
.edit-menu-check input {
  margin: 2px 0 0;
  cursor: pointer;
  flex-shrink: 0;
}

.edit-menu-radio-hint {
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 400;
}

/* Segmented control (used for the product-line picker in the popover) */
.edit-menu-segmented {
  display: inline-flex;
  background: var(--bg-warm, rgba(0,0,0,0.04));
  border-radius: 6px;
  padding: 2px;
  gap: 2px;
  width: 100%;
}
.edit-menu-seg {
  flex: 1;
  background: transparent;
  border: 0;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color var(--speed), color var(--speed);
}
.edit-menu-seg:hover { color: var(--text); }
.edit-menu-seg.is-active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}