/* ═══════════════════════════════════════
   REUSABLE COMPONENTS
   Cards, pills, tags, buttons, progress,
   BP chips, customer chips, est hours
   ═══════════════════════════════════════ */

/* ─── Segment Badge ─── */
.seg { margin-bottom: 18px }
.seg-badge {
  display: inline-flex; align-items: center;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--tx3); background: var(--base2);
  padding: 3px 12px; border-radius: 99px;
  margin-bottom: 8px;
  font-family: var(--fd);
}

/* ─── Customer Card Block ─── */
.cb {
  background: var(--card); border: 1px solid var(--bdr-lt);
  border-radius: var(--r); margin-bottom: 8px;
  overflow: hidden; box-shadow: var(--sh);
  transition: box-shadow .2s, transform .2s;
}
.cb:hover { box-shadow: var(--sh-md); transform: translateY(-1px) }

.cb-head {
  display: grid; grid-template-columns: 1fr 62px 80px 110px;
  align-items: center; padding: 10px 16px;
  cursor: pointer; transition: background .1s;
  position: relative;
}
.cb-head::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; border-radius: 0 2px 2px 0;
}
.cb-head:hover { background: var(--card-hover) }

.cb-name { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 7px; font-family: var(--fd) }
.cb-chevron { font-size: 8px; color: var(--tx4); transition: transform .2s }
.cb-chevron.open { transform: rotate(90deg); color: var(--sapphire) }
.cb-count { font-size: 10px; color: var(--tx3); font-weight: 400; margin-left: 2px; font-family: var(--fm) }

