:root {
  --ips-blue: #0c2340;
  --ips-orange: #ff6700;
  --ips-grey: #dddddd;
  --ips-blue-dark: #081729;
  --text: #1a1a1a;
  --bg: #f5f6f7;
  --card-bg: #ffffff;
  --border: #d8dadd;
  --danger: #b3261e;
  --success: #1e7a34;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
}

a { color: var(--ips-blue); }

.topbar {
  background: var(--ips-blue);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem;
}

.topbar .brand {
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.02em;
  color: #fff;
  text-decoration: none;
}

.topbar nav a {
  color: #fff;
  text-decoration: none;
  margin-left: 1.25rem;
  font-size: 0.95rem;
  opacity: 0.9;
}
.topbar nav a:hover { opacity: 1; text-decoration: underline; }

.flash {
  padding: 0.75rem 1.25rem;
  font-size: 0.95rem;
}
.flash.success { background: #e4f4e8; color: var(--success); }
.flash.error { background: #fbe9e7; color: var(--danger); }

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.25rem;
}

/* Buttons -- big, obvious, thumb-friendly everywhere */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.65rem 1.1rem;
  min-height: 44px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  background: var(--ips-grey);
  color: var(--text);
}
.btn-primary { background: var(--ips-orange); color: #fff; }
.btn-secondary { background: #fff; border-color: var(--border); color: var(--ips-blue); }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Badges -- persistent, unmissable */
.badge {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.badge-private { background: var(--ips-grey); color: #333; }
.badge-shared { background: #dff0ff; color: #0b5cab; }
.badge-active { background: #e4f4e8; color: var(--success); }
.badge-deceased { background: #eee; color: #666; }
.badge-inactive { background: #eee; color: #999; }
.badge-cold { background: #e6f0fb; color: #1a5fa8; }
.badge-failed { background: #fbe9e7; color: var(--danger); }

.last-contacted { font-size: 0.85rem; color: #666; margin: -0.5rem 0 1rem; }

.pending-banner {
  background: #fff6e8;
  border: 1px solid #f0d9a8;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  margin-bottom: 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.meetings-log { list-style: none; margin: 0; padding: 0; }
.meetings-log li { padding: 0.6rem 0; border-bottom: 1px solid var(--border); }
.meetings-log .meta { font-size: 0.85rem; color: #666; }
.meetings-log .meta a { margin-left: 0.5rem; }

/* Search-first layout */
.search-bar {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.search-bar input[type="search"] {
  flex: 1;
  padding: 0.65rem 0.9rem;
  font-size: 1rem;
  min-height: 44px;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.search-bar select {
  padding: 0.65rem 0.9rem;
  font-size: 1rem;
  min-height: 44px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  max-width: 220px;
}

.split-view {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 1.25rem;
  align-items: start;
}

.panel {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  font-size: 0.85rem;
  color: #666;
}
.pagination .btn { min-height: 36px; padding: 0.4rem 0.8rem; font-size: 0.85rem; }

.contact-list { list-style: none; margin: 0; padding: 0; max-height: 75vh; overflow-y: auto; }
.contact-list li a {
  display: block;
  padding: 0.85rem 1rem;
  text-decoration: none;
  color: var(--text);
  border-bottom: 1px solid var(--border);
}
.contact-list li a:hover, .contact-list li a.active { background: #f0f4fa; }
.contact-list .name { font-weight: 600; }
.contact-list .company { color: #555; font-size: 0.9rem; }
.contact-list .badges { margin-top: 0.25rem; }
.contact-list .badges .badge { margin-right: 0.3rem; }

.detail-empty {
  padding: 3rem 1.5rem;
  text-align: center;
  color: #888;
}

.contact-card { padding: 1.5rem; }
.contact-card h1 { margin: 0 0 0.2rem; color: var(--ips-blue); }
.contact-card .subtitle { color: #555; margin-bottom: 0.75rem; }
.contact-card .badges { margin-bottom: 1rem; }
.contact-card .badges .badge { margin-right: 0.4rem; }

.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 1.5rem;
  margin: 1rem 0;
}
.field-grid dt { font-size: 0.75rem; text-transform: uppercase; color: #888; margin: 0; }
.field-grid dd { margin: 0 0 0.6rem; font-size: 1rem; }

.actions-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0; }
.actions-row form.inline { display: flex; }
.actions-row form.inline .btn { width: 100%; }

.section-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ips-blue);
  border-bottom: 2px solid var(--ips-grey);
  padding-bottom: 0.3rem;
  margin: 1.5rem 0 0.75rem;
}

.affiliation { padding: 0.6rem 0; border-bottom: 1px solid var(--border); }
.affiliation .role { font-weight: 600; }
.affiliation .meta { font-size: 0.85rem; color: #666; }

.notes-log { list-style: none; margin: 0; padding: 0; }
.notes-log li { padding: 0.6rem 0; border-bottom: 1px solid var(--border); }
.notes-log .note-meta { font-size: 0.8rem; color: #888; margin-bottom: 0.2rem; }
.notes-log .note-body { white-space: pre-wrap; }

.note-form textarea {
  width: 100%;
  min-height: 70px;
  padding: 0.6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 1rem;
}

.share-history { font-size: 0.85rem; color: #555; }
.share-history li { padding: 0.3rem 0; }

form.inline { display: inline; }

.form-page { max-width: 640px; margin: 0 auto; }
.form-row { margin-bottom: 1rem; }
.form-row label { display: block; font-weight: 600; margin-bottom: 0.3rem; }
.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="date"],
.form-row input[type="password"],
.form-row select,
.form-row textarea {
  width: 100%;
  padding: 0.6rem;
  min-height: 44px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 1rem;
  font-family: inherit;
}
.form-errors { color: var(--danger); font-size: 0.85rem; margin-top: 0.25rem; }

/* Checkbox-list rep picker (addendum #16) -- every option visible and
   individually tappable, no modifier-key multi-select behavior to learn. */
.checkbox-list {
  list-style: none;
  margin: 0;
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  max-height: 260px;
  overflow-y: auto;
}
.checkbox-list li { padding: 0.4rem 0.2rem; }
.checkbox-list label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 400;
  cursor: pointer;
}
.checkbox-list input[type="checkbox"] { width: 18px; height: 18px; flex-shrink: 0; }

.login-page {
  max-width: 460px;
  margin: 4rem auto;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 2rem;
}
.login-page h1 { color: var(--ips-blue); font-size: 1.3rem; }
.login-logo { display: block; width: 100%; height: auto; margin-bottom: 1.5rem; }

/* Toast -- persistent, non-blocking write feedback */
.toast {
  position: fixed;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ips-blue);
  color: #fff;
  padding: 0.7rem 1.2rem;
  border-radius: 999px;
  font-size: 0.9rem;
  box-shadow: 0 4px 14px rgba(0,0,0,0.2);
  z-index: 50;
}

/* Desktop default: hidden. Must come BEFORE the mobile media query below --
   a later unconditional rule of equal specificity would win the cascade
   regardless of the media query and always hide this, which is exactly
   the bug that shipped originally (the override sat further down the
   file). Keeping the base state here, right next to the override that
   flips it, is what keeps that from happening again silently. */
.back-to-list { display: none; }

/* Mobile: single column, tap-through, thumb-height controls */
@media (max-width: 767px) {
  .split-view { grid-template-columns: 1fr; }
  .split-view--detail .list-panel { display: none; }
  .container { padding: 0.75rem; }
  .field-grid { grid-template-columns: 1fr; }
  .actions-row .btn,
  .actions-row form.inline { flex: 1 1 100%; }
  .back-to-list { display: inline-flex; }

  .topbar { flex-wrap: wrap; row-gap: 0.5rem; }
  .topbar .brand { font-size: 1rem; white-space: nowrap; }
  /* Stacked, full-width, thumb-height rows instead of cramming 8-9 links
     onto one line with justify-content: space-between -- that rendered as
     one unreadable run-on string with no visible spacing between links. */
  .topbar nav { width: 100%; display: flex; flex-direction: column; margin-left: 0; }
  .topbar nav a {
    margin-left: 0;
    padding: 0.6rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
  }
  .topbar nav a:first-child { border-top: none; }

  .search-bar { flex-wrap: wrap; }
  .search-bar input[type="search"] { flex: 1 1 100%; }
  .search-bar select { flex: 1 1 100%; max-width: none; }
  .search-bar .btn { flex: 1 1 100%; }
}

/* Print */
.print-header, .print-footer { display: none; }
@media print {
  /* Screen-only chrome -- none of this means anything on paper. */
  .topbar, .search-bar, .actions-row, .note-form, nav, .flash, .no-print { display: none !important; }
  body { background: #fff; }
  .container { max-width: none; padding: 0; }
  /* Explicit physical page margin so content never lands in a printer's
     unprintable edge -- relying on browser/printer defaults alone is
     inconsistent across devices. */
  @page { margin: 0.6in; }

  /* Document-control branding (addendum #14) -- print-only, governed by
     this same media query, never shown on the in-app screen preview.
     Both print templates put the header/footer in a <thead>/<tfoot> of a
     wrapping <table> (.print-doc-table) rather than `position: fixed`.
     `position: fixed` looked right in a single-page on-screen check but
     was proven wrong by an actual multi-page print-to-PDF render: a fixed
     element's top/bottom anchor moves in lockstep with `@page` margin
     (both resolve against the same content-box edge), so it can never gain
     separation from normal content that way -- and on a single-page
     document it silently overlapped the card's own top line, since that
     check never got run through a real print-to-PDF render. A <table>'s
     thead/tfoot is what Chrome actually repeats correctly on every printed
     page with correct spacing, confirmed against real 1-page and 2-page
     renders. */
  .print-header { display: block; text-align: center; padding: 0 0 0.15in; }
  .print-header img { width: 3in; height: auto; }

  .print-footer {
    display: block;
    text-align: center;
    border-top: 1px solid #999;
    padding-top: 0.15in;
    font-size: 0.68rem;
    line-height: 1.45;
    color: #000;
  }
  .print-footer-title { font-weight: 700; }
  .print-footer p { margin: 0.3em auto 0; max-width: 6.5in; }

  .print-doc-table { width: 100%; border-collapse: collapse; }

  /* Never split one contact's card across a page break -- confirmed with a
     real multi-page render that without this, a card can get cut mid-card
     at the page boundary. The whole card moves to the next page instead. */
  .print-card { break-inside: avoid; page-break-inside: avoid; }
}

.print-card {
  border: 1px solid #999;
  /* Color as accent only (a border), never on the text itself -- body text
     stays black/near-black regardless of screen vs. print. */
  border-top: 4px solid var(--ips-blue);
  border-radius: 8px;
  padding: 1.5rem;
  max-width: 500px;
  margin: 0 auto;
}
/* Clear size hierarchy: name > title/company > contact details, all at or
   above a print-legible ~10-11pt floor (readable by anyone regardless of
   screen brightness -- unlike screen-optimized small text). */
.print-card-name { font-size: 1.6rem; font-weight: 700; color: var(--text); margin: 0 0 0.15rem; }
.print-card-title { font-size: 1.1rem; color: var(--text); margin-bottom: 0.6rem; }
.print-card-contact { font-size: 1rem; color: var(--text); line-height: 1.6; }

.print-sheet-table { width: 100%; border-collapse: collapse; }
.print-sheet-table tbody td { width: 33.33%; padding: 0.375rem; vertical-align: top; }
/* Tighter than the single card, but each tier still sits at or above the
   same ~10-11pt legibility floor -- the sheet never shrinks contact details
   past what's comfortably readable on paper. */
.print-sheet-table .print-card { max-width: none; padding: 0.9rem; }
.print-sheet-table .print-card-name { font-size: 1.25rem; margin: 0 0 0.1rem; }
.print-sheet-table .print-card-title { font-size: 1rem; margin-bottom: 0.4rem; }
.print-sheet-table .print-card-contact { font-size: 0.9rem; line-height: 1.5; }

.company-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.primary-address { font-size: 0.95rem; color: #555; line-height: 1.4; }

/* Lets wide tables (admin users, backup log) scroll horizontally within
   their own box on narrow screens, instead of relying on .panel's
   overflow: hidden (needed elsewhere for rounded-corner clipping), which
   was silently clipping most of the table with no way to reach it. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.admin-users-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.admin-users-table th { text-align: left; padding: 0.5rem; border-bottom: 2px solid var(--ips-grey); color: var(--ips-blue); }
.admin-users-table td { padding: 0.5rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.admin-users-table input[type="color"] { width: 40px; height: 32px; border: none; padding: 0; cursor: pointer; }

/* Zebra striping (addendum #10) -- one shared rule for every stacked
   list/table view app-wide, so a new list view inherits it automatically
   just by reusing one of these classes rather than needing its own
   styling. Sets the row's own background; hover/active states on nested
   links (e.g. .contact-list li a) declare their own background and win
   naturally since they sit on top. */
.contact-list li:nth-child(even),
.site-list li:nth-child(even),
.meetings-log li:nth-child(even),
.notes-log li:nth-child(even),
.share-history li:nth-child(even),
.admin-users-table tbody tr:nth-child(even) {
  background: #f7f8f9;
}

.calendar-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.calendar-controls { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.calendar-controls .btn { min-height: 40px; padding: 0.5rem 0.9rem; }

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.calendar-day-label {
  background: var(--ips-blue);
  color: #fff;
  padding: 0.4rem;
  font-size: 0.8rem;
  text-align: center;
  font-weight: 600;
}
.calendar-cell {
  background: #fff;
  min-height: 90px;
  padding: 0.4rem;
  font-size: 0.8rem;
}
.calendar-cell.other-month { background: #fafafa; color: #bbb; }
.calendar-cell.today { background: #fff8ec; }
.calendar-date { font-weight: 700; margin-bottom: 0.2rem; }

.color-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 0.3rem;
  vertical-align: middle;
}

.calendar-meeting {
  display: block;
  background: #e6f0fb;
  color: var(--ips-blue);
  border-radius: 4px;
  padding: 0.15rem 0.3rem;
  margin-bottom: 0.15rem;
  text-decoration: none;
  font-size: 0.75rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 767px) {
  .calendar-grid { grid-template-columns: repeat(7, minmax(38px, 1fr)); font-size: 0.7rem; }
  .calendar-cell { min-height: 60px; padding: 0.2rem; }
  .calendar-meeting { font-size: 0.65rem; }
}

.this-week-panel {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem;
  margin-bottom: 1rem;
}
.this-week-panel .section-title { margin-top: 0; }
.this-week-panel ul { list-style: none; margin: 0; padding: 0; }
.this-week-panel li { padding: 0.3rem 0; font-size: 0.9rem; }
.site-list { list-style: none; margin: 0; padding: 0; }
.site-list li { padding: 0.5rem 0; border-bottom: 1px solid var(--border); }