/* Shared reusable primitives and utilities. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.45rem 1.1rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: filter 0.15s, background 0.15s;
  white-space: nowrap;
  line-height: 1.4;
}

.btn:hover {
  filter: brightness(0.93);
  text-decoration: none;
}

.btn-primary {
  background: var(--app-brand-700);
  color: var(--app-text-inverse);
}

.btn-secondary {
  background: var(--app-text-muted);
  color: var(--app-text-inverse);
}

.btn-danger {
  background: var(--app-danger-accent);
  color: var(--app-text-inverse);
}

.btn-outline {
  background: transparent;
  border-color: var(--app-border-default);
  color: var(--app-text-strong);
}

.btn-sm {
  min-height: 34px;
  padding: 0.25rem 0.7rem;
  font-size: 0.8rem;
}

.btn-warning {
  background: var(--app-warning-accent);
  color: var(--app-text-inverse);
}

.btn-success {
  background: var(--app-success-accent);
  color: var(--app-text-inverse);
}

.btn-block {
  width: 100%;
}

.sidebar-toggle {
  appearance: none;
  border: 1px solid var(--app-border-default);
  background: var(--app-surface-panel);
  color: var(--app-text-strong);
  min-height: 38px;
  padding: 0.35rem 0.8rem;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 0.88rem;
  white-space: nowrap;
}

.sidebar-toggle:hover {
  background: var(--app-surface-page);
}

.logout-btn {
  background: var(--app-surface-panel);
  border: 1px solid var(--app-border-default);
  color: var(--app-text-strong);
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 0.875rem;
  min-height: 38px;
}

.logout-btn:hover {
  background: var(--app-surface-page);
}

.alert {
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  margin-bottom: 1rem;
  border: 1px solid transparent;
}

.alert-error {
  background: var(--app-danger-bg);
  border-color: var(--app-danger-border);
  color: var(--app-danger-fg);
}

.alert-success {
  background: var(--app-success-bg);
  border-color: var(--app-success-border);
  color: var(--app-success-fg);
}

.alert-warning {
  background: var(--app-warning-soft);
  border-color: var(--app-warning-accent);
  color: var(--app-warning-fg);
}

/* Informational, NOT a problem. Used by the payroll workspace's advisory
   panel (G2), which must not read like the blocking one sitting above it —
   an advisory rendered in warning yellow says "you cannot lock", which is
   the opposite of what it means. */
.alert-info {
  background: var(--app-info-bg);
  border-color: var(--app-info-border);
  color: var(--app-info-fg);
}

.required-mark {
  color: var(--app-danger-accent);
}

.text-muted-sm {
  color: var(--app-text-muted);
  font-size: 0.8rem;
}

.text-xs {
  font-size: 0.75rem;
}

.text-nowrap {
  white-space: nowrap;
}

.text-prewrap {
  white-space: pre-wrap;
}

.text-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.stack-top {
  margin-top: 1rem;
}

.stack-bottom-sm {
  margin-bottom: 0.85rem;
}

.helper-text {
  font-size: 0.82rem;
  color: var(--app-text-muted);
  margin-top: -0.35rem;
  margin-bottom: 0.75rem;
}

.helper-text-reset {
  margin: 0;
}

.form-note {
  margin-top: 0.8rem;
  margin-bottom: 0;
  max-width: 46rem;
}

.inline-form {
  display: inline;
}

.inline-form button,
.inline-form select,
.inline-form input {
  margin-right: 0.35rem;
}

.grid-two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.badge {
  display: inline-block;
  padding: 0.2em 0.55em;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
}

.badge-p1 {
  background: var(--app-danger-accent);
  color: var(--app-text-inverse);
}

.badge-p2 {
  background: var(--app-warning-accent);

  /* J02 (H-2): near-black on the bright warning-accent fill. White was 2.57:1
     (fails AA); --app-text-strong on the orange = 6.00:1. F01/P5 precedent. */
  color: var(--app-text-strong);
}

.badge-p3 {
  /* J02/J-BLUE (L-1): low-priority pill was --app-info-accent blue, colliding
     with the CNS/completed_not_shipped + link blue (priority read as status).
     Mirror the Mitch-approved kiosk-priority-low neutral treatment
     (kiosk/public.css) so priority != status at a glance. 7.08:1. */
  background: var(--app-neutral-fg);
  color: var(--app-neutral-bg);
}

.badge-p4 {
  background: var(--job-status-completed-not-shipped-bg);
  color: var(--app-text-inverse);
}

/* v1.9.2 R09: P6 = Invoiced. Needed HERE, not just in jobs/pages.css:
   the job-detail page-header hero badge renders as a bare
   `<span class="badge badge-p6">` (templates/_partials/page_header.html)
   WITHOUT the `job-priority-badge` companion class that pages.css's rules
   key off — so without this rule the hero badge reads "P6 — Invoiced"
   with no fill at all.

   KNOWN GAP, deliberately not fixed here: `.badge-p5` has the same
   problem and has had it since v1.3.5 — the completed hero badge is
   likewise unstyled. Adding it would change an existing surface nobody
   asked us to touch during a launch-blocker series, so it is logged as
   known-open instead. */
