/* ops area styles (loaded after app.css): contracts, ratings, MARS supplier pool, admin pool. */
:root { --star: #E8A317; --star-off: #DDE2EE; }

.text-win { color: var(--win); }
.text-amber { color: var(--amber-ink); }

/* ---------- Star rating (read-only) ---------- */
.stars-wrap { display: inline-flex; align-items: center; gap: 5px; }
.stars { position: relative; display: inline-block; font-size: 14px; line-height: 1; letter-spacing: 1px; color: var(--star-off); }
.stars::before { content: "★★★★★"; }
.stars-fg { position: absolute; left: 0; top: 0; width: var(--v, 0%); overflow: hidden; white-space: nowrap; color: var(--star); }

/* ---------- Star rating (input) ---------- */
.rate-grid { display: flex; flex-direction: column; gap: 10px; }
.rate-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--rule-2); }
.star-input { display: inline-flex; flex-direction: row-reverse; flex: none; }
.star-input label { font-size: 26px; line-height: 1; padding: 0 2px; color: var(--star-off); cursor: pointer; transition: color .1s, transform .1s; }
.star-input label:hover, .star-input label:hover ~ label,
.star-input input:checked ~ label { color: var(--star); }
.star-input label:active { transform: scale(.9); }
.star-input input:focus-visible + label { outline: 2px solid var(--sky-ink); outline-offset: 1px; border-radius: 4px; }
@media (max-width: 420px) { .rate-row { flex-direction: column; align-items: flex-start; gap: 4px; } }

/* ---------- Locked plan feature ---------- */
.plan-lock { border: 1.5px dashed #E4A28A; background: #FFF7F3; border-radius: var(--r-md); padding: 14px 16px; }
.plan-lock .btn { display: inline-flex; }
.lock-list { list-style: none; padding: 0; margin: 10px 0 4px; display: grid; gap: 6px; font-size: 13.5px; }
.lock-list svg { color: var(--win); }
.sup-plan { height: 18px; padding: 0 6px; font-size: 10.5px; margin-left: 2px; }

/* ---------- Contracts ---------- */
.ct-stats .stat { min-width: 0; }
.ct-stats .stat .value { overflow-wrap: anywhere; }
.ct-stats .stat .label { overflow-wrap: anywhere; }
.ct-filters .input[type="search"] { max-width: 340px; flex: 1 1 220px; }
.ct-filters .select { width: auto; }
.ct-title { min-width: 200px; max-width: 320px; }
.ct-title a { color: inherit; display: block; }
.ct-title a:hover .strong { color: var(--sky-ink); text-decoration: underline; }
.ct-table tr.ct-expired td { background: #FFFAFA; }
.ct-table tr.ct-soon td { background: #FFFCF4; }
.ct-table td .btn.sm { padding: 0 8px; }

/* ---------- MARS pool ---------- */
.pool-search { max-width: 420px; flex: 1 1 240px; }
.pool-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.pool-card { padding: 14px 16px; display: flex; flex-direction: column; min-width: 0; }
.pool-card + .pool-card { margin-top: 0; }
.pool-card-head { flex-wrap: nowrap; }
.pool-name { font-size: 14.5px; }
.pool-prods { color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pool-contact { overflow-wrap: anywhere; }
.pool-card-foot { margin-top: auto; padding-top: 12px; }
.pool-card.added { border-color: #B6E6D1; }
.pool-locked { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; }
.pool-locked-num { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 140px; padding: 18px; border-radius: var(--r-md); background: var(--night); color: #fff; text-align: center; }
.pool-locked-num .num { font-size: 40px; font-weight: 700; line-height: 1; }
.pool-locked-num .muted { color: var(--mist); margin-top: 6px; }

/* ---------- Admin pool ---------- */
.ap-search { max-width: 360px; flex: 1 1 220px; }

@media (max-width: 640px) {
  .pool-grid { grid-template-columns: minmax(0, 1fr); }
  .pool-locked { grid-template-columns: minmax(0, 1fr); }
  .ct-filters .input[type="search"], .pool-search, .ap-search { max-width: none; }
}