/* Job Processor (workprocesser domain) - rides landing.css/pm_dashboard.css
   theme tokens, same as every other internal dashboard here. */

.jb-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px;
  padding: 18px 20px;
  margin-bottom: 22px;
}

.jb-toolbar label,
.jb-form label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.jb-toolbar select,
.jb-form input,
.jb-form select,
.jb-form textarea {
  /* flex:none matters on a column-direction flex item - without it these
     inherit a flex-basis that drives HEIGHT, not width, and the inputs
     render absurdly tall. Same bug the tech Availability tab hit. */
  flex: none;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(201, 162, 39, 0.35);
  color: var(--text, #e8e4da);
  border-radius: 4px;
  padding: 7px 9px;
  font: inherit;
  font-size: 0.9rem;
  text-transform: none;
  letter-spacing: normal;
}

.jb-form textarea { resize: vertical; }

.jb-btn {
  flex: none;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(201, 162, 39, 0.45);
  color: #e8ca6e;
  border-radius: 4px;
  padding: 8px 14px;
  font: inherit;
  font-size: 0.86rem;
  cursor: pointer;
}

.jb-btn:hover { border-color: #c9a227; background: rgba(201, 162, 39, 0.12); }
.jb-btn-primary { background: rgba(201, 162, 39, 0.18); }

.jb-form { padding: 20px; margin-bottom: 22px; }
.jb-form h3 { margin: 0 0 14px; font-size: 1rem; letter-spacing: 0.05em; }
.jb-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}
.jb-form-wide { grid-column: 1 / -1; }
.jb-form-actions { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.hidden { display: none !important; }

.jb-list, .jb-workload { padding: 20px; margin-bottom: 22px; }
.jb-workload h3 { margin: 0 0 8px; font-size: 1rem; letter-spacing: 0.05em; }

/* Wide tables scroll inside their own container rather than pushing the
   page sideways - but the scroller must be a WRAPPER AROUND the table, not
   the padded panel itself. Putting overflow-x on .jb-list gave the panel
   its own horizontal AND vertical scrollbar even when it held one line of
   empty-state text, because the 20px panel padding pushes content past the
   scroll container's edge. Same double-scrollbar shape as the pm board's
   "Get rid of outter scroller" card. */
.jb-table-wrap { overflow-x: auto; }

.jb-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.jb-table th {
  text-align: left;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 10px 8px;
  border-bottom: 1px solid rgba(201, 162, 39, 0.25);
  white-space: nowrap;
}
.jb-table td { padding: 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); vertical-align: top; }
.jb-title { display: block; }

.jb-tags { display: block; margin-top: 5px; }
.jb-tag {
  display: inline-block;
  font-size: 0.7rem;
  padding: 1px 7px;
  margin: 2px 4px 0 0;
  border: 1px solid rgba(201, 162, 39, 0.3);
  border-radius: 10px;
  color: var(--muted);
}

.jb-cat, .jb-pri {
  display: inline-block;
  font-size: 0.72rem;
  padding: 2px 8px;
  border-radius: 3px;
  white-space: nowrap;
  border: 1px solid transparent;
}
/* One colour per adopted category - the split is the point, so it should
   be visible at a glance rather than read word by word. */
.jb-cat-reactive             { background: rgba(138, 63, 63, 0.35);  border-color: #8a3f3f; }
.jb-cat-scheduled_maintenance{ background: rgba(47, 125, 92, 0.30);  border-color: #2f7d5c; }
.jb-cat-project              { background: rgba(47, 111, 159, 0.30); border-color: #2f6f9f; }
.jb-cat-monitoring_alert     { background: rgba(122, 122, 63, 0.30); border-color: #7a7a3f; }
.jb-cat-customer_requested   { background: rgba(91, 63, 122, 0.30);  border-color: #5b3f7a; }

.jb-pri-critical { color: #ff9a9a; font-weight: 600; }
.jb-pri-high     { color: #e8ca6e; }
.jb-pri-standard { color: var(--muted); }
.jb-pri-low      { color: var(--muted); opacity: 0.75; }

.jb-moves { white-space: nowrap; }
.jb-move, .jb-suggest {
  background: none;
  border: 1px solid rgba(201, 162, 39, 0.35);
  color: #e8ca6e;
  border-radius: 3px;
  padding: 3px 8px;
  margin: 0 4px 4px 0;
  font: inherit;
  font-size: 0.75rem;
  cursor: pointer;
}
.jb-move:hover, .jb-suggest:hover { background: rgba(201, 162, 39, 0.15); }

/* Row delete. Muted until hovered so it never competes with the status
   transition buttons, which are the everyday action - deleting is the rare
   correction, not part of the normal flow. */
.jb-delete {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1.15rem;
  line-height: 1;
  padding: 0 6px;
  cursor: pointer;
}
.jb-delete:hover:not(:disabled) { color: #ff9a9a; }
.jb-delete:disabled { opacity: 0.28; cursor: not-allowed; }

.jb-headroom { display: block; font-size: 0.72rem; color: var(--muted); }
.jb-over { color: #ff9a9a; }
.jb-over .jb-headroom { color: #ff9a9a; }

.jb-hint { font-size: 0.75rem; color: var(--muted); text-transform: none; letter-spacing: normal; }
.jb-error { color: #ff9a9a; font-size: 0.82rem; }
.jb-empty, .jb-loading { color: var(--muted); font-size: 0.88rem; padding: 8px 0; }

@media (max-width: 640px) {
  .jb-toolbar { gap: 10px; }
  .jb-table { font-size: 0.82rem; }
}