/* traffic-screen.css — the long version of the message strip, on the Reports
 * route. Absolute inside <main>, made a positioning context by an attribute
 * rather than an inline style: Vue owns that element's `style`.
 */
[data-crm-traffic-host] { position: relative; }

.crm-traffic {
  --tr-ink: #1d1b1c;
  --tr-muted: #55606c;
  --tr-line: #e8ebe4;
  --tr-card: #ffffff;
  --tr-soft: #f6f7f3;
  --tr-blue: var(--crm-ink);
  --tr-warn: var(--crm-alert-ink, #c8243b);

  position: absolute;
  inset: 0;
  z-index: 60;
  overflow: auto;
  padding: 22px 24px 40px;
  background: var(--tr-soft);
  color: var(--tr-ink);
  text-align: start;
}

:root.dark .crm-traffic, .dark .crm-traffic, [data-theme="dark"] .crm-traffic {
  --tr-ink: #e8eaed;
  --tr-muted: #9aa3af;
  --tr-line: #2c3138;
  --tr-card: #1b1e23;
  --tr-soft: #15181c;
  /* Dark mode's accent is the platform's own lime (#d4fb08), not the light
     mode blue: the dashboard around these screens turns lime in the dark,
     and a blue control inside it reads as a foreign screen. */
  --tr-blue: #d4fb08;
  --tr-warn: var(--crm-alert-ink, #c8243b);
}

.crm-traffic * { box-sizing: border-box; }
.crm-traffic button, .crm-traffic a, .crm-traffic input, .crm-traffic select { font: inherit; }

.crm-traffic__head { margin-bottom: 14px; }
.crm-traffic__title { margin: 0 0 4px; font-size: 21px; font-weight: 700; letter-spacing: -0.01em; }
.crm-traffic__sub { margin: 0; max-width: 78ch; font-size: 13px; line-height: 1.7; color: var(--tr-muted); }

.crm-traffic__bar {
  display: flex; flex-wrap: wrap; gap: 7px; align-items: center;
  padding: 10px 12px; margin-bottom: 14px;
  border: 1px solid var(--tr-line); border-radius: 8px; background: var(--tr-card);
}
.crm-traffic .crm-traffic__chip {
  padding: 5px 12px; border: 1px solid var(--tr-line); border-radius: 999px;
  background: transparent; color: var(--tr-muted); font-size: 12.5px; cursor: pointer; white-space: nowrap;
}
.crm-traffic .crm-traffic__chip:hover { border-color: var(--tr-blue); color: var(--tr-blue); }
.crm-traffic .crm-traffic__chip.is-on {
  border-color: color-mix(in srgb, var(--tr-blue) 40%, transparent);
  background: color-mix(in srgb, var(--tr-blue) 10%, transparent);
  color: var(--tr-blue); font-weight: 600;
}
.crm-traffic__lbl { font-size: 12px; color: var(--tr-muted); margin-inline-start: 4px; }
/* The dashboard stretches every `input[type]` to its row through a selector
   with a dozen :not() clauses; `.reset-base` is that selector's own way out. */
.crm-traffic .crm-traffic__in {
  width: auto; flex: 0 0 auto; height: 32px; margin: 0; padding: 4px 9px;
  border: 1px solid var(--tr-line); border-radius: 8px;
  background: var(--tr-card); color: var(--tr-ink); font-size: 12.5px;
}
.crm-traffic select.crm-traffic__in { max-width: 210px; }
.crm-traffic .crm-traffic__csv {
  margin-inline-start: auto; padding: 6px 14px;
  border: 1px solid var(--tr-line); border-radius: 8px;
  background: var(--tr-card); color: var(--tr-ink);
  font-size: 12.5px; font-weight: 600; text-decoration: none; cursor: pointer;
}
.crm-traffic .crm-traffic__csv:hover { border-color: var(--tr-blue); color: var(--tr-blue); }

.crm-traffic__tiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px;
}
.crm-traffic__tile {
  padding: 12px 14px; border: 1px solid var(--tr-line); border-radius: 8px; background: var(--tr-card);
}
.crm-traffic__v { font-size: 23px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }
.crm-traffic__l { font-size: 12px; color: var(--tr-muted); margin-top: 3px; }
.crm-traffic__n { font-size: 11px; color: var(--tr-muted); margin-top: 4px; opacity: .85; }
.crm-traffic__tile.is-warn .crm-traffic__v { color: var(--tr-warn); }

.crm-traffic__card {
  padding: 14px; margin-bottom: 14px;
  border: 1px solid var(--tr-line); border-radius: 8px; background: var(--tr-card);
}
.crm-traffic__cardhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.crm-traffic__cardtitle { margin: 0; font-size: 14px; font-weight: 700; }
.crm-traffic__hint { font-size: 12px; color: var(--tr-muted); }

.crm-traffic__hours { display: grid; grid-template-columns: repeat(24, 1fr); gap: 3px; height: 104px; align-items: end; }
.crm-traffic__hour { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.crm-traffic__hourbar { border-radius: 4px 4px 0 0; background: color-mix(in srgb, var(--tr-blue) 32%, transparent); min-height: 2px; }
.crm-traffic__hour.is-peak .crm-traffic__hourbar { background: var(--tr-blue); }
.crm-traffic__tick { height: 14px; margin-top: 4px; font-size: 9.5px; color: var(--tr-muted); text-align: center; white-space: nowrap; }

.crm-traffic__pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.crm-traffic__pair .crm-traffic__card { margin-bottom: 14px; }
.crm-traffic__split { display: grid; grid-template-columns: minmax(90px, 180px) 1fr 56px; gap: 10px; align-items: center; margin-bottom: 7px; }
.crm-traffic__splitname { font-size: 12.5px; color: var(--tr-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; unicode-bidi: plaintext; }
.crm-traffic__track { height: 14px; border-radius: 999px; background: var(--tr-soft); overflow: hidden; }
.crm-traffic__fill { height: 100%; border-radius: 999px; background: color-mix(in srgb, var(--tr-blue) 70%, #ffffff); }
.crm-traffic__splitv { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: end; }

.crm-traffic .crm-traffic__row {
  display: flex; align-items: center; gap: 10px; justify-content: space-between;
  padding: 9px 11px; margin-bottom: 6px;
  border: 1px solid var(--tr-line); border-radius: 8px;
  background: var(--tr-soft); color: inherit; text-decoration: none;
}
.crm-traffic .crm-traffic__row:hover { border-color: var(--tr-blue); }
.crm-traffic__name { font-size: 13px; font-weight: 600; unicode-bidi: plaintext; }
.crm-traffic__meta { font-size: 11px; color: var(--tr-muted); margin-top: 2px; }
.crm-traffic__marks { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.crm-traffic__tag {
  padding: 2px 8px; border-radius: 999px; border: 1px solid var(--tr-line);
  font-size: 10.5px; color: var(--tr-muted); white-space: nowrap;
}
.crm-traffic__tag.is-warn { border-color: var(--tr-warn); color: var(--tr-warn); }
.crm-traffic__dim { font-size: 12.5px; color: var(--tr-muted); padding: 6px 0; line-height: 1.7; }

/* ---- respond.io's shape (owner, 2026-09-29), the same as the reports ----
   A white page, the name small over a hairline, hairline cards, figures at
   28px, the hour bars in the reports' soft lime with the busiest hour
   stronger, 32px controls. */
.crm-traffic { --tr-line: rgba(53, 60, 69, .16); --tr-soft: #ffffff; --tr-bar: #dcef7e; --tr-bar-on: #b2cc22; }
:root.dark .crm-traffic, .dark .crm-traffic, [data-theme="dark"] .crm-traffic { --tr-line: #2c3138; --tr-soft: #15181c; --tr-bar: rgba(212, 251, 8, .42); --tr-bar-on: #d4fb08; }
.crm-traffic__head { padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--tr-line); }
.crm-traffic__title { font-size: 16px; font-weight: 600; letter-spacing: 0; }
.crm-traffic__bar { padding: 0; border: 0; background: transparent; }
.crm-traffic .crm-traffic__chip { height: 32px; padding: 0 12px; border-radius: 8px; font-size: 14px; color: var(--tr-ink); transition: background-color .15s cubic-bezier(.4, 0, .2, 1); }
.crm-traffic .crm-traffic__chip:hover { border-color: var(--tr-line); color: var(--tr-ink); background: #f5f6f7; }
.crm-traffic .crm-traffic__chip.is-on { border-color: var(--tr-line); background: #f2f2f3; color: var(--tr-ink); }
:root.dark .crm-traffic .crm-traffic__chip.is-on, .dark .crm-traffic .crm-traffic__chip.is-on { background: rgba(255, 255, 255, .08); }
.crm-traffic .crm-traffic__in { font-size: 14px; }
.crm-traffic .crm-traffic__csv { height: 32px; display: inline-flex; align-items: center; font-size: 14px; }
.crm-traffic .crm-traffic__csv:hover { background: #1877f2; border-color: #1877f2; color: #fff; }
.crm-traffic__v { font-size: 28px; font-weight: 600; }
.crm-traffic__l { font-size: 14px; }
.crm-traffic__hourbar { background: var(--tr-bar); transition: background-color .15s cubic-bezier(.4, 0, .2, 1); }
.crm-traffic__hour.is-peak .crm-traffic__hourbar, .crm-traffic__hour:hover .crm-traffic__hourbar { background: var(--tr-bar-on); }
.crm-traffic__cardtitle { font-weight: 600; }