/* ==========================================================================
   Inquiries back office

   Styles for inquiries.html only. Everything structural — the login panel,
   message strips, buttons, badges — comes from news.css, which this page
   already loads. What is new here is the shape of an inquiry row: a lead is
   read once, in a rush, on a phone, so contact details come first and the
   long free-text message is collapsed by default.
   ========================================================================== */

/* ---- Toolbar: counts, filters, export ---- */
.iqbar{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:16px 24px; border-bottom:1px solid var(--line); background:#fff;
}
.iqbar__stats{display:flex; gap:8px; flex-wrap:wrap; flex:1; min-width:0}
.iqchip{
  display:inline-flex; align-items:baseline; gap:6px;
  padding:6px 12px; border-radius:var(--r-full);
  background:var(--bg-soft); font-size:13px; font-weight:700; color:var(--ink-500);
}
.iqchip b{font-size:16px; font-weight:800; color:var(--ink-900); font-variant-numeric:tabular-nums}
.iqchip.is-new{background:var(--blue-50); color:var(--blue-700)}
.iqchip.is-new b{color:var(--blue-700)}
.iqchip.is-closed{background:var(--green-50); color:#0A6E4C}
.iqchip.is-closed b{color:#0A6E4C}

.iqfilter{
  display:flex; align-items:center; gap:7px;
  padding:9px 14px; min-height:42px;
  border:1px solid var(--line); border-radius:var(--r-sm);
  background:#fff; font:inherit; font-size:14px; font-weight:650; color:var(--ink-700);
  cursor:pointer;
}
.iqfilter:hover{border-color:var(--blue-300)}
.iqsearch{
  flex:1; min-width:180px; max-width:320px;
  padding:0 14px; min-height:42px;
  border:1px solid var(--line); border-radius:var(--r-sm);
  font:inherit; font-size:14.5px; color:var(--ink-900);
}
.iqsearch:focus{outline:none; border-color:var(--blue-500)}

/* ---- Inquiry row ----
   Two columns inside the row: a fixed-width identity/contact block and a
   flexible detail block. The contact block does not shrink, so an email
   address never gets clipped mid-string by a long company name. */
.iqrow{
  display:grid; grid-template-columns:230px 1fr;
  gap:18px; padding:20px 24px;
  border-bottom:1px solid var(--line-soft); background:#fff;
  transition:background .14s;
}
.iqrow:hover{background:var(--bg-soft)}
.iqrow.is-new{box-shadow:inset 3px 0 0 var(--blue-600)}

.iqrow__who{min-width:0}
.iqrow__name{
  font-size:16.5px; font-weight:750; color:var(--ink-900);
  line-height:1.3; margin-bottom:2px;
  overflow-wrap:anywhere;
}
.iqrow__co{font-size:14px; color:var(--ink-500); font-weight:600; overflow-wrap:anywhere}
.iqrow__contact{margin-top:11px; display:flex; flex-direction:column; gap:6px}
.iqrow__contact a{
  display:inline-flex; align-items:center; gap:7px;
  font-size:14px; font-weight:650; color:var(--blue-700);
  overflow-wrap:anywhere;
}
.iqrow__contact a:hover{text-decoration:underline}
.iqrow__contact svg{width:15px; height:15px; flex:none; color:var(--ink-400)}

.iqrow__main{min-width:0}
.iqrow__meta{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  font-size:12.5px; font-weight:650; color:var(--ink-400);
  margin-bottom:10px;
}
.iqrow__specs{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:11px}
.iqspec{
  padding:4px 10px; border-radius:var(--r-sm);
  background:var(--bg-soft); box-shadow:inset 0 0 0 1px var(--line);
  font-size:12.5px; font-weight:650; color:var(--ink-600);
}
.iqspec b{color:var(--ink-900); font-weight:750}

/* The message is the only part that can be long, so it starts collapsed and
   is opened by a real <details> — keyboard accessible and printable as
   open, unlike a JS toggle that forgets its state. */
.iqmsg{font-size:14.5px; line-height:1.6; color:var(--ink-600)}
.iqmsg summary{
  cursor:pointer; font-size:14px; font-weight:700; color:var(--blue-700);
  list-style:none; display:inline-flex; align-items:center; gap:7px;
  padding:5px 0;
}
.iqmsg summary::-webkit-details-marker{display:none}
.iqmsg summary::before{
  content:""; width:0; height:0;
  border-left:5px solid currentColor;
  border-top:4px solid transparent; border-bottom:4px solid transparent;
  transition:transform .16s;
}
.iqmsg[open] summary::before{transform:rotate(90deg)}
.iqmsg__body{
  margin-top:9px; padding:13px 15px;
  border-radius:var(--r-sm); background:var(--bg-soft);
  border-left:2px solid var(--line);
  white-space:pre-wrap; overflow-wrap:anywhere;
}
.iqmsg__none{font-size:14px; color:var(--ink-400); font-style:italic}

.iqrow__acts{display:flex; gap:8px; margin-top:13px; flex-wrap:wrap}

.iqempty{padding:64px 24px; text-align:center; color:var(--ink-400); font-size:15.5px}
.iqempty b{display:block; font-size:18px; color:var(--ink-700); margin-bottom:7px; font-weight:750}

/* ---- Detail dialog ----
   A <dialog> rather than a hand-rolled overlay: focus trapping, Escape to
   close and the backdrop come from the platform, so the only thing left to
   implement is the content. */
.iqmodal{
  width:min(680px, calc(100vw - 40px));
  padding:0; border:none; border-radius:var(--r-lg);
  box-shadow:0 24px 64px rgba(10,30,70,.24);
}
.iqmodal::backdrop{background:rgba(10,22,45,.5)}
.iqmodal__head{
  display:flex; align-items:flex-start; gap:14px;
  padding:22px 24px; border-bottom:1px solid var(--line);
}
.iqmodal__head h3,.iqmodal__head h2{font-size:20px; margin:0; flex:1; line-height:1.3}
.iqmodal__x{
  flex:none; width:36px; height:36px; border-radius:var(--r-sm);
  border:1px solid var(--line); background:#fff; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; color:var(--ink-500);
}
.iqmodal__x:hover{background:var(--bg-soft); color:var(--ink-900)}
.iqmodal__x svg{width:17px; height:17px}
.iqmodal__body{padding:24px; max-height:min(64vh, 620px); overflow-y:auto}
.iqmodal__foot{
  display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap;
  padding:16px 24px; border-top:1px solid var(--line); background:var(--bg-soft);
}

.iqdl{display:grid; grid-template-columns:132px 1fr; gap:11px 16px; font-size:14.5px}
.iqdt{color:var(--ink-400); font-weight:700; font-size:13.5px; padding-top:1px}
.iqdd{color:var(--ink-900); font-weight:600; overflow-wrap:anywhere; white-space:pre-wrap}

/* ---- Responsive ---------------------------------------------------------
   On a phone the two columns have to become one, and the contact block has
   to come second: a salesperson opening a lead on site wants the name and
   what they want, not the email address, before scrolling. */
@media (max-width:760px){
  .iqbar{padding:14px 18px; gap:10px}
  .iqbar__stats{width:100%}
  .iqsearch{max-width:none}
  .iqrow{grid-template-columns:1fr; gap:14px; padding:16px 18px}
  .iqrow__acts .nbtn{flex:1}
  .iqmodal__body{padding:18px}
  .iqdl{grid-template-columns:1fr; gap:3px 0}
  .iqdt{margin-top:9px}
}