/* ==========================================================================
   Property Tax & Assessment Lookup — page-specific styles.
   Everything here is unique to the search page. Anything reusable belongs in
   lisbon-design.css instead.
   ========================================================================== */

/* ------------------------------------------------------- search console --- */
.searchrow { display: flex; gap: .65rem; align-items: stretch; }
.searchfield { position: relative; flex: 1; display: flex; }
.searchbtns { display: flex; gap: .65rem; }

.facets {
  display: flex; gap: 1.9rem; flex-wrap: wrap;
  margin-top: 1.15rem; padding-top: 1.1rem; border-top: 1px solid var(--line-2);
}
.facet { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }

/* --------------------------------------------------------- results bar --- */
.resultbar { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin: 2rem 0 .95rem; }
.resultbar .count { color: var(--ink-2); font-size: .92rem; font-weight: 500; }
.resultbar .actions { margin-left: auto; display: flex; gap: .5rem; }

.morenote {
  padding: .7rem .9rem; font-size: .84rem; color: var(--slate);
  background: var(--cream-2); border-top: 1px solid var(--line-2); text-align: center;
}

/* ------------------------------------------------------- results table --- */
/* One <tbody class="pgroup"> per property. With a single fiscal year selected
   a property is one flat row; with several, a property row is followed by one
   indented row per year. Extra years become extra ROWS, never extra columns —
   that is what keeps the table inside the page width at every year count. */
table.results tbody.pgroup { cursor: pointer; }
table.results tbody.pgroup td { border-bottom: 1px solid var(--line-2); }
table.results tbody.pgroup tr.yr:not(:last-child) td { border-bottom: 1px dotted var(--line-2); }
table.results tbody.pgroup tr:last-child td { border-bottom: 1px solid var(--line); }
table.results tbody.pgroup:last-child tr:last-child td { border-bottom: 0; }

table.results tbody.pgroup:hover td { background: var(--blue-pale); }
table.results tbody.pgroup tr:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
table.results tbody.pgroup:focus-within td { background: var(--blue-pale); }

tr.phead td { border-bottom: 0; padding-bottom: .3rem; }
tr.yr td.indent { border-bottom: 0; }
tr.phead + tr.yr td { padding-top: .1rem; }
tr.yr:not(.solo) td.fy { padding-left: 0; }

td.addr { font-weight: 600; color: var(--heading); }
td.addr .addr-line { display: block; overflow: hidden; text-overflow: ellipsis; }
td.addr .addr-sub {
  display: block; font-weight: 400; font-size: .8rem; color: var(--slate);
  margin-top: .1rem; white-space: normal;
}
td.owner { color: var(--ink-2); font-weight: 400; overflow: hidden; text-overflow: ellipsis; }
td.parcel { color: var(--slate); font-size: .86rem; font-weight: 400; overflow: hidden; text-overflow: ellipsis; }

td.fy { font-size: .8rem; font-weight: 600; color: var(--slate); letter-spacing: .03em; }
td.fy.current { color: var(--navy); }
tr.yr:not(.solo) td.fy, tr.yr:not(.solo) td.num { color: var(--slate); }
tr.yr:not(.solo) td.fy.current, tr.yr:not(.solo):first-of-type td.num { color: var(--ink-2); }
tr.yr:not(.solo) td.tax .amount { font-weight: 700; color: var(--ink); }

td.tax { font-weight: 700; }
/* The flex box lives on this wrapper, not the <td>: making a table cell a flex
   container takes it out of the fixed table layout and its contents spill over
   the neighbouring columns on narrow screens. */
.taxwrap { display: flex; justify-content: flex-end; align-items: baseline; gap: .4rem; }
.taxwrap .amount { white-space: nowrap; }
/* The badge always occupies a slot, present or not, so the dollar figures stay
   in one column down the page. */
.taxwrap .delta { min-width: 3.6rem; text-align: center; flex: none; }

td.dash { color: var(--slate-2); font-weight: 400; font-size: .86rem; }
/* Beats `tbody.pgroup td { white-space: nowrap }` so this phrase can wrap. */
table.results tbody.pgroup td.dash { white-space: normal; }

.chev { color: var(--slate-2); text-align: right; }
table.results tbody.pgroup:hover .chev { color: var(--navy-3); }

col.c-addr   { width: 23%; }
col.c-owner  { width: 21%; }
col.c-parcel { width: 12%; }
col.c-fy     { width: 8%;  }
col.c-num    { width: 16%; }
col.c-chev   { width: 3%;  }