/* ─── Customer Accent Stripes ─── */
.accent-lenovo::before    { background: #e11d48 }
.accent-dell::before      { background: #2563eb }
.accent-hp::before        { background: #0ea5e9 }
.accent-cxtec::before     { background: #0d9488 }
.accent-reconext::before  { background: #7c3aed }
.accent-centricsit::before{ background: #ea580c }
.accent-apto::before      { background: #059669 }
.accent-gamespot::before  { background: #eab308 }

/* ─── Yes/No Toggle ─── */
.yn-toggle { display: flex; justify-content: center; gap: 3px }
.yn-btn {
  font-size: 9px; font-weight: 600;
  padding: 2px 8px; border-radius: 99px;
  cursor: pointer;
  border: 1px solid var(--bdr-lt);
  background: var(--card); color: var(--tx4);
  transition: all .12s;
}
.yn-btn:hover { border-color: var(--bdr) }
.yn-btn.yn-yes { background: var(--ruby-bg); color: var(--ruby); border-color: rgba(225, 29, 72, .2) }
.yn-btn.yn-no  { background: var(--emerald-bg); color: var(--emerald); border-color: rgba(5, 150, 105, .2) }

/* ─── Contract Dropdown ─── */
.con-sel {
  font-size: 9px; font-weight: 600;
  padding: 3px 6px; border-radius: 99px;
  border: 1px solid var(--bdr-lt); background: var(--card);
  color: var(--tx2); cursor: pointer;
  appearance: none; -webkit-appearance: none;
  text-align: center; min-width: 90px; outline: none;
  transition: all .12s;
  background-image: url("data:image/svg+xml,%3Csvg width='7' height='4' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0l3.5 4 3.5-4z' fill='%2394a3b8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: calc(100% - 5px) center;
  padding-right: 14px;
}
.con-sel:focus { border-color: var(--sapphire); box-shadow: 0 0 0 2px var(--sapphire-bg) }
.con-active      { color: var(--emerald); background-color: var(--emerald-bg); border-color: rgba(5, 150, 105, .2) }
.con-renewal     { color: var(--amber); background-color: var(--amber-bg); border-color: rgba(217, 119, 6, .2) }
.con-negotiation { color: var(--sapphire); background-color: var(--sapphire-bg); border-color: rgba(39, 70, 194, .2) }
.con-expired     { color: var(--ruby); background-color: var(--ruby-bg); border-color: rgba(225, 29, 72, .2) }
.con-prospect    { color: #7c3aed; background-color: #f5f3ff; border-color: rgba(124, 92, 231, .2) }

/* ─── G/A/R Status Dots ─── */
.gar-cell { display: flex; justify-content: center; align-items: center; gap: 3px }
.sd { width: 12px; height: 12px; border-radius: 50%; transition: transform .15s }
.sd:hover { transform: scale(1.2) }
.sd-g    { background: var(--emerald); box-shadow: 0 0 0 2px var(--emerald-bg) }
.sd-a    { background: var(--amber); box-shadow: 0 0 0 2px var(--amber-bg) }
.sd-r    { background: var(--ruby); box-shadow: 0 0 0 2px var(--ruby-bg) }
.sd-none { background: var(--bdr); box-shadow: none }

/* ─── Status Tags ─── */
.tag {
  display: inline-flex; font-size: 9.5px; font-weight: 600;
  padding: 2px 7px; border-radius: 99px; white-space: nowrap;
  font-family: var(--fd);
}
.t-new      { background: var(--sapphire-bg); color: var(--sapphire) }
.t-assigned { background: var(--base2); color: var(--tx3) }
.t-progress { background: var(--sapphire-bg); color: var(--sapphire) }
.t-testing  { background: var(--amber-bg); color: var(--amber) }
.t-resolved { background: var(--emerald-bg); color: var(--emerald) }
.t-released { background: var(--emerald-bg); color: var(--emerald) }

/* ─── Business Priority Chips ─── */
.bp-chip {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700;
  padding: 2px 8px; border-radius: 99px;
  white-space: nowrap;
  font-family: var(--fd);
  letter-spacing: .02em;
}
.bp-0  { background: var(--bp0-bg); color: var(--bp0); border: 1px solid rgba(153,27,27,.2); font-weight: 800 }
.bp-1  { background: var(--bp1-bg); color: var(--bp1); border: 1px solid rgba(220,38,38,.15) }
.bp-2  { background: var(--bp2-bg); color: var(--bp2); border: 1px solid rgba(249,115,22,.15) }
.bp-3  { background: var(--bp3-bg); color: var(--bp3); border: 1px solid rgba(234,179,8,.15) }
.bp-4  { background: var(--bp4-bg); color: var(--bp4); border: 1px solid rgba(100,116,139,.15) }
.bp-5  { background: var(--bp5-bg); color: var(--bp5); border: 1px solid rgba(148,163,184,.1) }
.bp-none { background: transparent; color: var(--tx4); font-weight: 400 }

/* ─── Customer Chips ─── */
.cust-chip {
  display: inline-flex; align-items: center;
  font-size: 9px; font-weight: 500;
  padding: 1px 6px; border-radius: 99px;
  margin-left: 4px;
  background: var(--base2); color: var(--tx3);
  border: 1px solid var(--bdr-lt);
  white-space: nowrap;
}
.cc-dell      { background: rgba(37,99,235,.06); color: #2563eb; border-color: rgba(37,99,235,.12) }
.cc-lenovo    { background: rgba(225,29,72,.06); color: #e11d48; border-color: rgba(225,29,72,.12) }
.cc-cxtec     { background: rgba(13,148,136,.06); color: #0d9488; border-color: rgba(13,148,136,.12) }
.cc-reconext  { background: rgba(124,58,237,.06); color: #7c3aed; border-color: rgba(124,58,237,.12) }
.cc-apto      { background: rgba(5,150,105,.06); color: #059669; border-color: rgba(5,150,105,.12) }
.cc-gamespot  { background: rgba(234,179,8,.06); color: #ca8a04; border-color: rgba(234,179,8,.12) }
.cc-centricsit { background: rgba(234,88,12,.06); color: #ea580c; border-color: rgba(234,88,12,.12) }
.cc-sprout    { background: rgba(22,163,74,.06); color: #16a34a; border-color: rgba(22,163,74,.12) }
.cc-hp        { background: rgba(14,165,233,.06); color: #0ea5e9; border-color: rgba(14,165,233,.12) }

/* ─── Estimated Hours ─── */
.est-h {
  font-size: 11px; font-family: var(--fm); font-weight: 500;
  color: var(--tx2); cursor: default;
}
.est-none { color: var(--tx4); font-weight: 400 }

/* ─── Priority Pill (Select) — legacy, exec view ─── */
.pri-pill {
  padding: 2px 7px; border-radius: 99px;
  font-size: 10px; font-weight: 600;
  cursor: pointer; border: none;
  appearance: none; -webkit-appearance: none; outline: none;
  min-width: 58px; text-align: center;
  transition: all .12s;
  background-image: url("data:image/svg+xml,%3Csvg width='7' height='4' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0l3.5 4 3.5-4z' fill='%2394a3b8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: calc(100% - 5px) center;
  padding-right: 14px;
}
.pri-high   { background: var(--ruby-bg); color: var(--ruby) }
.pri-normal { background: var(--base2); color: var(--tx3) }
.pri-low    { background: var(--base2); color: var(--tx4) }
.pri-pill:focus { box-shadow: var(--focus-ring) }

/* ─── Progress Bar ─── */
.prog-m { display: flex; align-items: center; gap: 5px }
.prog-t {
  width: 44px; height: 6px;
  background: var(--bdr-lt); border-radius: 3px;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.06);
}
.prog-f { height: 100%; border-radius: 3px; transition: width .3s ease }
.prog-good .prog-f { background: var(--emerald) }
.prog-mid  .prog-f { background: var(--amber) }
.prog-low  .prog-f { background: var(--sapphire) }
.prog-p { font-size: 10px; font-family: var(--fm); color: var(--tx3); min-width: 28px; text-align: right }

/* ─── Buttons ─── */
.btn2 {
  padding: 6px 14px; border-radius: var(--rs);
  font-size: 11px; font-weight: 600; cursor: pointer;
  border: 1px solid var(--bdr); background: var(--card); color: var(--tx2);
  transition: all .12s; display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--fd);
}
.btn2:hover { border-color: var(--bdr-dk); background: var(--base2) }
.btn2-p { background: var(--sapphire); color: white; border-color: var(--sapphire) }
.btn2-p:hover { background: var(--sapphire-dk) }

/* ─── Empty State ─── */
.empty {
  text-align: center; padding: 16px;
  color: var(--tx4); font-size: 11px;
  background: var(--card);
  border: 1px dashed var(--bdr); border-radius: var(--r);
}