/* ==========================================================
   Hampton Real Property Tax — Modern Stylesheet
   Designed to run inside a CivQuest Atlas iframe.

   Brand colors from City of Hampton official palette:
   Dark Blue  #044F7E    Bright Blue #31C4F3
   Light Blue #98E2F9    Red         #EF452A
   Yellow     #FDCA2F    Green       #88C338
   Teal       #0E98AE    Orange      #F95733
   Grey       #A8B9B7    Sand        #AA947D
   ========================================================== */

:root {
  /* ── Hampton brand palette ── */
  --brand:         #044F7E;
  --brand-dark:    #033553;
  --brand-bright:  #31C4F3;
  --brand-light:   #98E2F9;
  --brand-teal:    #0E98AE;
  --brand-red:     #EF452A;
  --brand-orange:  #F95733;
  --brand-yellow:  #FDCA2F;
  --brand-green:   #88C338;
  --brand-grey:    #A8B9B7;
  --brand-sand:    #AA947D;

  /* ── Derived UI tokens ── */
  --accent:        #0E98AE;
  --green:         #88C338;
  --amber:         #FDCA2F;
  --red:           #EF452A;

  --gray-50:       #f7f8f8;
  --gray-100:      #eef0f0;
  --gray-200:      #dce1e0;
  --gray-400:      #A8B9B7;
  --gray-500:      #7a8b89;
  --gray-700:      #3d4a48;
  --gray-900:      #1a2322;

  --radius:        0.75rem;
  --shadow:        0 1px 3px rgba(4,79,126,.08), 0 1px 2px rgba(4,79,126,.04);
  --font:          'DM Sans', system-ui, sans-serif;
  --mono:          'DM Mono', ui-monospace, monospace;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; }

body {
  font-family: var(--font);
  background: var(--gray-50);
  color: var(--gray-900);
  min-height: 100vh;
}

/* ── Header (compact — lives in iframe) ── */
.header {
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  border-bottom: 2px solid var(--brand-teal);
}
.header__inner {
  max-width: 64rem;
  margin: 0 auto;
  padding: 0.625rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.625rem;
}
.header__brand { display: flex; align-items: center; gap: 0.5rem; }
.header__icon {
  font-size: 1.125rem;
  width: 1.75rem; height: 1.75rem;
  display: grid; place-items: center;
  background: rgba(49,196,243,.2);
  border-radius: 0.375rem;
}
.header__title {
  color: #fff; font-size: 0.9rem; font-weight: 700;
  letter-spacing: -0.01em;
}
.header__subtitle {
  color: var(--brand-light); font-size: 0.65rem; letter-spacing: 0.03em;
}

/* ── Toolbar (Print / Export buttons) ── */
.toolbar { display: flex; gap: 0.375rem; }

.btn {
  font-family: var(--font);
  font-weight: 600; font-size: 0.75rem;
  padding: 0.35rem 0.65rem;
  border-radius: 0.375rem;
  border: none; cursor: pointer;
  transition: background .15s, color .15s;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  line-height: 1;
}
.btn--toolbar {
  background: rgba(152,226,249,.15);
  color: var(--brand-light);
  border: 1px solid rgba(152,226,249,.25);
}
.btn--toolbar:hover {
  background: rgba(152,226,249,.3);
  color: #fff;
}
.btn--toolbar svg { flex-shrink: 0; }

