/* Colors and type follow the Refuge Memorial agent portal (app.refugememorial.com). */
:root {
  color-scheme: light;
  --page: #f6f4ee;          /* portal cream */
  --surface: #ffffff;
  --ink: #0b1a3d;           /* portal navy */
  --ink-2: #5b6474;
  --muted: #7f8a9e;
  --hairline: #e7e3d8;      /* warm divider, as under the portal header */
  --card-border: #d7dfea;   /* portal --border; used for internal hairlines (table header rule, tooltip), not the card ring */
  --control-border: #7f8a9e;
  --brand: #2447f0;         /* portal blue */
  --brand-tint: #e7ebfc;
  --critical: #ef4444;      /* portal --destructive */
  --critical-text: #b91c1c;
  --good: #15803d;          /* portal green, darkened so the small icon stays legible */
  --shadow: 0 4px 16px rgba(11, 26, 61, 0.12);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 14px/1.45 ui-sans-serif, system-ui, sans-serif;
}

h1 { margin: 0; font: 500 32px/1.15 ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; letter-spacing: -0.01em; }
h2 { margin: 0; font-size: 17px; font-weight: 500; }

.page { max-width: 1040px; margin: 0 auto; padding: 24px 16px 56px; }
.sub { margin: 4px 0 0; color: var(--ink-2); }
.card { background: var(--surface); border: 1px solid var(--brand); border-radius: 16px; }

.page-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
.brand { display: flex; align-items: center; gap: 12px; }
.head-actions { display: flex; align-items: center; gap: 12px; }
.head-actions .sub { margin: 0; }

.logo { display: block; height: 40px; width: auto; }

.chip { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--brand-tint); color: var(--brand); font-size: 12px; font-weight: 600; }

