/*
 * companies/module.css: the companies, contacts and touches screens.
 *
 * Only what these screens add on top of core.css. Every `.row.<feature>`
 * grid lives here rather than in an inline style: an inline
 * grid-template-columns beats the 760px media query that collapses every
 * list row to one column on a phone.
 */

/* ---------- the lists ---------- */

/* The companies row's tracks are set inline by companiesListHtml(), because
   the number of columns depends on which modules registered one; these are
   the text rules the cells share. */
.row.companies .primary-text,
.row.companies .sub-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;}
.row.contacts{grid-template-columns:1.3fr 1fr 1.1fr 0.9fr auto;}
.row.touches{grid-template-columns:0.8fr 0.9fr 1fr 2.2fr;}
/* A soft box for the last-activity cell. Not .badge: that carries a status
   colour, and "we spoke a fortnight ago" is neither good nor bad news. */
.pill-soft{display:inline-block;font-size:11px;padding:2px 8px;border-radius:20px;
  background:var(--paper-raised);border:1px solid var(--line);color:var(--ink-soft);}

/* ---------- company detail ---------- */

.company-header{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:8px;flex-wrap:wrap;}
.company-title-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
/* The logo carries its own right margin for the inline cases (list rows,
   which are not flex and would ignore a gap). Here the row's gap already does
   the spacing, so the margin would double it. */
.company-title-row img, .company-title-row .company-logo{margin-right:0;}
/* The drawn fallback logo. Muted rather than full ink: it stands in for a
   logo, and at --ink it would read as heavier than the real favicons it
   lines up beside. */
.company-logo-ph{color:var(--line-strong);}
.company-address{font-size:13px;color:var(--ink-soft);margin-top:4px;}
.company-meta-row{font-size:13px;color:var(--ink-soft);margin-top:2px;display:flex;gap:14px;flex-wrap:wrap;}
.company-meta-row a{color:var(--blue);}
.company-lines{margin-top:12px;display:flex;flex-direction:column;gap:4px;align-items:flex-start;}
/* Owner, then Claim / Unclaim / Reassign as quiet text links on the same line. */
.company-owner-row{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;font-size:13px;}
.company-link-btn{background:none;border:none;padding:0;font:inherit;font-size:13px;color:var(--blue);cursor:pointer;}
.company-link-btn:hover{text-decoration:underline;}

/* The header's actions: the next step, Edit, and everything else under More. */
.company-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.company-more{position:relative;}
.company-more-caret{margin-left:6px;font-size:10px;}
.company-more-panel{display:none;position:absolute;top:100%;right:0;margin-top:6px;min-width:230px;
  background:var(--paper-raised);border:1px solid var(--line);border-radius:8px;
  box-shadow:0 4px 12px rgba(0,0,0,0.12);z-index:60;padding:6px;flex-direction:column;gap:1px;}
.company-more.open .company-more-panel{display:flex;}
/* Slot entries arrive as ghost buttons; inside the menu they read as rows. */
.company-more-panel .btn{display:flex;align-items:center;gap:8px;width:100%;text-align:left;
  border:none;background:transparent;padding:8px 10px;font-size:13px;border-radius:6px;}
.company-more-panel .btn:hover{background:var(--paper);}
.company-more-panel .btn .ic{margin-right:0;}
.company-more-panel > span:empty{display:none;}
.company-more-sep{height:1px;background:var(--line);margin:4px 2px;}
.company-more-panel > .company-more-sep:first-child{display:none;}
.company-more-panel .btn.company-more-danger{color:var(--brick);}
.company-more-panel .btn.company-more-danger:hover{background:var(--brick-soft);}

/* Lost: a quiet pill beside the name, a banner under it, and the modal. */
.company-lost-pill{display:inline-block;margin-left:8px;font-size:11px;font-weight:600;line-height:1;padding:3px 8px;border-radius:20px;
  background:var(--brick-soft);color:var(--brick);vertical-align:middle;}
.company-lost-pill.big{font-size:12px;padding:4px 10px;margin-left:4px;}
.company-lost-banner{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:10px;
  padding:10px 12px;border-radius:var(--radius);background:var(--brick-soft);color:var(--brick);font-size:13px;}