/* ── Main ── */
.main {
  max-width: 64rem;
  margin: 0 auto;
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ── Cards ── */
.card {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--gray-200);
  overflow: hidden;
}
.card--split { display: grid; grid-template-columns: 2fr 1fr; }
.card__left   { padding: 1.125rem; border-right: 1px solid var(--gray-100); }
.card__right  {
  padding: 1.125rem;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: linear-gradient(135deg, #fef9e7, #fdf3cd);
  text-align: center;
}
.card__heading {
  font-size: 0.85rem; font-weight: 700;
  padding: 0.625rem 1.125rem;
  border-bottom: 1px solid var(--gray-100);
  color: var(--brand);
}
.card__subheading {
  font-size: 0.7rem; font-weight: 600;
  padding: 0.35rem 1.125rem;
  border-bottom: 1px solid var(--gray-100);
  color: var(--gray-500);
}
.card__empty {
  padding: 0.625rem 1.125rem;
  font-size: 0.8rem;
  color: var(--gray-400);
  font-style: italic;
}

/* ── Property grid ── */
.label {
  font-size: 0.6rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--brand-teal);
}
.owner-name { font-size: 1.05rem; font-weight: 700; margin: 0.15rem 0 0.5rem; color: var(--brand); }
.address { font-size: 0.8rem; color: var(--gray-500); margin-bottom: 0.625rem; }
.prop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem 1.5rem; font-size: 0.8rem; }
.prop-grid div { display: flex; justify-content: space-between; }
.prop-grid dt { color: var(--gray-700); }
.prop-grid dd { font-family: var(--mono); font-weight: 500; color: var(--gray-700); }
.prop-grid .span-2 { grid-column: 1 / -1; }

/* ── Balance ── */
.balance {
  font-family: var(--mono); font-size: 1.5rem; font-weight: 700;
  margin: 0.15rem 0; color: var(--brand);
}
.balance--collection { color: var(--brand-red); }
.balance-date { font-size: 0.65rem; color: var(--brand-sand); }

/* ── Tables ── */
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.data-table th {
  background: #e9f2f7;
  text-align: left; padding: 0.45rem 0.5rem;
  font-size: 0.625rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--brand);
}
.data-table td { padding: 0.45rem 0.5rem; border-top: 1px solid var(--gray-100); }
.data-table tbody tr:hover { background: rgba(14,152,174,.04); }
.data-table tfoot td {
  border-top: 2px solid var(--brand-teal);
  background: #e9f2f7;
  font-weight: 600;
}
.data-table--compact td,
.data-table--compact th { padding: 0.325rem 0.45rem; }
.num, th.num { text-align: right; }
.mono { font-family: var(--mono); }
.small { font-size: 0.675rem; }
.bold { font-weight: 700; }
.text-green { color: var(--brand-green); }
.text-red { color: var(--brand-red); }

/* ── Yearly subtotal row in bills table ── */
.data-table .row-subtotal td {
  border-top: 1px solid var(--brand-teal);
  font-weight: 700;
  color: var(--brand);
}

/* ── Misc bill row (Admin Fee, Auction Costs, etc.) ── */
.data-table .row-misc td {
  font-weight: 600;
}

/* ── Accordion (native <details>) ── */
.accordion {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
}
.accordion + .accordion { margin-top: 0.5rem; }
.accordion__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.6rem 0.875rem;
  cursor: pointer; list-style: none;
  font-weight: 700; font-size: 0.85rem;
  color: var(--gray-900);
}
.accordion__header::marker { display: none; }
.accordion__title { display: flex; align-items: center; gap: 0.4rem; }
.accordion__totals { display: flex; gap: 1rem; font-size: 0.75rem; font-family: var(--mono); }
.section-heading { font-size: 0.9rem; font-weight: 700; margin-bottom: 0.5rem; color: var(--brand); }