/* Buttons and inputs */
.btn {
  min-height: 36px; padding: 0 14px;
  border: 1px solid var(--brand); border-radius: 6px;
  background: var(--surface); color: var(--brand);
  font: inherit; font-weight: 500; cursor: pointer;
}
.btn:hover { background: var(--brand-tint); }
.btn[aria-pressed="true"], .btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn[aria-pressed="true"]:hover, .btn-primary:hover { background: var(--brand); opacity: 0.9; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

input {
  min-height: 36px; padding: 0 10px;
  border: 1px solid var(--control-border); border-radius: 6px;
  background: var(--surface); color: var(--ink);
  font: inherit;
}
input:focus { border-color: var(--brand); }
.mult { width: 72px; }

/* Filters */
/* The two cards fill the row between them, so there's no leftover blank space -
   acquisition cost takes roughly one tile's width (matching the averages row
   below it), and the filters card takes whatever's left, which is most of it.
   Narrower than both comfortably fit (including every phone), they wrap - cost
   card second, under the filters, since the date range is what you'd reach for
   first. */
.top-row { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 16px; align-items: stretch; }
.controls { display: flex; flex-direction: column; gap: 12px; padding: 16px; flex: 1 0 420px; }
.acq-feature { flex: 0 0 25%; min-width: 200px; display: flex; flex-direction: column; justify-content: center; }
.presets { display: flex; flex-wrap: wrap; gap: 8px; }
.fields { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.field { display: flex; align-items: center; gap: 8px; color: var(--ink-2); }

/* Banner */
#banner:not(:empty) { margin-bottom: 16px; }
.banner { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border: 1px solid var(--brand); border-radius: 16px; background: var(--surface); }
.banner svg { flex: none; margin-top: 2px; }
.banner strong { display: block; font-weight: 600; }
.banner span { color: var(--ink-2); }
.banner-critical { border-color: var(--critical); background: color-mix(in srgb, var(--critical) 8%, var(--surface)); }
.banner-critical svg { color: var(--critical); }
.banner-good svg { color: var(--good); }

/* Summary tiles. The top group (averages) has 1-4 tiles depending on what's
   configured; the bottom group (totals) is always exactly 2. Each count gets its
   own even split so a quiet row (e.g. just "Average per agent" today) still reads
   as one deliberate card, not a quarter-width stub with empty space beside it. */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.tiles.tiles-count-1 { grid-template-columns: 1fr; }
.tiles.tiles-count-2 { grid-template-columns: repeat(2, 1fr); }
.tiles.tiles-count-3 { grid-template-columns: repeat(3, 1fr); }
/* The top tiles get their gap from the margin above - the bottom group needs its
   own, since nothing else separates it from the chart card right above it. */
#tiles-bottom { margin-top: 16px; }
.tile { padding: 14px 16px; }
.tile-label { color: var(--ink-2); font-size: 13px; }
.tile-value { margin-top: 4px; font-size: 28px; font-weight: 600; line-height: 1.1; }

/* Table */
.table-card { padding: 4px 0 8px; overflow: hidden; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 20px; padding: 10px 16px 6px; color: var(--ink-2); font-size: 13px; }
.legend-item { display: inline-flex; align-items: center; gap: 8px; }
.key-bar { width: 16px; height: 8px; border-radius: 0 4px 4px 0; background: var(--brand); }
.key-line { width: 2px; height: 14px; background: var(--ink-2); }
.key-line.critical { background: var(--critical); }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
th { padding: 8px 12px; border-bottom: 1px solid var(--card-border); color: var(--ink-2); font-size: 12px; font-weight: 600; text-align: left; white-space: nowrap; }
td { padding: 0 12px; border-bottom: 1px solid var(--hairline); height: 36px; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: color-mix(in srgb, var(--brand-tint) 50%, transparent); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.th-btn { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.th-btn:hover { color: var(--ink); }
th[aria-sort="ascending"] .th-btn::after { content: " \25B2"; font-size: 9px; }
th[aria-sort="descending"] .th-btn::after { content: " \25BC"; font-size: 9px; }
/* The phone-only column picker (see the mobile media query below) and the value it
   switches to - both inert everywhere else. */
.mobile-metric-select { display: none; }
.mobile-metric-value { display: none; }

.col-agent { width: 126px; }
.col-leads { width: 70px; }
.col-appts { width: 112px; }
.col-lar { width: 100px; }
.col-sales { width: 64px; }
.col-asr { width: 90px; }
.col-acq { width: 116px; }
.col-dist { width: 84px; }
.col-ratio { width: 82px; }
.col-status { width: 140px; }

/* The table's columns add up to more than fits in a narrower (non-mobile) browser
   window. Rather than let the one column with no fixed width (Distribution) get
   squeezed to nothing, the table gets a floor and scrolls sideways below it. */
.table-scroll { overflow-x: auto; }
table { width: 100%; min-width: 1002px; border-collapse: collapse; table-layout: fixed; }

td.col-agent { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-name { font-weight: 500; }
tr.flagged, tr.flagged:hover { background: color-mix(in srgb, var(--critical) 8%, transparent); }
tr.flagged .agent-name, tr.flagged .num { font-weight: 700; }

/* Bars: 36px-tall track so the reference lines read as continuous down the column */
.track { position: relative; height: 36px; }
.bar { position: absolute; left: 0; top: 11px; height: 14px; min-width: 2px; border-radius: 0 4px 4px 0; background: var(--brand); }
tr.flagged .bar { background: var(--critical); }
.ref-line { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--ink-2); opacity: 0.55; }
.ref-line.critical { background: var(--critical); opacity: 1; }

.status { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); }
.status svg { flex: none; }
.status-flag svg { color: var(--critical); }
.status-flag { color: var(--ink); font-weight: 600; }

.empty, .error { padding: 32px 16px; text-align: center; color: var(--ink-2); }
.error .btn { margin-top: 12px; }
#results[aria-busy="true"] { opacity: 0.5; transition: opacity 0.15s; }

.notes { margin-top: 12px; color: var(--ink-2); font-size: 13px; }
.notes p { margin: 4px 0; }

/* Tooltip */
.tooltip { position: fixed; top: 0; left: 0; z-index: 20; max-width: 280px; padding: 8px 10px; border: 1px solid var(--card-border); border-radius: 8px; background: var(--surface); box-shadow: var(--shadow); font-size: 13px; pointer-events: none; }
.tooltip strong { display: block; }

/* Login */
.overlay { position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(11, 26, 61, 0.45); }
.login-card { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 340px; padding: 24px; box-shadow: var(--shadow); }
.login-card h2 { font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 22px; }
.login-card .logo { align-self: flex-start; height: 28px; margin-bottom: 4px; }
.login-card .sub { margin: -6px 0 0; }
.login-error { min-height: 1.4em; margin: 0; color: var(--critical-text); }

@media (max-width: 720px) {
  .logo { height: 32px; }
  /* Both go full-width and stack - no spare row width to split between them here. */
  .controls, .acq-feature { flex-basis: 100%; }
  /* Always 2 columns on a phone, whatever the desktop count-class says. An odd
     tile out (e.g. a lone "Average per agent", or 3 top tiles) spans both columns
     so it isn't left half-width next to an empty slot - true exactly when the
     last tile's position among its siblings is itself odd. */
  .tiles, .tiles.tiles-count-1, .tiles.tiles-count-2, .tiles.tiles-count-3 { grid-template-columns: repeat(2, 1fr); }
  .tiles .tile:nth-child(odd):last-child { grid-column: span 2; }
  th, td { padding-left: 8px; padding-right: 8px; }
  .col-ratio, .col-appts, .col-lar, .col-sales, .col-asr, .col-acq { display: none; }
  /* With those columns gone, what's left comfortably fits without the desktop
     floor that exists to stop the wider table from squeezing a column to nothing. */
  table { min-width: 0; }
  .col-agent { width: 116px; }
  /* Wider than a bare lead count needs, since this column doubles as whichever
     metric is picked below - a dollar figure needs the extra room. */
  .col-leads { width: 104px; }
  .col-status { width: 36px; }
  /* On a phone, the Leads header becomes a picker for which single metric shows in
     that column, since there's no room for the rest - tapping it replaces the sort
     button, which only ever sorted that one column anyway, and nothing is lost that
     isn't already hidden on this screen. Picking anything but Leads swaps the
     column's numbers to match and drops the Distribution bar, since that bar is a
     picture of leads specifically and would be wrong for whatever else is shown. */
  .col-leads .th-btn { display: none; }
  /* Blue, like every other control on the page, with its own chevron (the native
     one doesn't reliably pick up text color across browsers) so it reads as a
     picker rather than a plain header label. #2447f0 below is --brand, hardcoded
     because a custom property can't be used inside an embedded SVG's own color. */
  .mobile-metric-select {
    display: block; width: 100%; min-height: 0; margin: 0;
    padding: 3px 18px 3px 6px; border: 1px solid var(--brand); border-radius: 6px; background-color: transparent;
    color: var(--brand); font: inherit; font-weight: 700; text-overflow: ellipsis;
    -webkit-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%232447f0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 5px center; background-size: 12px;
  }
  table.mobile-metric-active .leads-value { display: none; }
  table.mobile-metric-active .mobile-metric-value { display: inline; }
  table.mobile-metric-active .col-dist { display: none; }
  /* Icon-only status on phones; keep the words for screen readers. */
  .status-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* On a wide monitor with the browser maximized, the page was sitting narrow and
   centered with a lot of unused space either side. Above this width, the page
   itself grows and everything in it - text, controls, table columns - grows with
   it, rather than just stretching the same small text across more whitespace.
   Below this width (including the narrower-desktop range right above mobile,
   which already has its own careful fit) nothing here applies, so that range
   is untouched. Not applied on phones, where there's no spare width to spend and
   bigger text would just mean more scrolling. */
@media (min-width: 1280px) {
  .page { max-width: 1600px; padding: 32px 24px 64px; }
  body { font: 18px/1.45 ui-sans-serif, system-ui, sans-serif; }
  h2 { font-size: 24px; }
  .logo { height: 56px; }
  .chip { font-size: 15px; padding: 3px 12px; }

  .btn { min-height: 48px; padding: 0 20px; }
  input { min-height: 48px; padding: 0 14px; }
  .mult { width: 96px; }

  .top-row { gap: 20px; }
  .controls { padding: 22px; gap: 16px; flex-basis: 560px; }
  .tiles { gap: 16px; }
  .tile { padding: 22px 24px; }
  .tile-label { font-size: 16px; }
  .tile-value { font-size: 42px; }
  .acq-feature { min-width: 220px; }

  .banner { padding: 16px 22px; }
  .banner svg { width: 22px; height: 22px; }

  .legend { font-size: 16px; }
  .key-bar { width: 20px; height: 10px; }
  .key-line { height: 18px; }
  th { padding: 12px 16px; font-size: 15px; }
  td { padding: 0 16px; height: 48px; }
  .track { height: 48px; }
  .bar { top: 15px; height: 18px; }
  .status { font-size: 16px; }
  .status svg { width: 22px; height: 22px; }
  .notes { font-size: 16px; }
  .tooltip { font-size: 16px; }

  /* Same columns, re-tuned for the bigger font so nothing is tight the way the
     base sizes are tuned for the base font - the table's own floor grows to match,
     so the "scroll sideways below the floor" behavior still works below this width. */
  .col-agent { width: 176px; }
  .col-leads { width: 95px; }
  .col-appts { width: 150px; }
  .col-lar { width: 135px; }
  .col-sales { width: 88px; }
  .col-asr { width: 122px; }
  .col-acq { width: 158px; }
  .col-dist { width: 114px; }
  .col-ratio { width: 112px; }
  .col-status { width: 190px; }
  table { min-width: 1362px; }
}