.company-lost-banner .btn{background:var(--paper-raised);}
.company-lost-note{margin-top:3px;color:var(--ink-soft);}
.company-lost-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
.company-lost-chip{font:inherit;font-size:12px;padding:5px 11px;border-radius:20px;border:1px solid var(--line-strong);background:transparent;color:var(--ink);cursor:pointer;}
.company-lost-chip:hover{background:var(--paper-raised);}
.company-lost-chip.on{background:var(--ink);border-color:var(--ink);color:var(--paper);}
#lost-reasons .company-lost-chip.on{background:var(--brick);border-color:var(--brick);}
.company-lost-chips input[type=date]{width:auto;padding:4px 8px;font-size:12px;}
.company-lost-error{color:var(--brick);font-size:12px;margin-top:6px;}
.company-lost-effects{display:flex;flex-direction:column;gap:6px;}
.company-lost-effect{display:flex;align-items:flex-start;gap:8px;font-size:13px;color:var(--ink);}
.company-lost-effect[hidden]{display:none;}
.company-lost-effect .ic{flex:none;margin-top:3px;color:var(--ink-soft);}
.company-lost-effect input[type=checkbox]{flex:none;width:auto;margin:3px 0 0;}
.company-lost-effect label{display:inline;margin:0;font-size:13px;font-weight:400;color:var(--ink);text-transform:none;letter-spacing:0;cursor:pointer;}
.btn.company-lost-confirm{background:var(--brick);border-color:var(--brick);}
.btn.company-lost-confirm:hover{opacity:.9;}
@media (max-width:820px){
  .company-lost-chip{min-height:36px;}
  .company-actions{width:100%;}
  .company-more-panel .btn{min-height:40px;}
}
.company-setting-block{margin-bottom:12px;}
.status-history{list-style:none;padding:0;margin:14px 0 0;font-size:13px;color:var(--ink-soft);}
.status-history li{padding:8px 0;border-bottom:1px solid var(--line);}
.status-history li:last-child{border-bottom:none;}
.status-history .entry-time{display:block;font-size:11px;color:var(--text-muted);margin-top:2px;}

/* ---------- the forms ---------- */

.line-item-row{display:grid;grid-template-columns:1.4fr 0.35fr 1fr 0.85fr auto;gap:10px;align-items:center;margin-bottom:8px;position:relative;}
.line-item-row.header{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;color:var(--text-muted);margin-bottom:6px;}
.line-item-remove{cursor:pointer;color:var(--brick);font-size:12px;border:1px solid var(--brick);border-radius:4px;padding:6px 8px;background:transparent;}
.ph-type-btn{flex:1;display:flex;align-items:center;justify-content:center;border:none;background:var(--paper-raised);color:var(--ink-soft);cursor:pointer;padding:0;}
.ph-type-btn:first-child{border-right:1px solid var(--line-strong);}
.ph-type-btn.active{background:var(--ink);color:var(--paper);}
.ph-ext:disabled{background:transparent;border-color:transparent;}
.claim-limit-input{width:78px;}

/* The address checker's panel under the company form's ZIP. */
.address-check{background:var(--subtle-bg);border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px;margin:-4px 0 14px;}
.address-check-actions{display:flex;gap:8px;margin-top:8px;}
.address-check-note{font-size:12px;color:var(--text-muted);margin:-4px 0 12px;}
.address-check .address-check-note{margin:0;color:var(--ink-soft);}
.address-check-note.ok{color:var(--green-dot);}
.address-check-note.warn{color:var(--mustard);}

/* The company form's own rows. Named with BOTH classes because
   `.field-row.three` is (0,2,0) and a lone class loses to it wherever it
   sits in the file. Below 900px they fall back to the ordinary three-up,
   except the address, which drops to two by two so it still reads as an
   address rather than four squeezed boxes. */
.field-row.three.co-row-addr{grid-template-columns:1fr 1fr;}
@media (min-width:900px){
  .field-row.three.co-row-head{grid-template-columns:minmax(0,1.4fr) minmax(0,1.1fr) minmax(0,1.2fr);}
  .field-row.three.co-row-addr{grid-template-columns:minmax(0,2fr) minmax(0,1.3fr) minmax(0,0.9fr) minmax(0,0.8fr);}
  .field-row.three.co-row-contact{grid-template-columns:minmax(0,1.4fr) minmax(0,0.7fr) minmax(0,2fr);}
}

@media (max-width:760px){
  .row.companies,.row.contacts,.row.touches{grid-template-columns:1fr !important;gap:4px;}
}