:root{
  --wki-blue:#1a75bb;
  --wki-blue-dark:#125a92;
  --wki-orange:#f7941e;
  --bg:#eef1f4;
  --card-bg:#ffffff;
  --text:#22303c;
  --muted:#68788a;
  --border:#d9dfe5;
  --low:#4caf7d;
  --mid:#f2b134;
  --high:#e0553d;
}
*{box-sizing:border-box;}
body{ margin:0; font-family:'Segoe UI', system-ui, -apple-system, sans-serif; background:var(--bg); color:var(--text); font-size:14px; }
a{ color:var(--wki-blue-dark); }

/* ---------- header ---------- */
header.app-header{
  display:flex; align-items:center; gap:16px; padding:12px 28px;
  background:var(--card-bg); border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:20; flex-wrap:wrap;
}
header.app-header img{ height:34px; }
header.app-header h1{ font-size:17px; font-weight:600; margin:0; color:var(--wki-blue-dark); }
header.app-header nav{ display:flex; gap:4px; flex:1; flex-wrap:wrap; }
header.app-header nav a{ font-size:13px; font-weight:600; text-decoration:none; color:var(--muted); padding:7px 12px; border-radius:6px; }
header.app-header nav a:hover{ color:var(--wki-blue-dark); background:#eef6fb; }
header.app-header nav a.active{ color:var(--wki-blue-dark); background:#eef6fb; }
.user-chip{ font-size:12px; color:var(--muted); display:flex; align-items:center; gap:10px; }
.user-chip form{ margin:0; }

main{ max-width:1080px; margin:0 auto; padding:20px 24px 80px; }

/* ---------- buttons ---------- */
button, .btn{
  font-family:inherit; font-size:13px; font-weight:600; border:1px solid var(--border);
  background:var(--card-bg); color:var(--text); padding:8px 14px; border-radius:6px; cursor:pointer;
  text-decoration:none; display:inline-block;
}
button:hover, .btn:hover{ border-color:var(--wki-blue); color:var(--wki-blue-dark); }
.btn-primary, button.primary{ background:var(--wki-blue); border-color:var(--wki-blue); color:#fff; }
.btn-primary:hover, button.primary:hover{ background:var(--wki-blue-dark); color:#fff; }
.btn-danger{ color:var(--high); }
.btn-danger:hover{ border-color:var(--high); color:var(--high); }
.btn-sm{ padding:5px 10px; font-size:12px; }

/* ---------- flash ---------- */
.flash{ padding:10px 14px; border-radius:6px; font-size:13px; margin-bottom:16px; }
.flash-success{ background:#eafaf1; color:#1e7d4f; border-left:3px solid var(--low); }
.flash-error{ background:#fdeceb; color:#b23a2a; border-left:3px solid var(--high); }
.flash-info{ background:#eef6fb; color:var(--wki-blue-dark); border-left:3px solid var(--wki-blue); }

/* ---------- tables ---------- */
table.grid{ width:100%; border-collapse:collapse; background:var(--card-bg); border:1px solid var(--border); border-radius:8px; overflow:hidden; }
table.grid th, table.grid td{ padding:9px 12px; text-align:left; border-bottom:1px solid var(--border); font-size:13px; }
table.grid th{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); background:#f7f9fb; }
table.grid tr:last-child td{ border-bottom:none; }
.text-center{ text-align:center; }
.muted{ color:var(--muted); }
.pill{ display:inline-block; padding:2px 8px; border-radius:10px; font-size:11px; font-weight:700; }
.pill-open{ background:#eafaf1; color:#1e7d4f; }
.pill-closed{ background:#f0f0f0; color:#666; }

.value-badge{ font-weight:700; padding:2px 8px; border-radius:5px; text-align:center; }
.value-badge.low{ color:var(--low); }
.value-badge.mid{ color:var(--mid); }
.value-badge.high{ color:var(--high); }

/* ---------- forms ---------- */
input[type=text], input[type=email], input[type=date], input[type=number], select, textarea{
  font-family:inherit; font-size:13px; padding:8px 10px; border:1px solid var(--border);
  border-radius:6px; background:#fff; color:var(--text); width:100%;
}
input:focus, select:focus, textarea:focus{ outline:none; border-color:var(--wki-blue); background:#f7fbfe; }
label.field-label{ display:block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); margin-bottom:5px; }
.form-row{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:14px; }
.form-row > div{ flex:1; min-width:160px; }
.card-panel{ background:var(--card-bg); border:1px solid var(--border); border-radius:8px; padding:18px 20px; margin-bottom:18px; }
h2.section{ font-size:15px; color:var(--wki-blue-dark); margin:0 0 14px; }

/* ---------- budget bar (reviewer) ---------- */
.reviewer-bar{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  background:var(--card-bg); border:1px solid var(--border); border-radius:8px;
  padding:12px 16px; margin-bottom:16px; position:sticky; top:60px; z-index:10;
}
.budget-info strong{ color:var(--wki-blue-dark); }
.budget-bar-track{ flex:1 1 160px; min-width:140px; height:8px; background:var(--bg); border-radius:5px; overflow:hidden; }
.budget-bar-fill{ height:100%; background:var(--wki-blue); transition:width .15s; }
.budget-bar-fill.full{ background:var(--high); }
.cap-note{ font-size:11px; color:var(--muted); }

/* ---------- item cards (reviewer / admin list) ---------- */
.item-wrap{ background:var(--card-bg); border:1px solid var(--border); border-radius:8px; margin-bottom:8px; overflow:hidden; }
.item-wrap.dragging{ opacity:.35; }
/* The whole header is a click target for expand/collapse. */
.item-head{ display:grid; gap:10px; align-items:center; padding:10px 22px 10px 14px; cursor:pointer; transition:background .12s ease; }
.item-head:hover{ background:rgba(0,0,0,.035); }
.drag-handle{ cursor:grab; color:var(--muted); text-align:center; font-size:16px; user-select:none; }
.ref{ font-weight:600; text-transform:uppercase; }
.chev{ display:inline-block; background:none; border:none; color:var(--muted); cursor:pointer; font-size:14px; transition:transform .15s ease; }
.item-head:hover .chev:not(.btn-danger){ color:var(--text); }
.item-wrap.open .chev{ transform:rotate(90deg); }
.detail{ display:none; padding:4px 14px 16px 40px; border-top:1px solid var(--border); }
.item-wrap.open .detail{ display:block; }
/* Grey description preview under a card; exactly two lines keeps the list uniform. */
.item-snippet{ padding:2px 22px 12px 46px; }
.item-snippet-text{
    color:var(--muted); font-size:12px; line-height:1.4;
    display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical;
    overflow:hidden;
    min-height:1.4em; max-height:1.4em;
}
.item-wrap.open .item-snippet{ display:none; }
/* Go2Sure ticket link: a distinct, clickable tag in the card header. */
.g2s-tag{
    display:inline-block; margin-left:8px; padding:1px 9px;
    border-radius:10px; font-size:11px; font-weight:600; line-height:1.6;
    text-decoration:none; white-space:nowrap;
    background:#e7eefc; color:#1a56db; border:1px solid #c9dbf8;
    transition:background .12s ease, color .12s ease, border-color .12s ease;
}
.g2s-tag:hover{ background:#1a56db; color:#fff; border-color:#1a56db; }
.score-input{ text-align:center; }