/* Real estate agents (01Shared/Agents.aspx). Builds on CS/Calculator.css and CS/Settings.css. */

/* Co-brand banner and messages, under the page title */
.cobrand-now { align-items: center; background: var(--brand-soft); border-radius: 10px; display: flex; flex-wrap: wrap; gap: 10px 14px; margin-top: 4px; padding: 10px 14px; }
.cobrand-now > span { flex: 1 1 auto; }
.agent-msg { display: block; font-weight: 600; margin-top: 10px; }
.agent-msg:empty { display: none; }
.agent-msg.good { color: #1a7f45; }
.agent-msg.bad { color: var(--alert); }
html.dark .agent-msg.good { color: #6fdc9b; }

/* List on the left, form on the right */
.agents-layout { align-items: start; display: grid; gap: 16px; grid-template-columns: minmax(250px, 300px) minmax(0, 1fr); }
.agents-layout > .card { margin-bottom: 16px; }

.list-head { align-items: center; display: flex; gap: 10px; justify-content: space-between; margin-bottom: 10px; }
.list-head h2 { margin: 0; }
.list-head .count { background: var(--line); border-radius: 999px; color: var(--ink); font-size: .72rem; letter-spacing: 0; margin-left: 4px; padding: 1px 8px; }
.agent-search input { margin-bottom: 8px; width: 100%; }
.calc-page .agent-search input[type=search] {
    background: var(--field); border: 1px solid var(--field-line); border-radius: 8px; color: var(--ink); font: inherit; min-height: 36px; padding: 5px 10px;
}
.calc-page .agent-search input[type=search]:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); outline: none; }

.agent-list { display: flex; flex-direction: column; gap: 4px; max-height: 620px; overflow-y: auto; margin: 0 -6px; padding: 0 6px; }
.agent-item { align-items: center; border: 1px solid transparent; border-radius: 10px; color: var(--ink); display: flex; gap: 12px; padding: 8px 10px; text-decoration: none; }
.agent-item:hover { background: var(--field); border-color: var(--line); }
.agent-item.selected { background: var(--field); border-color: var(--brand); box-shadow: inset 3px 0 0 var(--brand); }
.agent-item[hidden] { display: none; }
.agent-item .who { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; }
.agent-item .name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-item .co { color: var(--muted); font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-item .tag { background: var(--brand-soft); border-radius: 999px; color: var(--brand-dark); flex: none; font-size: .7rem; font-weight: 600; padding: 2px 8px; }
.no-match { color: var(--muted); font-size: .88rem; margin: 6px 4px; }

/* Round picture, or initials when there isn't one */
.avatar { align-items: center; background: var(--brand-soft); border-radius: 50%; color: var(--brand-dark); display: inline-flex; flex: none; font-size: .9rem; font-weight: 700; height: 44px; justify-content: center; object-fit: cover; width: 44px; }
img.avatar { background: #fff; }
.avatar.sm { font-size: .75rem; height: 34px; width: 34px; }

.empty { border: 2px dashed var(--line); border-radius: 10px; padding: 18px; text-align: center; }
.empty p { margin: 0 0 6px; }

/* The form: headshot beside the details */
.agent-edit { align-items: start; display: grid; gap: 20px; grid-template-columns: 170px minmax(0, 1fr); }
.headshot { align-items: center; display: flex; flex-direction: column; gap: 8px; text-align: center; }
.headshot .pic { align-items: center; background: var(--brand-soft); border: 1px solid var(--line); border-radius: 12px; display: flex; height: 190px; justify-content: center; overflow: hidden; width: 152px; }
.headshot .pic img { background: #fff; height: 100%; object-fit: cover; width: 100%; }
.headshot .pic .initials { color: var(--brand-dark); font-size: 2.6rem; font-weight: 700; }
.headshot .pic.has-pic .initials { display: none; }
.headshot .hint { margin: 0; }
.upload { cursor: pointer; position: relative; }
.upload input[type=file] { height: 1px; opacity: 0; position: absolute; width: 1px; }
.upload span { background: var(--brand-soft); border-radius: 8px; color: var(--brand-dark); display: inline-block; font-size: .9rem; font-weight: 600; padding: 7px 14px; }
.upload:hover span { background: var(--brand); color: #fff; }
.upload:has(input:focus-visible) span { box-shadow: 0 0 0 3px var(--brand); }
.link-btn { background: none; border: 0; color: var(--muted); cursor: pointer; font: inherit; font-size: .85rem; padding: 2px; text-decoration: underline; }
.link-btn:hover { color: var(--alert); }
.link-btn[hidden] { display: none; }

.agents .contact .row > label:first-child { flex: 0 0 130px; }
.agents .contact .row input.name { flex: 1 1 0; }
.agents .contact .warn { font-size: .85rem; margin: 2px 0 4px 136px; }
.agents .contact .hint { margin: 8px 0 0; }

/* Preview of the bottom of a quote: me on the left, the agent on the right */
.agent-form h3 { margin-top: 22px; }
.quote-foot { background: #fff; border: 1px solid var(--line); border-radius: 10px; color: #13233a; display: grid; gap: 16px; grid-template-columns: 1fr 1fr; padding: 14px 16px; }
.quote-foot .side { align-items: center; display: flex; gap: 12px; min-width: 0; }
.quote-foot .side.agent { justify-content: flex-end; text-align: right; }
.quote-foot .foot-pic { border-radius: 6px; flex: none; height: 64px; object-fit: cover; width: 52px; }
.quote-foot .foot-text { display: flex; flex-direction: column; font-size: .82rem; line-height: 1.35; min-width: 0; }
.quote-foot .foot-text strong { color: #0a5bd6; font-size: .95rem; }
.quote-foot .foot-text span { display: flex; flex-direction: column; }
.quote-foot .foot-text span, .quote-foot .foot-text strong { overflow-wrap: anywhere; }

/* Delete: red text; Send app to Phone lighter, on the right */
.calc-page input.btn-danger { background: none; border-color: transparent; color: var(--alert); padding-left: 8px; padding-right: 8px; }
.calc-page input.btn-danger:hover { background: var(--alert-soft); border-color: transparent; color: var(--alert); }
.calc-page input.btn-tool { background: var(--brand-soft); border-color: transparent; color: var(--brand-dark); font-size: .85rem; padding-left: 11px; padding-right: 11px; }
.calc-page input.btn-tool.first-tool { margin-left: auto; }

@media (max-width: 900px) {
    .agents-layout { grid-template-columns: 1fr; }
    .agent-list { max-height: 320px; }
}
@media (max-width: 600px) {
    .agent-edit { grid-template-columns: 1fr; }
    .agents .contact .row { align-items: stretch; flex-direction: column; gap: 2px; padding: 6px 0; }
    .agents .contact .row > label:first-child { flex: none; }
    .agents .contact .row input.name { flex: none; width: 100%; }
    .agents .contact .warn { margin-left: 0; }
    .quote-foot { grid-template-columns: 1fr; }
    .quote-foot .side.agent { flex-direction: row-reverse; justify-content: flex-end; text-align: left; }
    .calc-page input.btn-tool.first-tool { margin-left: 0; }
}

/* "Show me how" (the tour, JS/AgentsTour.js) beside Return to Main Menu, and in the empty list */
.head-btns { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; }
.empty .show-how { color: var(--brand); font-weight: 600; text-decoration: none; }
.empty .show-how:hover { color: var(--brand); text-decoration: underline; }
@media (max-width: 480px) {
    .head-btns { width: 100%; }
}
.headshot .pic-links { display: flex; flex-wrap: wrap; gap: 4px 14px; justify-content: center; }