/* ── Badges ── */
.badge {
  font-size: 0.55rem; font-weight: 700;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  letter-spacing: .04em;
}
.badge--paid { background: #eef8e4; color: #4a7a10; }
.badge--due  { background: #fef3e2; color: #b44a12; }

.txn-badge {
  font-size: 0.6rem; font-weight: 600;
  padding: 0.1rem 0.4rem; border-radius: 0.2rem;
  letter-spacing: .03em;
}
.txn-badge--bill    { background: #e6f6fb; color: var(--brand); }
.txn-badge--payment { background: #eef8e4; color: #4a7a10; }
.txn-badge--credit  { background: #fef8e1; color: #8a6d00; }
.txn-badge--refund  { background: #fde8e4; color: #b52a14; }

/* ── Notice (default: Tax Relief) ── */
.notice {
  border-radius: var(--radius);
  border: 1px solid rgba(239,69,42,.3);
  background: #fde8e4;
  padding: 0.625rem 0.875rem;
  font-size: 0.75rem;
  color: var(--brand-red);
  line-height: 1.5;
  font-weight: 600;
}

/* ── Notice (collection / tax-sale account) ── */
.notice--collection {
  background: #fff;
  border: 2px solid var(--brand);
  color: var(--gray-900);
  font-weight: 400;
  padding: 1rem 1.25rem;
}
.notice--collection .notice__title {
  font-weight: 800;
  font-size: 0.9rem;
  text-align: center;
  margin-bottom: 0.5rem;
  color: var(--brand-red);
}
.notice--collection p {
  margin: 0.4rem 0;
}
.notice--collection .notice__urgent {
    font-weight: 700;
    color: var(--brand-red);
}

/* ── Alert ── */
.alert { padding: 0.625rem 0.875rem; border-radius: var(--radius); font-size: 0.8rem; }
.alert--error {
  background: #fde8e4;
  border: 1px solid rgba(239,69,42,.3);
  color: #8c1f0c;
}

/* ── Footer ── */
.footer {
  max-width: 64rem; margin: 0 auto;
  padding: 0.75rem 1.25rem;
  text-align: center;
  font-size: 0.65rem;
  color: var(--brand-sand);
  border-top: 1px solid var(--gray-200);
}

/* ── Responsive (tight iframe widths + phones) ── */
@media (max-width: 640px) {
  .card--split { grid-template-columns: 1fr; }
  .card__left  { border-right: none; border-bottom: 1px solid var(--gray-100); }
  .prop-grid   { grid-template-columns: 1fr; }
  .accordion__header { flex-direction: column; align-items: flex-start; gap: 0.3rem; }
  .accordion__totals { font-size: 0.7rem; }
  .header__inner { flex-direction: column; align-items: flex-start; }
  .toolbar { width: 100%; justify-content: flex-end; }

  /* ── Table → stacked cards ── */
  .data-table thead { display: none; }

  .data-table tbody tr {
    display: block;
    border: 1px solid var(--gray-200);
    border-radius: 0.5rem;
    padding: 0.625rem 0.75rem;
    margin-bottom: 0.5rem;
    background: #fff;
  }
  .data-table tbody tr:hover { background: #fff; }

  .data-table td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.2rem 0;
    border-top: none;
    font-size: 0.8rem;
  }
  .data-table td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--brand);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    flex-shrink: 0;
    margin-right: 0.75rem;
  }
  .data-table td:empty { display: none; }

  /* Subtotal rows stay full-width */
  .data-table .row-subtotal td {
    display: block;
    text-align: right;
  }
  .data-table .row-subtotal td::before { display: none; }
  .data-table .row-subtotal td[colspan] {
    display: none;
  }

  /* Footer row */
  .data-table tfoot tr {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
  }
  .data-table tfoot td {
    display: block;
    padding: 0;
    border: none;
  }
  .data-table tfoot td::before { display: none; }

  /* Misc bill cards */
  .data-table .row-misc td::before {
    content: attr(data-label);
  }
}


/* ==========================================================
   PRINT STYLES
   ========================================================== */
@media print {
  .no-print, .toolbar { display: none !important; }

  body {
    background: #fff !important;
    color: #000 !important;
    font-size: 9pt;
  }

  .header {
    background: none !important;
    border-bottom: 2px solid var(--brand);
  }
  .header__title { color: var(--brand) !important; font-size: 12pt; }
  .header__subtitle { color: var(--brand-teal) !important; }
  .header__icon { display: none; }

  .card, .accordion {
    box-shadow: none !important;
    border-radius: 0 !important;
    border: 1px solid #bbb;
    break-inside: avoid;
  }
  .card__right { background: none !important; border-left: 1px solid #bbb; }

  details.accordion[open] > summary ~ * { display: block !important; }

  .badge, .txn-badge {
    background: none !important;
    border: 1px solid #999;
    color: #000 !important;
  }

  .data-table td, .data-table th { padding: 0.2rem 0.35rem; }
  .data-table th { background: #f0f0f0 !important; }
  .data-table tbody tr:hover { background: none !important; }

  .footer { border-top: 1px solid #000; color: #000; }
  section, .accordion { break-inside: avoid; }
}