/* Minimal panel styling. Pipedrive sets a light/dark theme via the SDK; we
   read it in main.js and set data-theme on <html> so these variables switch. */

:root {
  --bg: #ffffff;
  --fg: #1f2733;
  --muted: #6b7785;
  --border: #e1e6eb;
  --accent: #2f8de4;
  --accent-fg: #ffffff;
  --danger: #c0392b;
  --danger-bg: #fdECEA;
  --ok: #1e874b;
  --ok-bg: #e9f6ee;
  --chip-bg: #f2f5f8;
  --warn: #8a5a00;
  --warn-bg: #fff4dc;
}

[data-theme="dark"] {
  --bg: #1b2733;
  --fg: #e6ebf0;
  --muted: #9aa7b4;
  --border: #33414f;
  --accent: #4aa3ee;
  --accent-fg: #0d1620;
  --danger: #ff6b5e;
  --danger-bg: #3a2320;
  --ok: #5fd08a;
  --ok-bg: #1f3328;
  --chip-bg: #24313d;
  --warn: #f2c063;
  --warn-bg: #3a3020;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: var(--fg);
  background: var(--bg);
}

.panel { padding: 12px; }

.status { color: var(--muted); padding: 8px 0; }
.status.error { color: var(--danger); }

h2 { font-size: 14px; margin: 4px 0 10px; }
h3 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin: 14px 0 6px; }

.entity-card {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px;
  margin-bottom: 10px;
}
.entity-card .row { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.entity-title { font-weight: 600; }

.badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--chip-bg);
  color: var(--muted);
  white-space: nowrap;
}
.badge.match { background: var(--ok-bg); color: var(--ok); }
.badge.create { background: var(--chip-bg); color: var(--accent); }

.field-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 6px 0; }
.field-row .k { color: var(--muted); white-space: nowrap; }
.field-row select,
.field-row input {
  font: inherit;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--fg);
  min-width: 55%;
  max-width: 55%;
}

.field-row input.checkbox { min-width: 0; max-width: none; width: auto; }

/* A required field the deal did not supply: flag the input, don't scold. */
.field-row.needs-value select,
.field-row.needs-value input { border-color: var(--danger); }
.field-row .req { color: var(--danger); margin-left: 2px; }

/* Server validation detail, sat under the input it belongs to. */
.field-error {
  color: var(--danger);
  font-size: 12px;
  text-align: right;
  margin: -2px 0 6px;
}

.field-list { margin: 6px 0 0; padding: 0; list-style: none; }
.field-list li { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; }
.field-list .k { color: var(--muted); }
.field-list .v { text-align: right; }

/* One hire line inside the lines card. Separated by a rule rather than nested
   boxes — a card border inside a card border is noise in a narrow sidebar. */
.line-item { padding: 10px 0 2px; border-top: 1px solid var(--border); }
.line-item:first-of-type { border-top: none; }
.line-head { align-items: baseline; }
.line-name {
  font-weight: 600;
  /* Pipedrive product names are long ("Team Refrigeration - Weekly ..."); wrap
     rather than stretch the panel and force horizontal scrolling. */
  overflow-wrap: anywhere;
}
.line-remove { color: var(--danger); flex: none; }
.line-notes { margin-top: 4px; }

/* Qty and rate as a pair, each label stacked above its input so two numeric
   fields fit a sidebar width that will not take two label+input rows. */
.line-pair { display: flex; gap: 8px; margin: 6px 0; }
.line-num { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.line-num .k { color: var(--muted); }
.line-num input {
  font: inherit;
  width: 100%;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--fg);
}
.line-num select {
  font: inherit;
  width: 100%;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--fg);
}
.line-num.needs-value input { border-color: var(--danger); }

/* Collapsed per-line equipment spec (optional; ops completes the rest). */
.spec { margin: 6px 0 2px; }
.spec-toggle { padding: 0; }
.spec .field-row { margin-top: 4px; }

.missing {
  background: var(--danger-bg);
  border: 1px solid var(--danger);
  color: var(--danger);
  border-radius: 6px;
  padding: 8px 10px;
  margin-bottom: 10px;
}
.missing ul { margin: 4px 0 0; padding-left: 18px; }

.actions { display: flex; gap: 12px; margin-top: 8px; align-items: center; }

/* Secondary/explanatory text. Was unstyled, so hints rendered as plain black
   body copy the same weight as the content they annotate. */
.sub {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.sub:empty { display: none; }

/* Commit footer: a full-width action in a narrow sidebar, with its reason
   underneath rather than a faded button and loose black text. */
.commit {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.commit button.primary {
  display: block;
  width: 100%;
  padding: 9px 12px;
  font-weight: 600;
}
.commit .sub { margin-top: 8px; text-align: center; }
.commit-result:not(:empty) { margin-top: 10px; }
.commit-result .banner { margin-bottom: 0; }

button {
  font: inherit;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--fg);
  padding: 6px 12px;
  cursor: pointer;
}
button.primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
button.link { border: none; background: none; color: var(--accent); padding: 4px 0; }

/* A disabled action reads as deliberately inactive rather than a washed-out
   version of the enabled one. */
button:disabled { cursor: not-allowed; }
button.primary:disabled {
  background: var(--chip-bg);
  color: var(--muted);
  border-color: var(--border);
}

.picker { margin-top: 8px; }
.picker input[type="text"] {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--fg);
}
.picker-results { margin-top: 6px; max-height: 160px; overflow-y: auto; border: 1px solid var(--border); border-radius: 6px; }
.picker-result { padding: 6px 8px; cursor: pointer; border-bottom: 1px solid var(--border); }
.picker-result:last-child { border-bottom: none; }
.picker-result:hover { background: var(--chip-bg); }
.picker-result .sub { color: var(--muted); font-size: 12px; }

.banner { border-radius: 6px; padding: 10px; margin-bottom: 10px; }
.banner.info { background: var(--chip-bg); }
.banner.ok { background: var(--ok-bg); color: var(--ok); }
.banner.error { background: var(--danger-bg); color: var(--danger); }
/* Non-blocking advisory (unit-count mismatch). */
.banner.warn { background: var(--warn-bg); color: var(--warn); margin: 6px 0; }
.banner.warn div + div { margin-top: 2px; }
.sub.warn { color: var(--warn); }
.banner a { color: inherit; font-weight: 600; }