/* ============================================================
   CONTACTS — on the customer detail page
   ============================================================ */
.cust-contacts { display: flex; flex-direction: column; gap: var(--sp-4); margin: var(--sp-7) 0 var(--sp-8); }
.cust-contact {
  display: flex; align-items: center; gap: 13px;
  padding: var(--sp-5) 14px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel);
}
.cust-contact .av { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: var(--white); font-weight: 700; font-size: var(--fs-5); flex: none; }
.cust-contact .info { min-width: 150px; flex: none; }
.cust-contact .info b { font-size: var(--fs-5); font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.cust-contact .info .role { font-size: var(--fs-3); color: var(--muted); margin-top: 1px; }
.cust-contact .meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.cust-contact .meta .it { display: flex; align-items: center; gap: 7px; font-size: var(--fs-3); color: var(--ink-2); font-family: var(--read); }
.cust-contact .meta .it a { color: inherit; }
.cust-contact .meta .it a:hover { text-decoration: underline; }
.cust-contact .meta .it.note { color: var(--muted); font-style: italic; }
.cust-contact .meta svg { width: 13px; height: 13px; color: var(--faint); flex: none; }
.cust-contact .acts { display: flex; gap: var(--sp-2); opacity: 0; transition: opacity .12s; flex: none; }
.cust-contact:hover .acts { opacity: 1; }
.cust-contact .acts form { margin: 0; }
.cust-contact .acts .b { width: 30px; height: 30px; border: 0; background: none; border-radius: 6px; display: grid; place-items: center; color: var(--muted); cursor: pointer; }
.cust-contact .acts .b:hover { background: var(--rail); color: var(--ink); }
.cust-contact .acts .b.del:hover { background: var(--red-soft); color: var(--red); }
.cust-contact .acts svg { width: 15px; height: 15px; }

/* site cards */
.cust-sites { display: flex; flex-direction: column; gap: var(--sp-6); margin: var(--sp-7) 0 var(--sp-8); }
.cust-site {
  padding: var(--sp-6); border: 1px solid var(--line); border-radius: 12px; background: var(--paper);
}

/* card head: home tile + name/address, url pushed to the right, actions on
   hover; a hairline closes the head off from the body below. */
.cust-site__head { display: flex; align-items: center; gap: var(--sp-5); }
/* The divider only closes off the head when there's a body (setup / description
   / contacts) beneath it — a header-only card gets no dangling line. */
.cust-site__head:not(:last-child) { padding-bottom: var(--sp-5); border-bottom: 1px solid var(--line); }
/* Lime tile doubles as the edit link — home icon by default, pencil on hover. */
.cust-site__home { width: 40px; height: 40px; border-radius: 9px; flex: none; display: grid; place-items: center; background: var(--lime); color: var(--ink); text-decoration: none; transition: filter .12s; }
.cust-site__home:hover { filter: brightness(.94); }
.cust-site__home svg { grid-area: 1 / 1; }
.cust-site__edit-ic { display: none; }
.cust-site__home:hover .cust-site__home-ic { display: none; }
.cust-site__home:hover .cust-site__edit-ic { display: block; }
.cust-site__head .info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.cust-site__head .info b { min-width: 0; font-family: var(--display); font-size: var(--fs-7); font-weight: 800; line-height: 1; letter-spacing: -.02em; color: var(--ink); margin-top: var(--sp-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cust-site__addr { font-family: var(--read); font-size: var(--fs-4); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cust-site__url { flex: none; min-width: 0; max-width: 260px; display: inline-flex; align-items: center; gap: var(--sp-3); font-family: var(--read); font-size: var(--fs-4); font-weight: 600; color: var(--blue); }
.cust-site__url svg { flex: none; width: 14px; height: 14px; color: var(--blue); }
.cust-site__url a { min-width: 0; color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cust-site__url a:hover { text-decoration: underline; }

/* description — light-grey info box, sits below the setup table */
.cust-site__desc { display: flex; align-items: flex-start; gap: var(--sp-4); margin-top: var(--sp-6); padding: var(--sp-5) var(--sp-6); background: var(--rail); border-radius: 10px; font-family: var(--read); font-size: var(--fs-4); line-height: 1.6; color: var(--ink-2); }
.cust-site__desc > svg { flex: none; width: 15px; height: 15px; color: var(--muted); margin-top: var(--sp-1); }
.cust-site__desc .tx { min-width: 0; }
.cust-site__desc .tx p { margin: 0; }
.cust-site__desc .tx p + p { margin-top: var(--sp-4); }

.cust-site .cust-h { margin-top: var(--sp-6); }
.cust-site .cust-setup { margin-top: var(--sp-6); }
.cust-site .cust-contacts { margin: var(--sp-4) 0 0; }

/* add-contact disclosure */
.cust-add { margin: var(--sp-4) 0 14px; }
.cust-add__trigger {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer; list-style: none;
  height: 36px; padding: 0 14px; border-radius: 9px; font-size: var(--fs-4); font-weight: 600;
  background: var(--white); color: var(--ink-2); border: 1px solid var(--line-2); user-select: none;
}
.cust-add__trigger::-webkit-details-marker { display: none; }
.cust-add__trigger:hover { background: var(--rail); color: var(--ink); }
.cust-add[open] .cust-add__trigger { margin-bottom: 10px; }

/* contact add/edit form */
.cust-form { border: 1px solid var(--line-2); border-radius: 11px; background: var(--rail); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.cust-form .row { display: flex; gap: 10px; }
.cust-form input, .cust-form textarea, .cust-form select {
  flex: 1; min-width: 0; width: 100%; font-size: var(--fs-4); color: var(--ink);
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 9px var(--sp-5); outline: none;
}
.cust-form textarea { resize: vertical; }
.cust-form select:focus { border-color: var(--accent); }
.cust-form input::placeholder, .cust-form textarea::placeholder { color: var(--faint); }
.cust-form input:focus, .cust-form textarea:focus { border-color: var(--accent); }
.cust-form .frow-acts { display: flex; gap: var(--sp-4); align-items: center; justify-content: flex-end; }
.cust-form .btn { height: 36px; padding: 0 15px; border-radius: 9px; font-size: var(--fs-4); font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; border: 0; text-decoration: none; }
.cust-form .btn svg { width: 14px; height: 14px; }
.cust-form .btn.save { background: var(--accent); color: var(--white); }
.cust-form .btn.save:hover { background: var(--accent-2); }
.cust-form .btn.cancel { background: var(--panel); border: 1px solid var(--line-2); color: var(--ink-2); }
.cust-form .btn.cancel:hover { background: var(--rail); color: var(--ink); }
.cust-form .btn.move { margin-right: auto; background: none; color: var(--muted); padding: 0 var(--sp-2); }
.cust-form .btn.move:hover { color: var(--ink); }