.badge-p6 {
  background: var(--job-priority-invoiced-bg);
  color: var(--app-text-inverse);
}

.badge-status {
  display: inline-block;
  padding: 0.2em 0.55em;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  background: var(--app-neutral-bg);
  color: var(--app-neutral-fg);
}

.badge-status.ongoing {
  background: var(--app-success-soft);
  color: var(--app-success-fg);
}

.badge-status[class~="on_hold"] {
  background: var(--app-warning-bg);
  color: var(--app-warning-fg);
}

.badge-status[class~="awaiting_arrival"],
.badge-status[class~="awaiting_parts"] {
  background: var(--job-status-awaiting-bg);
  color: var(--app-warning-fg);
}

.badge-status[class~="awaiting_arrival_and_parts"] {
  background: var(--job-status-awaiting-strong-bg);
  color: var(--app-warning-fg);
}

.badge-status[class~="awaiting_customer_decision"] {
  background: var(--job-status-decision-bg);
  color: var(--job-status-decision-fg);
}

.badge-status[class~="completed_not_shipped"] {
  background: var(--job-status-completed-not-shipped-bg);

  /* J01 (H-1): this RAW (un-prefixed) CNS class is what the list/payroll/labor
     badges emit; success-fg green here rendered 1.82:1 on the CNS blue,
     contradicting the documented 5.15:1. White (--app-text-inverse) = 5.15:1.
     The status- prefixed selector (jobs/pages.css) already fixed only detail. */
  color: var(--app-text-inverse);
  border: 1px dashed var(--job-status-completed-not-shipped-border);
}

.badge-status.completed {
  background: var(--app-success-bg);
  color: var(--app-success-fg);
}

.badge-status.archived {
  background: var(--app-neutral-bg);
  color: var(--app-text-muted);
}

.badge-status.captured {
  background: var(--app-warning-bg);
  color: var(--app-warning-fg);
}

.badge-status.open {
  background: var(--app-success-bg);
  color: var(--app-success-fg);
}

.badge-status.review {
  background: var(--app-info-bg);
  color: var(--app-info-fg);
}

.badge-status[class~="in_review"] {
  background: var(--app-info-bg);
  color: var(--app-info-fg);
}

.badge-status.locked {
  background: var(--app-neutral-bg);
  color: var(--app-text-default);
}

.badge-status.classified {
  background: var(--app-success-bg);
  color: var(--app-success-fg);
}

.badge-status.manual-review {
  background: var(--app-warning-bg);
  color: var(--app-warning-fg);
}

.badge-status.missing {
  background: var(--app-danger-bg);
  color: var(--app-danger-fg);
}

.badge-status.pending {
  background: var(--app-warning-bg);
  color: var(--app-warning-fg);
}

.badge-status.approved {
  background: var(--app-success-bg);
  color: var(--app-success-fg);
}

.badge-status.rejected {
  background: var(--app-danger-bg);
  color: var(--app-danger-fg);
}

.worker-detail-actions {
  justify-content: space-between;
}

.worker-detail-actions-left,
.worker-detail-actions-right {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.worker-detail-actions-right {
  margin-left: auto;
}

.audit-action {
  font-weight: 600;
}

.audit-action-create {
  color: var(--app-success-accent);
}

.audit-action-update {
  color: var(--app-info-accent);
}

.audit-action-activate {
  color: var(--app-warning-accent);
}

.audit-action-archive {
  color: var(--app-text-muted);
}

.pagination {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-top: 1rem;
  flex-wrap: wrap;
}

.pagination a,
.pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 0.6rem;
  border-radius: var(--radius);
  font-size: 0.875rem;
  border: 1px solid var(--app-border-default);
  background: var(--app-surface-panel);
  color: var(--app-text-strong);
}

.pagination a:hover {
  background: var(--app-surface-page);
  text-decoration: none;
}

.pagination .current {
  background: var(--app-brand-700);
  color: var(--app-text-inverse);
  border-color: var(--app-brand-700);
}

.pagination .disabled {
  color: var(--app-text-muted);
  pointer-events: none;
}

.pagination-jump {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: 1.1rem;
  padding-left: 1.15rem;
  border-left: 1px solid var(--app-border-default);
}

.pagination-jump input[type="number"] {
  width: 3.65rem;
  height: 36px;
  padding: 0 0.45rem;
  border: 1px solid var(--app-border-default);
  border-radius: var(--radius);
  background: var(--app-surface-panel);
  color: var(--app-text-strong);
  font-size: 0.875rem;
  font-weight: 600;
  font-family: inherit;
  line-height: 1;
  text-align: center;
  appearance: textfield;
}

.pagination-jump input[type="number"]::-webkit-outer-spin-button,
.pagination-jump input[type="number"]::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}

.pagination-jump input[type="number"]:focus {
  border-color: var(--app-brand-600);
  outline: 0;
  box-shadow: 0 0 0 3px var(--alpha-brand-18);
}

@media (width <= 768px) {
  .pagination-jump {
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
  }
}

@media (width <= 768px) {
  .grid-two {
    grid-template-columns: 1fr;
  }

}