/* Shared visual tokens and action palette for the full CRM. */
:root {
  --brand-navy: #102d50;
  --brand-navy-hover: #193e67;
  --surface-muted: #eef2f7;
  --surface-muted-hover: #e3eaf2;
  --text-primary: #1b2d46;
  --text-muted: #718198;
  --line-default: #dce4ee;
  --action-edit: #f4c95d;
  --action-edit-hover: #e9b93e;
  --action-save: #238653;
  --action-save-hover: #176c42;
  --action-delete: #cf3545;
  --action-delete-hover: #ad1e2e;
  --blue: var(--brand-navy);
  --accent: var(--brand-navy);
  --border: var(--line-default);
  --muted: var(--text-muted);
}

#app .btn:not(.secondary):not(.danger):not(.btn-action-edit):not(.btn-action-save):not(.btn-action-delete):not(.save-primary):not(.save-delete):not(.buyer-delete) {
  background: var(--brand-navy);
  border-color: var(--brand-navy);
  color: #fff;
}
#app .btn:not(.secondary):not(.danger):not(.btn-action-edit):not(.btn-action-save):not(.btn-action-delete):not(.save-primary):not(.save-delete):not(.buyer-delete):hover:not(:disabled) {
  background: var(--brand-navy-hover);
  border-color: var(--brand-navy-hover);
  color: #fff;
}
#app .btn.secondary {
  background: var(--surface-muted);
  border: 1px solid var(--line-default);
  color: #43536a;
}
#app .btn.secondary:hover:not(:disabled) {
  background: var(--surface-muted-hover);
  border-color: #cbd6e3;
  color: var(--brand-navy);
}
#app .hero-button {
  background: #fff;
  border: 1px solid #fff;
  color: var(--brand-navy);
}
#app .hero-button:hover:not(:disabled) {
  background: #eaf0f6;
  border-color: #eaf0f6;
  color: var(--brand-navy);
}

#app .btn.btn-action-edit,
#app button.btn-action-edit {
  background: linear-gradient(180deg, #fff4c9, #ffe89a);
  border-color: #e4bd56;
  color: #614900;
}
#app .btn.btn-action-edit:hover:not(:disabled),
#app button.btn-action-edit:hover:not(:disabled) {
  background: linear-gradient(180deg, #ffefb1, #ffdf72);
  border-color: #d5a92e;
  color: #523b00;
}
#app .btn.btn-action-save,
#app button.btn-action-save,
#app .btn.save-primary {
  background: linear-gradient(180deg, #2c9a60, var(--action-save));
  border-color: var(--action-save);
  color: #fff;
}
#app .btn.btn-action-save:hover:not(:disabled),
#app button.btn-action-save:hover:not(:disabled),
#app .btn.save-primary:hover:not(:disabled) {
  background: linear-gradient(180deg, var(--action-save), var(--action-save-hover));
  border-color: var(--action-save-hover);
  color: #fff;
}
#app .btn.btn-action-delete,
#app button.btn-action-delete,
#app .btn.danger,
#app .btn.save-delete,
#app .btn.buyer-delete,
#app button.buyer-delete {
  background: linear-gradient(180deg, #e24755, var(--action-delete));
  border-color: #bd2938;
  color: #fff;
}
#app .btn.btn-action-delete:hover:not(:disabled),
#app button.btn-action-delete:hover:not(:disabled),
#app .btn.danger:hover:not(:disabled),
#app .btn.save-delete:hover:not(:disabled),
#app .btn.buyer-delete:hover:not(:disabled),
#app button.buyer-delete:hover:not(:disabled) {
  background: linear-gradient(180deg, var(--action-delete), var(--action-delete-hover));
  border-color: var(--action-delete-hover);
  color: #fff;
}

/* Separate assignment actions with the two INVICTA brand accents. */
#app .buyer-header-actions .buyer-action-ovp {
  background: #fff0f2;
  border: 1px solid #efc7ce;
  color: #a51c33;
}
#app .buyer-header-actions .buyer-action-sopr {
  background: #eef3f9;
  border: 1px solid #cddbeb;
  color: #173d67;
}
#app .buyer-header-actions .buyer-action-ovp:hover:not(:disabled) {
  background: #ffe4e8;
  border-color: #e8aeb9;
}
#app .buyer-header-actions .buyer-action-sopr:hover:not(:disabled) {
  background: #e2ebf5;
  border-color: #b7c9df;
}

/* The buyer work section keeps related account and planning fields compact. */
#app #buyer-form .buyer-work-grid {
  gap: 10px 12px;
  margin: 8px 0 12px;
}
#app #buyer-form .buyer-work-grid > label:not(.wide) {
  gap: 4px;
}
#app #buyer-form .buyer-work-grid input,
#app #buyer-form .buyer-work-grid select {
  padding-block: 7px;
}
#app #buyer-form .buyer-work-grid textarea {
  min-height: 76px;
  padding: 9px;
}
#app #buyer-form .buyer-work-grid .buyer-group {
  padding: 12px;
}
#app #buyer-form .buyer-work-grid .buyer-group label + label {
  margin-top: 10px;
}

#app button:focus-visible,
#app a:focus-visible,
#app summary:focus-visible,
#app input:focus-visible,
#app select:focus-visible,
#app textarea:focus-visible {
  outline-color: #4d83bd;
}

/* Compact four-state customer status selector and badges. */
#app #buyer-form .buyer-top-status {
  padding: 10px 12px;
  margin: 8px 0 14px !important;
}
#app .buyer-status-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
#app .buyer-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 6px 11px;
  border: 1px solid var(--line-default);
  background: #fff;
  color: #43536a;
  font-size: 13px;
}
#app .buyer-status-chip::before,
#app .buyer-work-badge .buyer-status-dot {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: var(--status-color, #8793a3);
}
#app .buyer-status-chip[data-status="1"],
#app .buyer-work-badge.active { --status-color: #278653; }
#app .buyer-status-chip[data-status="2"],
#app .buyer-work-badge.declined { --status-color: #d78a22; }
#app .buyer-status-chip[data-status="3"],
#app .buyer-work-badge.blocked { --status-color: #cf3545; }
#app .buyer-status-chip[aria-pressed="true"] {
  background: color-mix(in srgb, var(--status-color, #8793a3) 10%, white);
  border-color: var(--status-color, #8793a3);
  color: var(--text-primary);
  box-shadow: inset 0 0 0 1px var(--status-color, #8793a3);
  font-weight: 650;
}
#app .buyer-work-badge { gap: 7px; }
#app .save-toolbar { justify-content: space-between; }
#app .save-toolbar .crm-back-button,
#app .save-toolbar .buyer-back-button { margin-right: auto; order: -1; }
@media (max-width: 640px) {
  #app .buyer-status-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #app .buyer-status-chip { justify-content: flex-start; }
}