/* --------------------------------------------------- detail sheet extras --- */
.section-label {
  font-size: .68rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--slate); margin-bottom: .6rem;
}
.charthead { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .55rem; flex-wrap: wrap; }

.tablewrap { overflow-x: auto; border-radius: var(--r-sm); box-shadow: inset 0 0 0 1px var(--line-2); }
table.hist { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; font-size: .89rem; }
table.hist th, table.hist td { padding: .58rem .85rem; text-align: right; white-space: nowrap; }
table.hist th:first-child, table.hist td:first-child { text-align: left; }
table.hist thead th {
  background: var(--cream); border-bottom: 1px solid var(--line);
  font-size: .67rem; letter-spacing: .1em; text-transform: uppercase; color: var(--slate); font-weight: 700;
}
table.hist tbody tr + tr td { border-top: 1px solid var(--line-2); }
table.hist tbody tr:hover td { background: var(--surface-2); }
table.hist td.money { font-weight: 700; }
table.hist tr.current td { background: var(--blue-pale); }
table.hist tr.current:hover td { background: var(--blue-pale); }

/* ----------------------------------------------------------- responsive --- */
/* Narrow screens: app.js omits the owner, parcel and chevron cells entirely and
   folds owner+parcel under the address, so only sizing is left to do here.
   (display:none on a table cell would remove it from the column grid and shift
   every following cell one column left.) */
@media screen and (max-width: 860px) {
  table.results { font-size: .84rem; }
  table.results thead th { white-space: normal; }
  col.c-addr { width: 34%; }
  col.c-fy   { width: 18%; }
  col.c-num  { width: 24%; }
  .taxwrap { flex-wrap: wrap; row-gap: .12rem; }
  .taxwrap .delta { min-width: 0; }
  table.results tbody.pgroup td,
  table.results thead th { padding-inline: .5rem; }
}

@media screen and (max-width: 460px) {
  table.results { font-size: .78rem; }
  table.results tbody.pgroup td,
  table.results thead th { padding-inline: .35rem; }
  col.c-addr { width: 30%; }
  col.c-fy   { width: 19%; }
  col.c-num  { width: 25.5%; }
}

@media screen and (max-width: 620px) {
  .searchrow { flex-direction: column; }
  .searchbtns > .btn { flex: 1; justify-content: center; }
  .facets { gap: 1.1rem; flex-direction: column; align-items: flex-start; }
  .resultbar .actions { margin-left: 0; }
}

/* ---------------------------------------------------------------- print --- */
@media print {
  .resultbar .actions, .chev, .morenote, .charthead .chips,
  .sheet-body > div:last-child { display: none !important; }

  body[data-print="results"] .scrim { display: none !important; }
  .resultbar { margin: 0 0 .5rem; }
  table.results tbody.pgroup { break-inside: avoid; page-break-inside: avoid; }
  table.results tbody.pgroup td { border-bottom: 1px solid #EEE; }
  table.results tbody.pgroup tr:last-child td { border-bottom: 1px solid #BBB; }
  table.results tbody.pgroup:hover td { background: none; }
  td.addr { color: #000; }
  td.addr .addr-sub { display: none; }

  /* Paper is narrower than a desktop window: give the figures more of it. */
  col.c-addr   { width: 20%; }
  col.c-owner  { width: 19%; }
  col.c-parcel { width: 11%; }
  col.c-fy     { width: 9%;  }
  col.c-num    { width: 20%; }
  col.c-chev   { width: 1%;  }

  body[data-print="detail"] main,
  body[data-print="detail"] .resultbar { display: none !important; }
  body[data-print="detail"] .scrim {
    display: block !important; position: static; inset: auto;
    background: none; padding: 0; overflow: visible;
  }
  .sheet { width: 100%; border-radius: 0; box-shadow: none; overflow: visible; }
  .sheet-head {
    background: none !important; color: #000; padding: 0 0 .5rem;
    border-bottom: 1px solid #CFCFCF; margin-bottom: .9rem;
  }
  .sheet-head h2 { color: var(--navy); font-size: 15pt; }
  .sheet-head .sub { color: #444; }
  .sheet-body { padding: 0; gap: 1.1rem; }
  table.hist { font-size: 9pt; }
  table.hist thead th { background: none; border-bottom: 1.5px solid #000; }
  table.hist tr.current td { background: none; font-weight: 700; }
  .tablewrap { box-shadow: none; overflow: visible; }
}