/* Agent account: the few pieces the client portal's stylesheet does not have.
   Everything else is inherited, so the two sites look like one product. */

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.kpi { border: 1px solid var(--line, #e4eaea); border-radius: 14px; padding: 14px 16px; background: #fff; }
.kpi small { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #6a8486; }
.kpi b { display: block; font-size: 24px; font-weight: 400; color: #273b3d; margin: 6px 0 2px; }
.kpi-sub { font-size: 12px; color: #6a8486; }

.table-wrap { overflow-x: auto; }
.table-wrap table { width: 100%; border-collapse: collapse; font-size: 15px; }
.table-wrap th { text-align: left; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #6a8486; font-weight: 400; padding: 0 12px 8px 0; border-bottom: 1px solid var(--line, #e4eaea); }
.table-wrap td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--line, #e4eaea); vertical-align: top; }

/* The only thing an agent learns about a lead, so it is worth styling clearly. */
.stage { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 13px; background: #eef2f2; color: #273b3d; white-space: nowrap; }
.stage-live { background: rgba(138, 224, 229, .3); }
.stage-more-information-needed { background: #fff6e5; color: #7a5200; }
.stage-closed { background: #f1f1f1; color: #6a8486; }

.row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 620px) { .row { grid-template-columns: 1fr; } .kpis { grid-template-columns: 1fr 1fr; } }

/* Refer page: the two forms side by side, stacking on a phone */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 860px) { .two-col { grid-template-columns: 1fr; } }

/* The book hero and its 12-month trend (SRS 09) */
.book-hero { margin-top: 20px; }
.book-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.trend { display: flex; gap: 6px; align-items: flex-end; margin-top: 16px; padding-bottom: 2px; overflow-x: auto; }
.trend-col { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 26px; }
.trend-bar { width: 100%; max-width: 34px; background: var(--aqua-300, #8ae0e5); border-radius: 4px 4px 0 0; }
.trend-col small { font-size: 10px; color: #6a8486; }

/* Phones: the nav scrolls rather than wraps into the logo, tables breathe */
@media (max-width: 720px) {
  .p-header nav { overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .p-header nav::-webkit-scrollbar { display: none; }
  .book-head { flex-direction: column; }
}

/* Statements print cleanly: the page becomes the document (SRS 06 Should) */
@media print {
  .p-header, .actions, .btn, form { display: none !important; }
  .p-main { padding: 0 !important; }
  body { background: #fff; }
}